微信小程序实现标签页滑块效果

àì夳堔傛蜴生んèń 2021-09-17 08:56 525阅读 0赞

![标题图][1240]

> 微信小程序实现标签页滑块效果

![案例一][strip]

小程序完整代码:

wxml:

wxss:

Page {
      background-color: #f1f1f1;
    }
    
    .swiper-tab {
      background-color: #fff;
      width: 100%;
      text-align: center;
      line-height: 80rpx;
    }
    
    .swiper-tab-list {
      font-size: 30rpx;
      display: inline-block;
      width: 33.33%;
      color: #797979;
    }
    
    .on {
      color: #ca0c16;
      border-bottom: 5rpx solid #ca0c16;
    }
    
    .swiper-box {
      display: block;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    
    .img {
      width: 100%;
      height: 540rpx;
    }

js:

Page({
      data: {
        winWidth: 0,
        winHeight: 0,
        currentTab: 0,
        image: "../../images/404.png",
      },
      onLoad: function(options) {
    
      },
      onReady: function() {
        var that = this;
        wx.getSystemInfo({
          success: function(res) {
            that.setData({
              winWidth: res.windowWidth,
              winHeight: res.windowHeight
            });
          }
        });
      },
      // 滑动切换tab
      bindChange: function(e) {
        var that = this;
        that.setData({
          currentTab: e.detail.current
        });
      },
      // 点击tab切换
      swichNav: function(e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      },
      onShow: function() {
    
      },
      onHide: function() {
    
      },
      onUnload: function() {
    
      },
    })

json:

{
      "navigationBarTitleText": "消息"
    }

案例二:

效果图:

![案例二][strip 1]

代码:

wxml:

js:

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        winWidth: 0,
        winHeight: 0,
        currentTab: 0,
      },
      // 滑动切换tab
      bindChange: function(e) {
        var that = this;
        that.setData({
          currentTab: e.detail.current
        });
      },
      // 点击tab切换
      swichNav: function(e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
        var that = this;
        wx.getSystemInfo({
          success: function(res) {
            that.setData({
              winWidth: res.windowWidth,
              winHeight: res.windowHeight
            });
          }
        });
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      }
    })

wxss:

Page {
      background-color: #f1f1f1;
    }
    
    .swiper-tab {
      background-color: #fff;
      width: 100%;
      text-align: center;
      line-height: 80rpx;
    }
    
    .swiper-tab-list {
      font-size: 30rpx;
      display: inline-block;
      width: 50%;
      color: #797979;
    }
    
    .on {
      color: #5fdafe;
      border-bottom: 5rpx solid #30d1ff;
    }
    
    .swiper-box {
      display: block;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/e0a8ecec156541deb5314456b3ddbc93.png
[strip]: /images/20210724/abe24a8544674e988fe24dea91db8f47.png
[strip 1]: /images/20210724/2b4605e19480477aa9d91aa3fe7cab8c.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1