微信小程序-自定義底部導航
阿新 • • 發佈:2018-10-17
tool vda www 程序 redirect pub otool lin 初始
代碼地址如下:
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大師代發,拒絕轉載,轉載需要作者授權
微信小程序-自定義底部導航