微信小程序的事件处理
构建页面
在index.wxml
<!--index.wxml--> <view class="index"> <view id="view1" class="view-item" bindtap="clickMe" data-name="按钮1" data-age="35"> view1</view> <view id="view2" class="view-item" bindtap="clickMe" data-name="按钮2" data-age="44"> view2</view> <view class="view-item">{{clickmsg}}</view> </view>
index.wxss
.view-item { text-align: center; padding: 10px; background-color: burlywood; border-radius: 5px; margin: 20px; }
index.js
clickMe:function(e) { // 通过dataset来将wxml中的数据给传递过来 console.log(e.currentTarget.dataset) count++ this.data.clickmsg = '点击了' + e.currentTarget.id + '当前已经点击了' + count + '次' // 必须要这样写才能更新数据 this.setData(this.data) }
注意: 我们可以通过dataset来将wxml中的数据给传递过来,其中的age和name都是在wxml中设置的,命名规范必须是data-xxx,如果我们要取具体的某个值(例如name),可以使用
console.log(e.currentTarget.dataset.name):
页面跳转共有两种方式
clickMe(e) { wx.redirectTo({ url: '../home/home' }) } clickMe(e) { wx.navigateTo({ url: '../home/home' }) }
两者的区别:
-
wx.navigateTo
的执行: 假使我们从A页面跳转到home页面,再从home页面跳转到user,再从user页面返回,日志打印如下:
home会依次执行onload---onshow---onready,当页面从home跳转到user时,会先调用home的onhide,然后加载user,执行onload---onshow---onready.当从user返回时,user页面会销毁,执行user的onUnload,然后home的页面出现,执行home的onshow
-
wx.redirectTo
:
与wx.navigateTo的区别在于,当从home跳转到user时,会执行home的onUnload的方法,实际是home在跳转时被销毁了,"替换"成了user的页面,当从user返回时,不再返回的是home页面,而是原来home的上一级页面.
tabbar之间的切换来实现跳转
tabbar的切换与iOS的tabbar十分相似.假使home和user两个page分别为tabbar的两个模块,且默认选中home,当小程序启动后,我们从点击user,再点击home,可以看到如下日志:
小程序启动后,会执行home的onLoad----onshow---onready函数,当我们点击tabbar切换到user时,会先执行home的onhide,然后再执行user的onLoad----onshow---onready函数;当我们再次点击tabbar切换home时,会执行user的onhide,再执行home的onshow.说明:此时页面中home和user同时存在,点击哪个显示哪个执行onshow(当然是指不是第一次加载的情况),原先显示的将执行onhide来隐藏自己.
在.wxml中实现页面的跳转
<navigator url="../user/user?name=dll" > <button type="primary">导航组件跳转到User</button> </navigator>
如果是想通过redirect方式跳转,只需要在navigate组件后声明即可:
<navigator url="../user/user?name=dll" redirect > <button type="primary">导航组件跳转到User</button> </navigator>
作者:元宝是只小肥猫
链接:https://www.jianshu.com/p/4e9f4a15a38d
- 点赞
- 收藏
- 分享
- 文章举报
- 微信小程序-传递多个参数与事件处理
- 微信小程序 自定义下拉加载 对于ios弹性事件的处理
- 微信小程序开发之checkbox以及js数据配置和事件处理
- 微信小程序事件处理
- 微信小程序实例:image组件的binderror事件处理
- EA&UML日拱一卒-0基础学习微信小程序(8)-事件处理和数据绑定
- 微信小程序实现传递多个参数与事件处理
- 微信小程序-参数传递与事件处理
- 微信小程序(事件处理)
- 微信小程序 动态绑定数据及动态事件处理
- 微信小程序目录结构、事件处理、网络请求
- DOM高级程序设计笔记/事件处理程序Function.prototype添加getCallBack事件冒泡捕获
- ASP.NET程序中常用的事件处理
- DOM事件处理程序
- 轻松创建nodejs服务器(5):事件处理程序
- 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
- 微信小程序如何阻止事件冒泡
- JavaScript 事件流、事件处理程序及事件对象总结
- 微信小程序 触控事件
- 微信小程序自动化测试-----clickElementByXpath,isElementExist和异常处理