小程序自定义导航栏

Myth丶恋晨 2021-09-19 04:20 514阅读 0赞

![20190430101936723.png][]

/* 自定义导航栏 */
    .tab-bt_bo{
      width: 100%;
      background: #fff;
      /* height: 100rpx; */
      display: flex;
      flex-direction: row;
      position: fixed;
      bottom: 0rpx;
      /* padding-top:1rpx ; */
      font-size: 24rpx
      }
    .tab-img{
      width:40rpx;
      height: 40rpx;
      /* background: #ccc */
        position: relative;
      bottom: -10rpx
    
    }
    .tab-nr_bo{
      position: relative;
      flex: 1;
      width: 100%;
      text-align: center
    }
    .tab-swiper{
      width: 100%;
      height: 100vh;
    }
    
    .dia-non{
      display: none;
      padding-bottom: 60rpx
    }

data：{
    tabid：0；
    // 自定义导航栏
        tab_list: [{
          bg_color: '#ccc',
          list: [{
            text: '首页',
            img: '/img/home1.png',
            img1: '/img/home2.png',
          }, {
            text: '发现',
            img: '/img/find1.png',
            img1: '/img/find2.png',
          }, {
            text: '我的',
            img: '/img/my1.png',
            img1: '/img/my2.png',
          }, ]
    }
    tabon_top: function(e) {
        this.setData({
          tabid: e.currentTarget.dataset.tabid
        })
      },

[20190430101936723.png]: /images/20210724/7df443b2443e45aab05e02c40bb2d941.png