微信小程序Tap栏切换

深藏阁楼爱情的钟 2022-09-05 14:55 238阅读 0赞

> 这里是引用利用swiper的current属性来实现tab栏切换

#### 效果图 ####

![请添加图片描述][e1216556747f433cb513176393dbbc57.gif]

#### wxml ####

#### wxss ####

.tabbar{ 
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 100%;
    }
    .select{ 
      border-bottom: 2rpx solid orange;
    }
    .default{ 
      font-size: 32rpx;
    }
    .textTest{ 
      height: 100rpx;
      margin:20rpx 20rpx;
      color: aqua;
      font-size: 50rpx;
      line-height: 100rpx;
      text-align: center;
      background-color: #00a4ff;
      border-radius: 50rpx;
    }
    swiper{ 
      /* 全屏高度 */
      height: calc( 100vh - 100rpx );
    }

#### js ####

// pages/conponent/conponent.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
          barname:["测试1","测试2","测试3","测试4"],
          currentTab:0,
          listTest:[
            "迪迦",
            "艾斯",
            "盖亚",
            "leechoy"
          ]
      },
      clickTab:function(e){ 
          this.setData({ 
            currentTab:e.target.dataset.current
          })
      },
      showContent:function(e){ 
        wx.showModal({ 
          title:e.target.dataset.name,
          content:"永远的神",
          cancelColor: 'cancelColor',
          success:function(res){ 
            if(res.confirm){ 
              wx.showToast({ 
                title: '你点击了确认',
                content:'j'
              })
            }
            else{ 
              wx.navigateTo({ 
                url: '/pages/index/index',
              })
            }
          }
        })
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

[e1216556747f433cb513176393dbbc57.gif]: /images/20220829/c72bb39d281a4291a7d929993113697b.png