之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 微信小程序tabbar底部导航
- 微信小程序tabBar底部导航中文注解api详解
- 详解微信小程序设置底部导航栏目方法
- 微信小程序实战之仿android fragment可滑动底部导航栏(4)
- 微信小程序 底部导航栏目开发资料
- 微信小程序 (三)tabBar底部导航详细介绍
- 微信小程序 跳转页面的两种方法详解
- 微信小程序 页面跳转传参详解
- 微信小程序 页面跳转和数据传递实例详解
- 微信小程序自定义底部导航带跳转功能