微信小程序Tab选项卡切换大集合

代码地址如下：
http://www.demodashi.com/demo/14028.html

一、前期准备工作

软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 实现用户自定义弹框
• 带动画（动画可做参靠，个人要是觉得不好看可以自定义动画）
• 获取弹出框的内容，自定义事件获取

2、案例目录结构

二、程序实现具体步骤

1.选项卡xxx.wxml代码

a.tab1代码

  
    {{item}}
  


	首页

b.tab2代码

  
    {{item.word}}
  



	首页

c.tabbar代码

  
    已获得赏金
    赏金在路上
    邀请失败
  


  


  


  


	首页

2.xxx.wxss代码

.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;
}

3.部分xxx.js逻辑代码

a.部分的功能实现

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;
    }
  }

三、案例运行效果图

微信小程序Tab选项卡切换大集合

代码地址如下：
http://www.demodashi.com/demo/14028.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权