詳解小程序如何動態(tài)綁定點擊的執(zhí)行方法
需求
一個商城的個人中心頁里，有很多用戶操作按鈕：我的訂單，我的提現(xiàn)，我的送貨等等，每個圖標在點擊的時候，可能是跳轉(zhuǎn)頁面的，也可能是執(zhí)行當頁方法的。
目前需要寫一個通用的方法來實現(xiàn)這個功能，菜單的數(shù)據(jù)結(jié)構是一樣的。
解決
菜單數(shù)據(jù)結(jié)構
title: 菜單名
iconUrl: 圖標url
type: page - 跳轉(zhuǎn)頁面 或者 method - 執(zhí)行方法
url: 點擊時跳轉(zhuǎn)的鏈接或執(zhí)行方法
badge: 圖標上顯示的未讀信息數(shù)
// 營銷工具菜單組
menuListSell: [
{id: 0, title: '開團海報', 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é)構是這樣的
<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>
每個圖標菜單在點擊的時候，都會執(zhí)行 switchMenu 這個方法，獲取標簽上的 url、type， 再通過 type 值判斷跳轉(zhuǎn)頁面還是執(zhí)行方法，如果 type === 'page' 就跳轉(zhuǎn)鏈接為 url 的頁面，如果 type !== 'page' 就執(zhí)行當頁名為 url 的方法。當然，這個方法需要事先在當前頁面中已經(jīng)寫好。
重要 主要是如何執(zhí)行名為 url 的方法：因為要執(zhí)行的 url 方法是 this 的一個對象，所以可以直接使用 this['對象字符串']() 來執(zhí)行這個方法， this['對象字符串'] 定位到了這個方法的引用，再加上 () 就可以執(zhí)行這個方法，如下：
// 菜單點擊
switchMenu(e){
// 獲取標簽上的數(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了webpack4 入門最簡單的例子介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
微信小程序tab切換可滑動切換導航欄跟隨滾動實現(xiàn)代碼
這篇文章主要介紹了微信小程序tab切換可滑動切換導航欄跟隨滾動實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
本文主要介紹了動態(tài)加載css的方法實現(xiàn)和深入解析。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
為Javascript中的String對象添加去除左右空格的方法(示例代碼)
這篇文章主要介紹了為Javascript中的String對象添加去除左右空格的方法(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
枚舉是 TypeScript 中一個非常有趣且實用的特性，它可以讓我們更好地組織和管理代碼，下面就來和大家聊聊TypeScript中枚舉的具體使用吧2023-06-06
下面小編就為大家?guī)硪黄粋€簡單的JavaScript Map實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript實現(xiàn)數(shù)組去重的14種方法大全
親愛的小伙伴,對于數(shù)組javascript中的數(shù)組去重方法你知道多少種呢？學會如何對數(shù)組進行去重對于javascript的學習來說也是十分重要的,下邊就讓我來分享一下我所知道的集中數(shù)組去重的方法吧,感興趣的小伙伴跟著小編一起來看看吧2025-03-03
變量是存儲信息的容器(JS的變量名是區(qū)分大小寫的),下面這篇文章主要給大家介紹了關于JS進階指南之變量和類型的相關資料,文章通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
hasFocus是document的特有方法．用來判斷當前網(wǎng)頁是否獲得焦點．2010-06-06
小程序相信大家應該都很熟悉了,對于小程序的整個運營的方法,很多運營都比較關注,今天希望通過一個思維導圖,這篇文章主要給大家介紹了關于小程序中如何繪制思維導圖的相關資料,需要的朋友可以參考下2021-10-10