微信小程序Tab頁、輪播圖demo--第一課

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

你可能還喜歡 ,點擊下方圖片即可閱讀

微信小程序獨家秘笈之左滑刪除

如何快速制作微信小程序預約功能在這里只要十分鐘

開發 | 小程序「分享圖」生成難? 一招教你輕松解決
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容