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

悠悠 2022-05-09 15:52 339阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14258.html][http_www.demodashi.com_demo_14258.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  实现用户自定义底部导航

##### 2、案例目录结构 #####

![byU2E32RzB1lLdkke4k.png][]

#### 二、程序实现具体步骤 ####

##### 1.自定义nav.wxml代码 #####

##### 2.使用index.wxml代码 #####

##### 3.index.js逻辑代码 #####

a.初始化数据

/**
       * 页面的初始数据
       */
      data: {
        navData: [
          {
            name: "广场",  //文本
            current: 1,    //是否是当前页，0不是  1是
            style: 0,     //样式
            ico: 'icon-qiugouguanli',  //不同图标
            fn: 'gotoIndex'   //对应处理函数
          }, {
            name: "旧物",
            current: 0,
            style: 0,
            ico: 'icon-mingpianjia',
            fn: 'gotoOldGoods'
          }, {
            name: "发布",
            current: 0,
            style: 1,
            ico: '',
            fn: 'gotoPublish'
          }, {
            name: "招领",
            current: 0,
            style: 0,
            ico: 'icon-yikeappshouyetubiao35',
            fn: 'gotoRecruit'
          }, {
            name: "我的",
            current: 0,
            style: 0,
            ico: 'icon-wode',
            fn: 'gotoMine'
          },
        ],
      },

b.页面之间的跳转

gotoOldGoods: function(){
        wx.redirectTo({
          url: '/pages/oldgoods/oldgoods',
        });
      },
      gotoPublish:function(){
        wx.redirectTo({
          url: '/pages/publish/publish',
        });
      },
      gotoRecruit:function(){
        wx.redirectTo({
          url: '/pages/recruit/recruit',
        });
      },
      gotoMine:function(){
        wx.redirectTo({
          url: '/pages/mine/mine',
        });
      },

#### 三、案例运行效果图 ####

![93qIU4pAONZ9ueTG8qC.gif][]

#### 四、总结与备注 ####

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

> 代码地址如下：  
> [http://www.demodashi.com/demo/14258.html][http_www.demodashi.com_demo_14258.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14258.html]: http://www.demodashi.com/demo/14258.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[byU2E32RzB1lLdkke4k.png]: /images/20220506/1c5ff926d8af4a69adc62b60c4c0b2d8.png
[93qIU4pAONZ9ueTG8qC.gif]: /images/20220506/b59357dec29141159c02efcfafc4434d.png