小程序怎么自定义tabbar组件并实现底部tab切换

小编给大家分享一下小程序怎么自定义tabbar组件并实现底部tab切换，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联专业为企业提供石河子网站建设、石河子做网站、石河子网站设计、石河子网站制作等企业网站建设、网页设计与制作、石河子企业网站模板建站服务，十余年石河子做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

1.编写自定义组件jtab-bar

wxml文件

  
    
    {{item.text}}
  

js文件

Component({
  data: {
    selected: 0,
    color: "#999999",
    selectedColor: "#032F82",
    list: [
      {
      type: 'text',
      text: "首页"
    }, 
    {
      type: 'image',
      icon: '../../image/icon_map.png',
      iconSelect: '../../image/icon_map_select.png',
      text: ''
    }, 
    {
      type: 'text',
      text: "我的"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      this.setData({selected: data.index})
      this.triggerEvent("setTab", data.index)
    }
  }
})

wxss文件

.jtab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1);
}


.jtab-bar-item {
  text-align: center;
  flex: 1;
  height: 100rpx;
}

.jtab-bar-item .jtab-text {
  height: 100rpx;
  line-height: 100rpx;
}


.jcover-img-bigicon {
  position: fixed;
  bottom: 0rpx;
  width: 210rpx;
  height: 128rpx;
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0 auto;
  right: 0;
  left: 0;
}

2.页面中使用

wxml文件

  
        
          
            {{item}}
          
        
      
  

这里使用catchtouchmove="swipperStop" swipperStop是个空函数来处理，禁止手动滑动

wxss文件

.jswipper-block {
  height: calc(100vh - 170rpx);
  background: #F7F8F9;
}

js文件

/**
   * 页面的初始数据
   */
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    currentTab: 0
  },

  setTabbar({detail}) {
    this.setData({currentTab: detail})
  },

  // 轮播图 禁止手动滑动 catchtouchmove="swipperStop"
  swipperStop(){
  },

以上是“小程序怎么自定义tabbar组件并实现底部tab切换”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享标题：小程序怎么自定义tabbar组件并实现底部tab切换
路径分享：http://cdxtjz.cn/article/piodgs.html