微信小程序tab页、轮播图demo_微信小程序

上一篇: 微信小程序初步入坑指南下一篇:行业log | 小程序搭载智慧零售，...

微信小程序tab页、轮播图demo

发布时间：2019-06-09 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了微信小程序tab页、轮播图demo，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

效果：

思路：
利用小程序列表渲染功能，读取导航栏中栏目数据的index和ITem。将index存入事件中可以读取的data中。js读取这个data值之后，修改相应模块元素的class，修改样式。
最巧妙的就是利用{{currentNavbar==idx ? 'active' : ''}}这个数据绑定判断当前块是否被选中的状态
wXMl：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
  
    {{item}}
  

" title="" data-original-title="复制">
      
      
<view class="navbar">
  <view class="navbar-item" wx:for="{{navbar}}" wx:for-index="idx"  data-idx="{{idx}}" bindtap="swichNav">
    <text class="navbar-text {{currentNavbar==idx ? 'active' : ''}}">{{item}}</text>
  </view>
</view>

js：

      
      
      
      
      
Page({
  data: {
    navbar: ['推荐', '新作', '展览'],
    currentNavbar: '0',
  },
  swichNav:function(e){
    this.setData({
      currentNavbar: e.currentTarget.dataset.idx
    });
  },
}

wxss（部分）：

      
      
      
      
      
.navbar {
    display: flex;
    border-bottom: 1px solid #eee;
}
.navbar-item {
    flex: 1.0;
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: -1px;
}
.navbar-text {
    display: block;
    width: 30px;
    padding: 10px;
    margin: auto;
}
.navbar-text.active {
    border-bottom: 2px solid #000;
    color: #000;
    font-weight: bold;
}

@H_512_165@
延伸：类似tab切换的卡片切换效果（稍作修改即可成为轮播图）
效果：

wxML：

      
      
      
      
      
<view class="wrap" bindtouchstart="touchStart" bindtouchend="touchEnd">

  <view class="nav-item {{testClass[index]}}" wx:for="{{testNav}}" data-index="{{index}}">
    <view>{{item.word}}</view>
  </view>

</view>

wxss：

      
      
      
      
      
.wrap{
  margin-top: 20rpx;
  color: #999;
  position: relative;
  width: 750rpx;
  height: 250rpx;

}

.nav-item{
  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;
}

最后.next+.next这个样式是为了使卡片切换时能看到右侧卡片的移动过程，而不是右侧一直有一个不动的卡片
js：

      
      
      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;
    }
  }
}）
" title="" data-original-title="复制">
      
      
var flag = 0;
var classCatch = ['current', 'next', 'next', 'next'];
var touch = [0,0];

Page({
  data: {
    testClass:classCatch,
    testCurrentNav:0,
    testNav:[{
      word:'111我来自后方111111111111111111111111',
    },{
        word: '222我来自后方222222222222222222222222222222',
    },{
        word: '333我来自后方33333333333333333333333333333333333333',
    },{
        word: '444我来自后方4444444444444444444444444444444444444',
    }]
  },
    /**
   * 测试轮播图
   */
  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;
    }
  }
}）

目前觉得比较简洁的就是这样的写法，毕竟比较小白，如果大佬们有更简洁的方法，请多多指教。