可能是菜鸟太菜,所以,感觉看微信小程序文档里面的自定义tabbar,真的感觉好难,而且丝毫看不懂,所以菜鸟一不做二不休,直接自己写一个得了,有网页基础的写这个完全不难。
话不多说,上代码:
HTML
<!--miniprogram/pages/company/companyuser.wxml-->
<view>
<view wx:if='{{index==="0"}}'>
<order></order>
</view>
<view wx:if='{{index==="1"}}'>
<menu></menu>
</view>
<view wx:if='{{index==="2"}}'>
<room></room>
</view>
<view wx:if='{{index==="3"}}'>
<set></set>
</view>
<view class="bottomView">
<view data-index="0" bindtap="checked">
<image src='{{index==="0"?"../../images/order_check.png":"../../images/order.png"}}'></image>
<text class='{{index==="0"?"colorText":""}}'>订单</text>
</view>
<view data-index="1" bindtap="checked">
<image src='{{index==="1"?"../../images/menu_check.png":"../../images/menu.png"}}'></image>
<text class='{{index==="1"?"colorText":""}}'>菜单</text>
<!-- 这里不知道为什么不能写成{{index==1?'':''}} -->
</view>
<view data-index="2" bindtap="checked">
<image src='{{index==="2"?"../../images/room_check.png":"../../images/room.png"}}'></image>
<text class='{{index==="2"?"colorText":""}}'>包间</text>
</view>
<view data-index="3" bindtap="checked">
<image src='{{index==="3"?"../../images/set_check.png":"../../images/set.png"}}'></image>
<text class='{{index==="3"?"colorText":""}}'>修改</text>
</view>
</view>
</view>
CSS
/* miniprogram/pages/company/companyuser.wxss */
.viewHide{
display: none;
}
page{
background-color: #bebfc0;
}
/* 写在component里面会警告 */
.bottomView{
padding-top: 6px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #b2b8bd;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.bottomView view image{
width: 80rpx;
height: 80rpx;
}
.bottomView view{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bottomView view text{
color: white;
}
.bottomView .colorText{
color: black;
}
/* 不能写成.colorText,因为优先级不够 */
JSON
{
"usingComponents": {
"room":"../companyuser/room/room",
"menu":"../companyuser/menu/menu",
"order":"../companyuser/order/order",
"set":"../companyuser/set/company"
},
"navigationBarTitleText": "企业管理"
}
JS
// miniprogram/pages/company/companyuser.js
Page({
data: {
index:"0"
},
checked:function(e){
this.setData({
index:e.currentTarget.dataset.index
})
// console.log(typeof(this.data.index))
},
// 获取点击的data-index,实现tabbar功能
onLoad:function(e){
// console.log("onload")
// console.log(typeof(e.index))
if(e.index){
this.setData({
index:e.index
})
}
},
// 当用户提交菜单或包间后回到对应页面
})
HTML
首先HTML里面写wx:if就是为了,当点击另一个tabbar页面的时候,卸载该页面,不然太多页面一起存在会严重影响页面性能(因为我有每个页面是会不定期进行setdata的),我就是一开始用的display:hidden,结果感觉页面直接卡疯。
JS
JS就是靠的点击事件,来切换index的值,从而达到切换样式。
而onload里面的获取index的值是为了,当我跳转其它页面时,跳转回来依旧得对应该页面。
json
json文件最好去看看我的另一篇博客微信小程序:你必须知道的component自定义组件
菜鸟的tabbar并不是最好的,但是肯定是最简洁的,因为菜鸟很菜,想出来的都是简单东西。
望大佬指点江山,激扬文字