微信小程序关于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

        })

      }

    })

  },