微信小程序自定义底部tarbar的代码实现

本篇文章给大家带来的内容是关于微信小程序自定义底部tarbar的代码实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

先看一看目录
@import "/template/template.wxss";

在index文件夹

index.wxml

<import src="../../template/template.wxml"/><template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

index.js

const app = getApp()var template = require('../../template/template.js');Page({  data: {  },  onLoad: function () {    template.tabbar("tabBar", 0, this)//0表示第一个tabbar  },})

news.wxml与index.wxml一样
news.js如下

const app = getApp()var template = require('../../template/template.js');Page({  data: {  },  onLoad: function () {    template.tabbar("tabBar", 1, this)//1表示第二个tabbar  },})

效果如图

相关推荐：

微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）

微信小程序实例：获取当前城市位置及再次授权地理位置的代码实现