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

立即下载用AI写一个

发布时间：2018-10-15

260人 | 浏览：19497次 | 收藏 |

技术：微信小程序

概述

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

详细

#### 一、前期准备工作
软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
##### 1、基本需求。
- 实现用户自定义底部导航

##### 2、案例目录结构
![](/contentImages/image/20181015/byU2E32RzB1lLdkke4k.png)

#### 二、程序实现具体步骤
##### 1.自定义nav.wxml代码
```
<template name="nav">
      <view class="nav_link" bindtap="{{fn}}">
        <button class="defalut_btn {{current== 0 ? '' : 'on_cor'}}">
          <block wx:if="{{style == 0}}">
                <icon class="iconfont {{ico}} del_ico idx_ico"></icon>
                <text class="txt">{{name}}</text>
          </block>
          <block wx:if="{{style == 1}}">
                <view class="plus_wp">
                  <image src='../../images/plus_ico.png' class="plus_ico" />
                </view>
                <text class="txt txt_fb">{{name}}</text>
          </block>
        </button> 
      </view>
</template>
```
##### 2.使用index.wxml代码
```
<import src="../../template/nav" />
<view class="flex fix_nav_wp">
<block wx:for="{{navData}}" wx:key="">
    <template is="nav" data="{{...item}}"/>
</block>
</view> 
<view>首页</view>
```
##### 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',
    });
  },
```
#### 三、案例运行效果图
![](/contentImages/image/20181015/93qIU4pAONZ9ueTG8qC.gif)

#### 四、总结与备注

暂无

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子