代码地址如下：

一、前期准备工作

软件环境：微信开发者工具

官方下载地址：

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选项卡切换大集合

代码地址如下：

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