微信小程序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
你可能還喜歡 ,點擊下方圖片即可閱讀
