需求

創(chuàng)新互聯(lián)公司主打移動網(wǎng)站、做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、申請域名、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

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

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

解決

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

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

// 營銷工具菜單組
menuListSell: [
 {id: 0, title: '開團(tuán)海報', 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)惠活動', type: 'method', url: 'showDiscountActivity' ,iconUrl: '/assets/mine/gift.png', badge: 0},
],

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

  
    
      
      {{item.badge}}
    
    {{item.title}}
  

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

重要主要是如何執(zhí)行名為 url 的方法：因為要執(zhí)行的 url 方法是 this 的一個對象，所以可以直接使用 this['對象字符串']() 來執(zhí)行這個方法， this['對象字符串'] 定位到了這個方法的引用，再加上 () 就可以執(zhí)行這個方法，如下：

 // 菜單點(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)頁面時
   wx.navigateTo({
    url: pageUrl
   })
  } else { // 調(diào)用方法時
   this[pageUrl]()
  }
 },

結(jié)果

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。