微客导航 » 文章资讯 » 详解小程序如何动态绑定点击的执行方法

详解小程序如何动态绑定点击的执行方法

2023-08-07 09:42:06 212

需求

一个商城的个人中心页里，有很多用户操作按钮：我的订单，我的提现，我的送货等等，每个图标在点击的时候，可能是跳转页面的，也可能是执行当页方法的。

目前需要写一个通用的方法来实现这个功能，菜单的数据结构是一样的。

解决

菜单数据结构

title:菜单名
iconUrl:图标url
type:page-跳转页面或者method-执行方法
url:点击时跳转的链接或执行方法
badge:图标上显示的未读信息数

//营销工具菜单组
menuListSell:[
{id:0,title:'开团海报',type:'page',url:'/pages/userCenter/poster/poster',iconUrl:'/assets/mine/poster.png',badge:0},
{id:1,title:'优惠券包',type:'method',url:'showDeveloping',iconUrl:'/assets/mine/coupon.png',badge:4},
{id:2,title:'优惠活动',type:'method',url:'showDiscountActivity',iconUrl:'/assets/mine/gift.png',badge:0},
],

页面结构是这样的





0}}"class="badge">{{item.badge}}

{{item.title}}

每个图标菜单在点击的时候，都会执行switchMenu这个方法，获取标签上的url、type，再通过type值判断跳转页面还是执行方法，如果type==='page'就跳转链接为url的页面，如果type!=='page'就执行当页名为url的方法。当然，这个方法需要事先在当前页面中已经写好。

重要主要是如何执行名为url的方法：因为要执行的url方法是this的一个对象，所以可以直接使用this['对象字符串']()来执行这个方法，this['对象字符串']定位到了这个方法的引用，再加上()就可以执行这个方法，如下：

//菜单点击
switchMenu(e){
//获取标签上的数据
letpageUrl=e.currentTarget.dataset.url;
lettype=e.currentTarget.dataset.type;
if(type==='page'){//跳转页面时
wx.navigateTo({
url:pageUrl
})
}else{//调用方法时
this[pageUrl]()
}
},

结果

这位，就可以实现页面跳转和方法执行了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

详解小程序如何动态绑定点击的执行方法

热门推荐

随机推荐