微信小程序关于swiper问题求助

kaifeizhang 2018-04-07 02:05:47
第一次发帖
我想实现一个轮播图,数据来源如下

"data": [
{
"img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522758300555&di=be2aa9242f01c56607d0d0a6822370d1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4a36acaf2edda3ccdd9b40d50be93901203f92cc.jpg",
"author": "苏霞",
"content": "testtest",
"maketime": "23:50:01"
},
{
"img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522758300555&di=be2aa9242f01c56607d0d0a6822370d1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4a36acaf2edda3ccdd9b40d50be93901203f92cc.jpg",
"author": "傅静",
"content": "testtest",
"maketime": "08:45:40"
},
{
"img_url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522758300555&di=be2aa9242f01c56607d0d0a6822370d1&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F4a36acaf2edda3ccdd9b40d50be93901203f92cc.jpg",
"author": "曾勇",
"content": "testtest",
"maketime": "01:37:33"
}
]

wxml文件如下

<view class="container">
<swiper class="comment_swiper" current="{{current}}" bindchange="handleChange">
<block wx:for="{{comments}}" wx:for-index="idx" wx:key="{{content_id}}">
<swiper-item class="comment_swiper_item">
<import src="templates/commentItem.wxml"/>
<template is="comment_item" data="{{item: item}}"/>
</swiper-item>
</block>
</swiper>
</view>


<template name = "comment_item">
<view class = "comment_card">
<image class="comment_image" src = "{{item.img_url}}" mode = "aspectFill">
</image>
<view class = "comment_addition">
<text class = "comment_author">{{item.author}}</text>
</view>
<view class = "comment_content">
<text class = "comment_content_text">{{item.content}}</text>
</view>
<view class = "comment_maketime">{{item.maketime}}</view>
</view>
</template>

js代码如下

data: {
comments: [],
current:0
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
wx.request({
url: 'https://www.easy-mock.com/mock/5aae0ff22b69a0654fe443f3/example/comment',
method: 'GET',
success: (res) => {
that.setData({
comments: res.data
})
}
})
},

轮播图一直不能显示,请问各位大神问题出在哪里
...全文
683 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2018-04-07
  • 打赏
  • 举报
回复
你看好别人的结构,不能乱嵌套其他元素,样式也不要改示例的

Web开发学习资料推荐
ajax对象属性withCredentials

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧