DDR爱好者之家

微信小程序实现底部导航
站长资源 2024/11/25 佚名
1 1538
DDR爱好者之家 Design By 杰米

之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的tabBar的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。

微信小程序实现底部导航

WXML代码：

<import src="/UploadFiles/2021-04-02/nav">


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;
}








以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米