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


Posted in Javascript onNovember 26, 2019

需求

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

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

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

解决

菜单数据结构

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},
],

页面结构是这样的

<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>

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

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

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

结果

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
vue element-ui读取pdf文件的方法
Nov 26 #Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 #Javascript
jQuery实现轮播图效果
Nov 26 #jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 #Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 #Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 #Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
php对象在内存中的存在形式分析
2015/02/03 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
js 动态文字滚动的例子
2011/01/17 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python分析学校四六级过关情况
2017/11/22 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python rstrip()方法实例详解
2018/11/11 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python TCP包注入方式
2020/05/05 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
高中生期末评语大全
2014/01/28 职场文书
保密工作目标责任书
2014/07/28 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
文员岗位职责
2015/02/04 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
Python中字符串对象语法分享
2022/02/24 Python