微信小程序使用tabbar

最新推荐文章于 2024-05-23 10:10:17 发布

sghu8023

最新推荐文章于 2024-05-23 10:10:17 发布

阅读量865

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/sghu8023/article/details/124123090

版权

微信小程序的原生tabbar样式很多地方无法修改，导致无法满足实际需求,此时自定义tabbar成为了最好的选择官方文档

1.根目录下创建custom-tab-bar（自定义文件夹）
在这里插入图片描述
2.编写自定义导航代码
①：index.js

const {myhicky}=require('../utils/api')
Component({
  data: {
    selected: null,
    color: "#7A7E83",	//未选中文字颜色
    selectedColor: "#1296db",	//选中文字颜色
    time:'',
   list: [						//底部list
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/state/image/tab1.png",
        selectedIconPath: "/state/image/tabbar1.png"
      },
      {
        pagePath: "/pages/outlet/outlet",
        text: "查询",
        iconPath: "/state/image/tab2.png",
        selectedIconPath: "/state/image/tabbar2.png"
      },
      {
        pagePath: "/pages/indentList/indentList",
        text: "订单",
        iconPath: "/state/image/tab3.png",
        selectedIconPath: "/state/image/tabbar3.png"
      },
      {
        pagePath: "/pages/personal/personal",
        text: "我的",
        iconPath: "/state/image/tab4.png",
        selectedIconPath: "/state/image/tabbar4.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {	//点击跳转时间
      if(this.data.time!=''){	//利用异步判断点击事件只执行一次
        clearTimeout(this.data.time)
        this.setData({
          time:''
        })
      }
      var time=setTimeout(()=>{
        
        const data = e.currentTarget.dataset
        const url = data.path
        wx.switchTab({url})
        console.log('執行')
      },300)
      this.setData({
        time,
      })
    }
 
  }
})

app.json对应tabbar

②：index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

③：tabbar页面的js

const app = getApp()
const {myhicky}=require('../../utils/api')
// const login = require('../../utils/login');
Component({
  data: {
    current: 'tab1',	//顺序
    value:'',
    background: [],
  },
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0	//tabbar顺序
        })
      }
    },
  },
  methods: {
    onLoad() {
      if (wx.getUserProfile) {
        this.setData({
          canIUseGetUserProfile: true
        })
      }
      this.getlist()
      this.slideshow()
    },
    touch(){
      wx.navigateTo({
        url: '../Provinces/Provinces',
      })
    },
    ship(){
      
    },
  }
})