新建一个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,页面效果