互联网创意网站有哪些方面,wordpress题,南宁高端网站,html语言做网站微信小程序没有发现可以实现非tabbar页面显示tabbar的方法#xff0c;但是可以在tabbar页面当中隐藏tabbar#xff0c;使用wx.hideTabBar()方法就可以实现#xff0c;在非tabbar页面调用wx.showTabBar()方法却会显示失败#xff0c;不能显示tabbar onLoad() {wx.showTabBar…微信小程序没有发现可以实现非tabbar页面显示tabbar的方法但是可以在tabbar页面当中隐藏tabbar使用wx.hideTabBar()方法就可以实现在非tabbar页面调用wx.showTabBar()方法却会显示失败不能显示tabbar onLoad() {wx.showTabBar({success() {console.log(success)},fail(err) {console.log(err, fail)}})},
报错如下显示该页面非tabbar页面 可以选择自定义组件组件实现代码实现如下
在项目根目录下面创建一个组件文件/component/tabbar/index.vue
templateviewview classtabbaru-tabbar :valuevalue1 changetabbarChange :fixedfalse :placeholderfalse:safeAreaInsetBottomfalseu-tabbar-item text求职者 iconhome/u-tabbar-itemu-tabbar-item text聊天 iconphoto/u-tabbar-itemu-tabbar-item text通讯录 iconplay-right/u-tabbar-itemu-tabbar-item text我的 iconaccount/u-tabbar-item/u-tabbar/view/view
/templatescriptexport default {data() {return {value1: 0,url: /pages/A/index};},onLoad() {this.tabbarChange()},methods: {tabbarChange(index) {console.log(click, index);this.value1 indextabbarIndex 0 ? this.url /pages/A/index : tabbarIndex 1 ? this.url /pages/B/index : tabbarIndex 2 ? this.url /pages/C/index : tabbarIndex 3 ? this.url /pages/D/index : wx.navigateTo({url: this.url,})}}}
/scriptstyle langless.tabbar {width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);}
/style
创建好了之后需要微信小程序里面的page.json文件引入
{usingComponents: {tabbar: ../../components/tabbar/index},
}
然后在需要tabbar页面当中进行注册并使用这样就可以实现在任何需要tabbar的页面当中展示tabbar了
templateviewtabbar/tabbar/view
/templatescriptimport tabbar from ../../../component/tabbar/index.vueexport default {components: {tabbar},data() {return {}},}
/script
不过在这个实现过程中使用了uview组件库目前来看这个组件库还是能够满足小程序开发中的需求的有常见的一些功能很方便使用
介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 安装和配置在官网中都有相关使用步骤可以查看
