微信小程序-自定义底部导航

最新推荐文章于 2024-10-11 15:57:59 发布

w10322331

最新推荐文章于 2024-10-11 15:57:59 发布

阅读量1.2w

点赞数 2

分类专栏：微信小程序文章标签：微信小程序自定义导航自定义导航样式小程序自定义导航

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个用于微信小程序的底部导航栏实现方案。通过WXML、WXSS和JS代码的配合，实现了包含五个导航项的底部菜单，每个导航项都有对应的处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的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;
}

文章来源： http://bbs.haoyangtian.com/forum.php?mod=viewthread&tid=5346