小程序 swipe-item标签携带的data-数据怎么通过change事件获取

一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

方法如下：

js:

Page({  data: {

   text: 'init data',

   num: 0,

   array: [{text: 'init data'}],    object: {

     text: 'init data'

   }

 },

 changeText: function() {    // this.data.text = 'changed data'  // bad, it can not work

   this.setData({

     text: 'changed data'

   })

 },

 changeNum: function() {    this.data.num = 1

   this.setData({

     num: this.data.num

   })

 },

 changeItemInArray: function() {    // you can use this way to modify a danamic data path

   this.setData({      'array[0].text':'changed data'

   })

 },

 changeItemInObject: function(){    this.setData({      'object.text': 'changed data'

   })

 },

 addNewField: function() {    this.setData({      'newField.text': 'new data'

   })

 }

})

wxml:

<view>{{text}}</view><button bindtap="changeText">Change normal data </button><view>{{num}}</view><button bindtap="changeNum">Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray">Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject">Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField">Add new data </button>

学小程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<!-- 滚动广告 begin -->

<view class="slider-wrapper">

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="*this">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

<view class="swipe-btn-wrapper">

<view class="swipe-btn-list">

<view class="{{dotsClass[0]}}"></view>

<view class="{{dotsClass[1]}}"></view>

<view class="{{dotsClass[2]}}"></vi

---