微信小程序组件 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>