小程序自定义tab-bar踩坑实战记录

 更新时间:2024年12月18日 09:18:15   作者:赖赖赖先生  
这篇文章主要给大家介绍了关于小程序自定义tab-bar踩坑实战的相关资料,包括下载代码、放置文件、修改JS文件、配置app.json和隐藏原生导航栏等步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下

从官方下载代码
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1、把custom-tab-bar 文件放置 pages同级

修改下 custom-tab-bar 下的 JS文件

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "/static/images/ico/home.png",
      selectedIconPath: "/static/images/ico/home.png",
      text: "A"
    }, {
      pagePath: "/pages/product/product",
      iconPath: "/static/images/ico/home.png",
      selectedIconPath: "/static/images/ico/home.png",
      text: "B"
    },
    {
        pagePath: "/pages/news/news",
        iconPath: "/static/images/ico/home.png",
        selectedIconPath: "/static/images/ico/home.png",
        text: "C"
      },
      {
        pagePath: "/pages/my/my",
        iconPath: "/static/images/ico/home.png",
        selectedIconPath: "/static/images/ico/home.png",
        text: "D"
      },
]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
    //   this.setData({  这部分注销,到其他页进行赋值
    //     selected: data.index
    //   })
    }
  }
})

2、跳转到指定页面时,在当页面JS上加上代码:

onShow: function () {  //上面注销得部分, 在A-D页面对应上,  A页面=0 ,B=1 以此类推
    if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0     //这里的数字设置当前页面在tabbar里对应的序列,从0开始
      })
    }
  }

3、在app.json 开启自定义tab

  "tabBar": {
    "custom": true,  //开启
    "color": "#767676",
    "selectedColor": "#004F8A",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [

4、在app.js 隐藏原生得JS

// app.js
App({
  onLaunch() {
      wx.hideTabBar(); //隐藏原生得tab bar 
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

总结 

到此这篇关于小程序自定义tab-bar踩坑实战的文章就介绍到这了,更多相关小程序自定义tab-bar内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈JS中小数相加不精确的原因

    浅谈JS中小数相加不精确的原因

    Javascript在处理数字问题时,我们有可能遇到小数相加不准确的问题,本文主要介绍了浅谈JS中小数相加不精确的原因,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2023-04-04
  • 微信小程序实现的贪吃蛇游戏【附源码下载】

    微信小程序实现的贪吃蛇游戏【附源码下载】

    这篇文章主要介绍了微信小程序实现的贪吃蛇游戏,结合实例形式分析了微信小程序实现贪吃蛇游戏功能的相关界面布局与代码逻辑操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2018-01-01
  • uniapp小程序项目获取位置经纬度信息

    uniapp小程序项目获取位置经纬度信息

    在实际项目中很多时候我们需要获取设备的位置信息,去展示给客户,或者以位置信息为参数,继续向服务器获取一些数据,这篇文章主要介绍了uni-app如何获取位置信息(经纬度),需要的朋友可以参考下
    2022-11-11
  • JS数字抽奖游戏实现方法

    JS数字抽奖游戏实现方法

    这篇文章主要介绍了JS数字抽奖游戏实现方法,可实现按下回车键出现随机数字切换的效果,涉及时间与随机数的相关操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 使用JavaScript渲染页面的方法详解

    使用JavaScript渲染页面的方法详解

    本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧
    2023-12-12
  • 最全的package.json解析

    最全的package.json解析

    从我们接触前端开始,每个项目的根目录下一般都会有一个package.json文件,这个文件定义了当前项目所需要的各种模块,以及项目的配置信息,本文就详细的来介绍一下
    2021-07-07
  • 基于JS实现漫画中大雨滂沱的效果

    基于JS实现漫画中大雨滂沱的效果

    这篇文章主要为大家详细介绍了如何利用JavaScript实现漫画中大雨滂沱的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • js 对小数加法精度处理示例说明

    js 对小数加法精度处理示例说明

    javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果,下面为大家介绍下js如何对小数加法精度处理
    2013-12-12
  • firefox TBODY 用js显示和隐藏时出现错位的解决方法

    firefox TBODY 用js显示和隐藏时出现错位的解决方法

    今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。
    2008-12-12
  • 正则表达式基本语法及表单验证操作详解【基于JS】

    正则表达式基本语法及表单验证操作详解【基于JS】

    这篇文章主要介绍了正则表达式基本语法及表单验证操作,较为详细的分析了正则表达式的基本语法以及基于JS实现的表单正则验证操作相关实现技巧,需要的朋友可以参考下
    2017-04-04

最新评论