小程序自定义轮播图

话不多说，上图上代码。

wxml

<view style="white-space: nowrap;" class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">

<view class="club" animation="{{animation1}}" bindtap="scrollLeft">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

<text>{{clubs[0].name}}</text>

</view>

<view class="club" animation="{{animation2}}" bindtap="scrollLeft">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

<text>{{clubs[1].name}}</text>

</view>

<view class="club" animation="{{animation3}}">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

<text>{{clubs[2].name}}</text>

</view>

<view class="club" animation="{{animation4}}" bindtap="scrollRight">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

<text>{{clubs[3].name}}</text>

</view>

<view class="club" animation="{{animation5}}" bindtap="scrollRight">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

<text>{{clubs[4].name}}</text>

</view>

</view>

wxss

.box {

height: 340rpx;

z-index: 0;

margin: 50rpx 0;

}

.box .club {

height: 140rpx;

140rpx;

position: relative;

display: inline-block;

}

.club image {

height: 140rpx;

140rpx;

}

.club text {

display: block;

100%;

font-size: 24rpx;

line-height: 40rpx;

text-align: center;

}

.box .club:nth-child(1) {

transform: scale(0.8, 0.8) translateX(-120rpx);

opacity: 0.2;

z-index: 10;

}

.box .club:nth-child(2) {

transform: scale(1,1) translateX(-80rpx);

opacity: 0.5;

z-index: 100;

}

.box .club:nth-child(3) {

transform: scale(1.4,1.4);

z-index: 1000;

}

.box .club:nth-child(4) {

transform: scale(1,1) translateX(80rpx);

opacity: 0.5;

z-index: 100;

}

.box .club:nth-child(5) {

transform: scale(0.8, 0.8) translateX(120rpx);

opacity: 0.2;

z-index: 10;

}

.box .club:nth-child(1) text,

.box .club:nth-child(2) text,

.box .club:nth-child(4) text,

.box .club:nth-child(5) text{

visibility: hidden;

}

js

//触摸开始事件

touchstart: function (e) {

console.log(e.touches[0].pageX);

this.data.touchDot = e.touches[0].pageX;

var that = this;

this.data.interval = setInterval(function () {

that.data.time += 1;

}, 100);

},

//触摸移动事件

touchmove: function (e) {

let touchMove = e.touches[0].pageX;

let touchDot = this.data.touchDot;

let time = this.data.time;

console.log("touchMove: " + touchMove + ", touchDot: " + touchDot + ", diff: " + (touchMove - touchDot));

//向左滑动

if (touchMove - touchDot <= -40 && time < 10 && !this.data.done) {

console.log("向左滑动");

this.data.done = true;

this.scrollLeft();

}

//向右滑动

if (touchMove - touchDot >= 40 && time < 10 && !this.data.done) {

console.log("向右滑动");

this.data.done = true;

this.scrollRight();

}

},

//触摸结束事件

touchend: function (e) {

clearInterval(this.data.interval);

this.data.time = 0;

this.data.done = false;

}, scrollLeft() {

var animation1 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation2 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation3 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation4 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation5 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

this.animation1 = animation1;

this.animation2 = animation2;

this.animation3 = animation3;

this.animation4 = animation4;

this.animation5 = animation5;

this.animation1.translateX(-60).opacity(0).step();

this.animation2.translateX(-140).opacity(0.5).scale(0.8, 0.8).step();

this.animation3.translateX(-110).opacity(0.5).scale(1, 1).step();

this.animation4.translateX(-70).opacity(1).scale(1.4, 1.4).step();

this.animation5.translateX(-30).opacity(0.5).scale(1, 1).step();

this.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

var that = this;

setTimeout(function () {

that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: 'linear' });

that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

}.bind(this), 195)

let array = this.data.clubs;

let shift = array.shift();

array.push(shift);

setTimeout(function () {

this.setData({

clubs: array

})

}.bind(this), 195)

},

//向右滑动事件

scrollRight() {

var animation1 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation2 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation3 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation4 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation5 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

this.animation1 = animation1;

this.animation2 = animation2;

this.animation3 = animation3;

this.animation4 = animation4;

this.animation5 = animation5;

this.animation1.translateX(30).opacity(0.5).scale(1, 1).step();

this.animation2.translateX(70).opacity(1).scale(1.4, 1.4).step();

this.animation3.translateX(110).opacity(0.5).scale(1, 1).step();

this.animation4.translateX(120).opacity(0.2).scale(0.8, 0.8).step();

this.animation5.translateX(130).opacity(0).step();

this.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

var that = this;

setTimeout(function () {

that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: 'linear' });

that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

}.bind(this), 195)

let array = this.data.clubs;

let pop = array.pop();

array.unshift(pop);

setTimeout(function () {

this.setData({

clubs: array

})

}.bind(this), 195)

}

 

复制完我还有几句话要说，做前端千万不要被框架限制住自己，要做一个有灵魂的工程师。就像这个轮播图千万不要被小程序的swiper所限制。