小程序自定义tabbar,子页面也显示tabbar

我找了很多很多的文件，大都是显示一级页面的tabbar的，子页面显示tabbar几乎没有，我自己整理了一下。如果有不对的地方，希望评论指出，我会进一步完善。

开始

第一步：要想自定义tabbar，app.json文件中的tabbar对象中加一句 “custom”: true

"tabBar": {"custom": true,  **//这一行必填**"color": "#666","selectedColor": "#57BEAD","list": [{"pagePath": "pages/home/home","text": "主页"},{"pagePath": "pages/test/test","text": "测试"}]}

第二步：和pages文件夹同级目录创建一个custom-tab-bar组件，里头写的是tabbar内容
tabbar.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

Component({// 组件的属性列表properties: {// 接受父组件的给的数据active: {type: "String",value: ""}},data: { selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list: [{"pagePath": "/pages/home/home","text": "主页"},{"pagePath": "/pages/test/test","text": "测试"}]},attached() {},methods: {switchTab(e) {if (this.data.selected === e.currentTarget.dataset.index) {return false;} else {const url=e.currentTarget.dataset.pathwx.switchTab({url})}},run() {console.log(this.data.active);      this.setData({// 通过this.data获取父组件里传过来的值selected: this.data.active});console.log(this.data.selected);}}
})

第三步：一级导航页面

home.js

/*** 生命周期函数--监听页面显示*/onShow: function () {if (typeof this.getTabBar === 'function' &&this.getTabBar()) {this.getTabBar().setData({selected: 1  //是你想显示标亮的导航按钮的下标})}},

第四步：在你要用到的子页面中引入这个组件

子页面.wxml

<tabBar id="tabbar" active="1"></tabBar>/*active是你想显示标亮的导航按钮的下标*/

子页面.js

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var tabbar = this.selectComponent("#tabbar")// 父组件里面执行子组件的方法tabbar.run();},

子页面.json

{"usingComponents": {"tabBar": "/custom-tab-bar/index"},"navigationBarTitleText": "子页面"
}

结束

到这边就结束了，接着你哪个页面需要用到这个tabbar，就可以引入，然后传标亮的导航下标就可以了。

小程序自定义tabbar,子页面也显示tabbar相关推荐

微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
小程序丨从子页面退回父页面时的数据传递
在微信小程序中,从父级页面转到下一个页面,一般可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数,可以参考之前写的http:// ...
小程序navigateBack，子页面传值给父页面
子页面 let page = getCurrentPages();let prevPage = page[page.length - 2];prevPage.setData({lxr :item.po ...
微信小程序自定义日历（带价格显示）
JS代码: var Moment = require("../../utils/moment.js"); var DATE_YEAR = new Date().getFullYea ...
小程序自定义日期组件，不显示今日之后的日期
官方picker可以设置有效时间,有效时间外的禁止选择,但是无法隐藏,于是决定通过picker-view和picker-view-column来手写一个,效果如图: 需要注意的一些地方: 2月份,需要 ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
微信小程序自定义菜单tabbar后初次进入小程序会出现两个tabbar
微信小程序自定义tabbar后,初次进去小程序会出现aap.json中配置的tabbar同时也会出现自定义的tabbar,当关闭小程序在此进入就好了只显示自定义tabbar 解决办法就是在小程序初次进 ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...

小程序自定义tabbar,子页面也显示tabbar

小程序自定义tabbar,子页面也显示tabbar

开始

结束

小程序自定义tabbar,子页面也显示tabbar相关推荐

最新文章

热门文章