微信小程序组件 360

data: {
nums: 1,
start: ‘‘,
// change:‘‘
// 上一部记忆数据
mid: ‘‘
},
mytouchmove: function (e) {
var start = this.data.start;
var change = parseInt(e.touches[0].pageX);
let that=this;
var nums = this.data.nums;
if ((change - start) % 2 == 0 && (change - this.data.mid) > 0) {
nums++;
if (nums > 35) {
nums = 1;
}
// console.log(n)
} else if ((change - start) % 2 == 0 && (change - this.data.mid) < 0) {
nums--;
if (nums < 1) {
nums = 35;
}
 
 
}
this.setData({
mid: parseInt(change),
nums: nums
})
},
mytouchstart: function (e) {
var start = this.data.start;
start = e.touches[0].pageX;
this.setData({
start: parseInt(start)
})
},
 
 
 
 
<view class=‘box‘>
<view class=‘pic‘>
<image mode=‘widthFix‘ class="{{nums==1?‘active‘:‘‘}}" src=‘../../img/01.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==2?‘active‘:‘‘}}" src=‘../../img/02.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==3?‘active‘:‘‘}}" src=‘../../img/03.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==4?‘active‘:‘‘}}" src=‘../../img/04.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==5?‘active‘:‘‘}}" src=‘../../img/05.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==6?‘active‘:‘‘}}" src=‘../../img/06.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==7?‘active‘:‘‘}}" src=‘../../img/07.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==8?‘active‘:‘‘}}" src=‘../../img/08.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==9?‘active‘:‘‘}}" src=‘../../img/09.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==10?‘active‘:‘‘}}" src=‘../../img/10.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==11?‘active‘:‘‘}}" src=‘../../img/11.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==12?‘active‘:‘‘}}" src=‘../../img/12.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==13?‘active‘:‘‘}}" src=‘../../img/13.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==14?‘active‘:‘‘}}" src=‘../../img/14.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==15?‘active‘:‘‘}}" src=‘../../img/15.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==16?‘active‘:‘‘}}" src=‘../../img/16.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==17?‘active‘:‘‘}}" src=‘../../img/17.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==18?‘active‘:‘‘}}" src=‘../../img/18.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==19?‘active‘:‘‘}}" src=‘../../img/19.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==20?‘active‘:‘‘}}" src=‘../../img/20.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==21?‘active‘:‘‘}}" src=‘../../img/21.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==22?‘active‘:‘‘}}" src=‘../../img/22.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==23?‘active‘:‘‘}}" src=‘../../img/23.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==24?‘active‘:‘‘}}" src=‘../../img/24.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==25?‘active‘:‘‘}}" src=‘../../img/25.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==26?‘active‘:‘‘}}" src=‘../../img/26.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==27?‘active‘:‘‘}}" src=‘../../img/27.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==28?‘active‘:‘‘}}" src=‘../../img/28.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==29?‘active‘:‘‘}}" src=‘../../img/29.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==30?‘active‘:‘‘}}" src=‘../../img/30.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==31?‘active‘:‘‘}}" src=‘../../img/31.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==32?‘active‘:‘‘}}" src=‘../../img/32.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==33?‘active‘:‘‘}}" src=‘../../img/33.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==34?‘active‘:‘‘}}" src=‘../../img/34.jpg‘></image>
<image mode=‘widthFix‘ class="{{nums==35?‘active‘:‘‘}}" src=‘../../img/35.jpg‘></image>
</view>
<view class=‘show‘ bindtouchstart="mytouchstart" bindtouchmove="mytouchmove" ></view>
</view>

微信小程序组件 360

上一篇:微信小程序接口收集


下一篇:微信小程序wxss设置样式