微信小程序开发3——事件处理

事件处理

index.wxml

<!--index.wxml--> <view bindtap="viewTapHandle"><button bindtap="tapHandle">click me</button> </view>

index.js

//index.js //获取应用实例 const app = getApp()Page({// data// on xxx// 定义用于界面层的事件处理函数tapHandle(e){// e 指的是事件参数console.log(e)},viewTapHandle (e){console.log(1,e)} })

解决方案：通过 catchcap 绑定的事件不会有冒泡

<!--index.wxml--> <view bindtap="viewTapHandle"><!-- <button bindtap="tapHandle">click me</button> --><!-- 通过 catchcap 绑定的事件不会有冒泡 --><button catchtap="tapHandle">click me</button> </view>

bindtap属性 只能去指定函数的名字，并不能写一个表达式

params.wxml

<!--pages/params/params.wxml--> <!-- 可以通过 data-xx 属性，给 事件处理函数 传递额外的参数 --> <view><text>item 1 </text><button bindtap="removeHandle" data-id="1">remove</button> </view> <view><text>item 2 </text><button bindtap="removeHandle" data-id="2">remove</button> </view> <view><text>item 3 </text><button bindtap="removeHandle" data-id="3">remove</button> </view> <view><text>item 4 </text><button bindtap="removeHandle" data-id="4">remove</button> </view>

params.js

// pages/params/params.js Page({removeHandle(e){console.log(e)} })

---

单向数据流

index.wxss

/**index.wxss**/ input{border: 1px solid #ccc;margin: 20px; }

index.wxml

<!--index.wxml--> <text>{{foo}}</text> <input value="{{foo}}" bindinput="inputChangeHandle" />

index.js

//index.js //获取应用实例 const app = getApp()Page({data:{foo:'hello wechat app'},inputChangeHandle(e){// e.target 当前文本框console.log(e.detail.value)//将界面上的数据再次同步回 数据源上this.data.foo=e.detail.value//setData 1. 改变数据源// 2. 通知框架，数据源变了，需要重新渲染页面this.setData({foo:e.detail.value})} })

             

---

WXSS  vs  CSS

rpx  可以根据屏幕宽度进行自适应。规定屏幕宽度为750 rpx 。

导入样式 。 公用样式 是放在公共目录下的

app.wxss  是所有的页面都会用到的样式

@import "../../common.wxss"

 

总结

以上是生活随笔为你收集整理的微信小程序开发3——事件处理的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。