微信小程序开发——交互响应事件

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 + "次",
    });
  }
}