快捷導(dǎo)航

詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法

更新時(shí)間：2019年11月26日 11:24:03 作者：KyleBing

這篇文章主要介紹了詳解小程序如何動(dòng)態(tài)綁定點(diǎn)擊的執(zhí)行方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求

一個(gè)商城的個(gè)人中心頁(yè)里，有很多用戶操作按鈕：我的訂單，我的提現(xiàn)，我的送貨等等，每個(gè)圖標(biāo)在點(diǎn)擊的時(shí)候，可能是跳轉(zhuǎn)頁(yè)面的，也可能是執(zhí)行當(dāng)頁(yè)方法的。

目前需要寫一個(gè)通用的方法來(lái)實(shí)現(xiàn)這個(gè)功能，菜單的數(shù)據(jù)結(jié)構(gòu)是一樣的。

解決

菜單數(shù)據(jù)結(jié)構(gòu)

title: 菜單名
iconUrl: 圖標(biāo)url
type: page - 跳轉(zhuǎn)頁(yè)面或者 method - 執(zhí)行方法
url: 點(diǎn)擊時(shí)跳轉(zhuǎn)的鏈接或執(zhí)行方法
badge: 圖標(biāo)上顯示的未讀信息數(shù)

// 營(yíng)銷工具菜單組
menuListSell: [
 {id: 0, title: '開團(tuán)海報(bào)', type: 'page', url: '/pages/userCenter/poster/poster' ,iconUrl: '/assets/mine/poster.png', badge: 0},
 {id: 1, title: '優(yōu)惠券包', type: 'method', url: 'showDeveloping' ,iconUrl: '/assets/mine/coupon.png', badge: 4},
 {id: 2, title: '優(yōu)惠活動(dòng)', type: 'method', url: 'showDiscountActivity' ,iconUrl: '/assets/mine/gift.png', badge: 0},
],

頁(yè)面結(jié)構(gòu)是這樣的

<view class="section-icons">
  <view wx:for="{{menuListNormal}}"
     wx:key="{{item.id}}"
     data-index="{{item.id}}"
     data-type="{{item.type}}"
     data-url="{{item.url}}"
     class="section-icons-item"
     bindtap="switchMenu" >
    <view class="icon">
      <image src="{{item.iconUrl}}" mode="aspectFit"></image>
      <view wx:if="{{item.badge > 0}}" class="badge">{{item.badge}}</view>
    </view>
    <text>{{item.title}}</text>
  </view>
</view>

每個(gè)圖標(biāo)菜單在點(diǎn)擊的時(shí)候，都會(huì)執(zhí)行 switchMenu 這個(gè)方法，獲取標(biāo)簽上的 url、type，再通過 type 值判斷跳轉(zhuǎn)頁(yè)面還是執(zhí)行方法，如果 type === 'page' 就跳轉(zhuǎn)鏈接為 url 的頁(yè)面，如果 type !== 'page' 就執(zhí)行當(dāng)頁(yè)名為 url 的方法。當(dāng)然，這個(gè)方法需要事先在當(dāng)前頁(yè)面中已經(jīng)寫好。

重要主要是如何執(zhí)行名為 url 的方法：因?yàn)橐獔?zhí)行的 url 方法是 this 的一個(gè)對(duì)象，所以可以直接使用 this['對(duì)象字符串']() 來(lái)執(zhí)行這個(gè)方法， this['對(duì)象字符串'] 定位到了這個(gè)方法的引用，再加上 () 就可以執(zhí)行這個(gè)方法，如下：

 // 菜單點(diǎn)擊
 switchMenu(e){
  // 獲取標(biāo)簽上的數(shù)據(jù)
  let pageUrl = e.currentTarget.dataset.url;
  let type = e.currentTarget.dataset.type;
  if (type === 'page'){ // 跳轉(zhuǎn)頁(yè)面時(shí)
   wx.navigateTo({
    url: pageUrl
   })
  } else { // 調(diào)用方法時(shí)
   this[pageUrl]()
  }
 },

結(jié)果

這位，就可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和方法執(zhí)行了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: