H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】Wepy2.0自定义底部导航栏

新建tab.wpy

<!--components/tab.wpy-->
<!--html-->
<template>
<view class="tabBarBox">
<navigator class="itemView" url="{{tabBar[0].pagePath}}">
<view class="item_text {{tabBar[0].selected ? selected : noSelected}}">{{tabBar[0].text}}11</view>
</navigator>
<navigator class="itemView" url="{{tabBar[1].pagePath}}">
<view class="item_text {{tabBar[1].selected ? selected : noSelected}}">{{tabBar[1].text}}22</view>
</navigator>
</view>
</template>
<!--components/tab.wpy-->
<!--script-->
import wepy from "@wepy/core";
wepy.component({
props:{
tabBar:Object
},
})
components/tab.wpy css lang='scss'
.tabBarBox{
width: 100%;
height: 100rpx;
background-color: #fff;
position: fixed;
bottom: 0;
z-index: 9999;
border-top: 1px #afafaf solid;
.itemView{
width: 150rpx;
height: 100rpx;
text-align: center;
display: inline-block;
padding-top: 6rpx;
.item_text{
font-size: 28rpx;
}
}
}

Pages/index.wpy

<!--pages/index.wpy-->
<template>
<view id="HomePage">
<view>
<!--传入tab组件-->
<tabBarBottom :tabBar="tabBarData"></tabBarBottom>
</view>
</view>
</template>
pages/index.wpy JS:
import wepy from "@wepy/core";
wepy.page({
data:{
tabBarData: {},
},
onLoad() {
    //获取数据,更新数据  tabBarClickHandle()启动文件中编写的---- 0就是形参id的实参
this.tabBarData = this.$app.tabBarClickHandle(0, this);
}
})
<!--pages/index.wpy-->
引入tab组件,命名为tabBarBottom
<config>
{
usingComponents: {
tabBarBottom: '[email protected]/components/tab',
}
}
</config>

app.wpy

<!--app.wpy-->
wepy.app({
globalData: {
userInfo: null,
//定义导航栏信息
tabBar:{
list:[
{
pagePath:"/pages/menu/index",
text:"菜单",
selected:true
},
{
pagePath:"/pages/main/index",
text:"我的",
selected:false
}
]
}
},
methods:{
//导航方法
tabBarClickHandle(id, that) {
let tbList = this.$options.globalData.tabBar.list;
tbList.forEach((item, index) => {
if (id == index) {
tbList[id].selected = true;
} else {
tbList[index].selected = false;
}
});
return this.$options.globalData.tabBar.list;
}
}
})
<!--app.wpy-->
<!--配置url,页面在对应pages文件新增-->
<config>
{
pages: [
'pages/index',
'pages/menu/index',
'pages/main/index'
]
}
</config>

本文参考:https://www.bbsmax.com/A/amd0…

本文地址:H5W3 » 【JS】Wepy2.0自定义底部导航栏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址