微信小程序Tab页、轮播图demo--第一课

2018-06-27 本文已影响3人极客小寨

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