微信小程序-自定義底部導航

代碼地址如下：
http://www.demodashi.com/demo/14258.html

一、前期准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 實現用戶自定義底部導航

2、案例目錄結構

二、程序實現具體步驟

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',
    });
  },

三、案例運行效果圖

四、總結與備注

暫無微信小程序-自定義底部導航

代碼地址如下：
http://www.demodashi.com/demo/14258.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權