微信小程式開發——互動響應事件
阿新 • • 發佈:2019-02-16
WeChat小程式交流(QQ群:769977169)
效果圖
xxx.wxml結構程式碼示例
<view class='view'>{{clickMsg}}</view>
<view class='view0' id="view0" bindtap='clickMe'>點選view0</view>
<view class='view1' id="view1" bindtap='clickMe'>點選view1</view>
xxx.wxss樣式程式碼示例
.view{ margin: 20rpx 20rpx auto; background-color: Thistle; height: 88rpx; } .view0{ margin: 20rpx auto; border-radius: 20rpx; background-color: LightPink; text-align: center; line-height: 88rpx; width: 60%; height: 88rpx; } .view1{ margin: 20rpx auto; border-radius: 20rpx; background-color: MediumSlateBlue; text-align: center; line-height: 88rpx; width: 60%; height: 88rpx; }
xxx.js業務邏輯程式碼示例
var count = 0;
Page({
/**
* 頁面的初始資料
*/
data: {
clickMsg: "顯示點選的內容"
},
clickMe: function (even) {
console.log(even);
var id = even.currentTarget.id;
count++;
this.setData({
clickMsg: "顯示點選內容" + id + "點選了" + count + "次",
});
}
}