微信小程序实现底部导航
程序员文章站
2023-11-07 19:18:16
之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的tabbar的样式,而当时我在网上有一个地方找到了这个模板,现在介绍给大...
之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的tabbar的样式,而当时我在网上有一个地方找到了这个模板,现在介绍给大家参考。
wxml代码:
<import src="../../template/nav" /> <view class="flex fix_nav_wp"> <block wx:for="{{navdata}}"> <template is="nav" data="{{...item}}"/> </block> </view>
js代码:
page({ data: { navdata: [ { name: "购物车", //文本 current: 1, //是否是当前页,0不是 1是 style: 0, //样式 ico: 'icon-qiugouguanli', //不同图标 fn: 'gotocompanyindex' //对应处理函数 }, { name: "我的名片", current: 0, style: 0, ico: 'icon-mingpianjia', fn: 'gotobusinesscard' }, { name: "发布中心", current: 0, style: 1, ico: '', fn: 'gotopublish' }, { name: "消息中心", current: 0, style: 0, ico: 'icon-yikeappshouyetubiao35', fn: 'gotomessages' }, { name: "个人中心", current: 0, style: 0, ico: 'icon-wode', fn: 'bindviewmy' }, ], }, })
wxss代码:
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序实现选项卡效果