微信小程序实现底部导航
之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的tabBar的样式,而当时我在网上有一个地方找到了这个模板,现在介绍给大家参考。
在成都网站设计、做网站过程中,需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析,以确定网站的风格、色彩、版式、交互等方面的设计方向。创新互联还需要根据客户的需求进行功能模块的开发和设计,包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。
WXML代码:
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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章名称:微信小程序实现底部导航
文章地址:http://hbruida.cn/article/godiii.html