效果
思路
下一页的原理如下,上一页则相反:先把最后的元素放到前面,再向前移动所有元素。
涉及到绝对定位、transition动画、延时函数setTimeout
缺点
本案例没有考虑通过轮播点来跳转轮播图。例如,想从第一个轮播图,跳到第三个,这个案列是需要修改才能做到。
代码
wxml
<view class='background'>
<view class="image_container {{move == 1?'anim_pre':(move == 2?'anim_next':'left')}}" >
<view class="image" wx:for="{{list}}" style='background:{{item}}'></view>
</view>
</view>
<view class='btn'>
<view class='pots {{pot == index?"gray":""}}' bindtap='pots' data-index="{{index}}" wx:for="{{list}}"></view>
</view>
<view class='btn' style='top:600rpx;'>
<view style='margin:10rpx auto;' bindtap='pre'>上一页</view>
<view style='margin:10rpx auto;' bindtap='next'>下一页</view>
</view>
wxss
.background{
width: 100%;
height: 400rpx;
background: #eee;
position: relative;
z-index: 1;
overflow: hidden;
}
.image_container{
position: absolute;
display: flex;
}
.image{
width: 800rpx;
height: 400rpx;
float: left;
}
.anim_next{
transition: transform 0.8s;
transform:translateX(-800rpx);
}
.anim_pre{
left: -800rpx;
transition: transform 0.8s;
transform:translate(800rpx,0);
}
.btn{
display: flex;
align-items: center;
justify-content: center;
}
.pots{
width: 20rpx;
height: 20rpx;
border: 2rpx solid gray;
border-radius: 100%;
margin: 20rpx;
}
.gray{
background: gray;
}
js
Page({
data: {
list: ['red', 'blue', 'yellow'],
pot: 0,
move:0
},
onLoad: function () {
},
pre:function(e){
if(this.data.move == 0){
var pot = --this.data.pot;
pot = pot < 0 ? this.data.list.length - 1 : pot;
var list = this.data.list;
var last = list.pop();
list.unshift(last);
this.setData({
pot: pot,
list: list,
move: 1
})
let that = this;
setTimeout(function () {
that.setData({
move: 0
})
}, 800)
}
},
next:function(e){
if(this.data.move == 0){
var pot = ++ this.data.pot;
pot = pot > this.data.list.length - 1 ? 0 : pot;
this.setData({
pot:pot,
move:2
})
let that = this;
setTimeout(function(){
var list = that.data.list;
var first = list.shift();
list.push(first);
that.setData({
list:list,
move:0
})
},800)
}
},
})
扩展
基于以上的原理,编写出更加美观的效果:
在线演示:www.lanyue.ink