微信小程序Tab页、轮播图demo--第一课.jpg
1 . 概述
我们在学习微信小程序或者做项目时，应该会遇到轮播Banner效果情况，那么这个轮播功能我们应该怎么编写呢？
今天我们说下微信小程序轮播Banner效果的实现，主要思路利用小程序列表渲染功能，读取导航栏中栏目数据的index和item。将index存入事件中可以读取的data中。js读取这个data值之后，修改相应模块元素的class，修改样式。
最巧妙的就是利用{{currentNavbar==idx ? 'active' : ''}}这个数据绑定判断当前块是否被选中的状态。今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了，二当家要上图来啦！
image
今天分享的是图一
image
快去拿个小板凳，坐等跟多Tab更新
2 . wxml
<view class="wrap" bindtouchstart="touchStart" bindtouchend="touchEnd">
<view class="nav-item {{testClass[index]}}" wx:for="{{testNav}}" wx:key="" data-index="{{index}}">
<view>{{item.word}}</view>
</view>
</view>
3. js
var flag = 0;
var classCatch = ['current', 'next', 'next', 'next'];
var touch = [0,0];
Page({
data: {
testClass:classCatch,
testCurrentNav:0,
testNav:[{
word:'我来自后方Geekxz',
},{
word: '我来自后方Geekxz 22222222',
},{
word: '我来自后方Geekxz 3333333333333',
},{
word: '我来自后方Geekxz 6666666666666',
}]
},
/**
* 测试轮播图
*/
touchStart (e){
touch[0] = e.touches[0].clientX
},
touchEnd (e){
touch[1] = e.changedTouches[0].clientX;
if(touch[0]-touch[1]>5){
this.swipNext();
} else if (touch[1] - touch[0] > 5){
this.swipPrev();
}
},
swipNext (e) {
flag++;
if (flag < this.data.testNav.length){
for (var i = 0; i < this.data.testNav.length; i++) {
if (i == flag) {
classCatch[i] = 'current';
} else if (i < flag) {
classCatch[i] = 'prev';
} else {
classCatch[i] = 'next';
}
}
this.setData({
testClass: classCatch
})
}else{
flag = this.data.testNav.length-1;
}
},
swipPrev(e) {
flag--;
if (flag+1 > 0 ) {
for (var i = 0; i < this.data.testNav.length; i++) {
if (i == flag) {
classCatch[i] = 'current';
} else if (i < flag) {
classCatch[i] = 'prev';
} else {
classCatch[i] = 'next';
}
}
this.setData({
testClass: classCatch
})
} else {
flag = 0;
}
}
})
4. css
.wrap{
margin-top: 20rpx;
color: #999;
position: relative;
width: 750rpx;
height: 250rpx;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.nav-item{
margin-top:10px;
width: 400rpx;
height: 200rpx;
box-shadow: 0 0 5rpx #e24233;
padding: 5rpx;
transition: all 0.5s;
word-break:break-all;
background-color: snow;
}
.prev{
position: absolute;
transform: scale(0.8);
left: -280rpx;
margin-right: 55rpx;
}
.current{
position: absolute;
left: 50%;
margin-left: -200rpx;
}
.next{
position: absolute;
left:620rpx;
top: 0;
transform: scale(0.8);
z-index: 10;
}
.next+.next{
z-index: -1;
background-color: deepskyblue;
}
以上代码为效果为 图二
注：如需要获取案例，或者遇到其他问题，本人微信：geekxz 。
image
你可能还喜欢 ,点击下方图片即可阅读
