1,新建一个wxml
<template name="bottommenu">
<view class="bottomposition">
<navigator class="item_info" url="../home/home">
<image src="../img/sy.png"></image>
<text>首页</text>
</navigator>
<navigator class="item_info" url="/pages/home/home">
<image src="../img/xx.png"></image>
<text>消息</text>
</navigator>
<navigator class="item_info" url="/pages/home/home">
<image src="../img/lz.png"></image>
<text>履职</text>
</navigator>
<navigator class="item_info" url="/pages/home/home">
<image src="../img/wo.png"></image>
<text>我</text>
</navigator>
</view>
</template>
2,新建wxss
.bottomposition{
width: 100%;
height: 10%;
position: fixed;
overflow: hidden;
left: 0;
top: 90%;
z-index: 1100;
display: flex;
border-top: 1rpx solid #dadada;
}
.item_info {
width: 25%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.item_info image {
width: 20px;
height: 20px;
}
.item_info text {
margin-top: 5px;
font-size: 12px;
}
3,页面引用
<import src="../common/bottommenu/botmenu.wxml"/>
<view class="info">
<template is="bottommenu"></template>
</view>
4,页面样式引用
@import "../common/bottommenu/botmenu.wxss";
5,页面效果