【微信小程序】事件交互案例演示

主要用到index.wxml,index.js.index.wxss

<!--index.wxml代码演示:注意字母和符号都不能写错-->
<view class="container">
  <view>{{clickMsg}}</view><!--需要接收的内容-->
   <view id="view0" data-hi="data-view0" data-qf="data-qf0" class="view-item" bindtap="clickMe">点击view0 </view> <!--点击函数-->
   <view id="view1" data-hi="data-view1" data-qf="data-qf1" class="view-item" bindtap="clickMe"> 点击view1</view>
</view>

//index.js代码演示
var count=0;//记录被点击的变量
var param=
{
  data:{
    clickMsg:'显示点击的内容'
  },
  //e就是事件对象，包含了很多内容，比如:谁被点击了，什么时候被点击了，在什么X，Y位置被点击了
  clickMe:function(e)
  {
    count++;//点击view0一次就记录一次
    console.log(e); //e=event,console.log();//在调试的状态下，显示在出来
    //案例1：把VIEW0上点击的显示出来
   // param.data.clickMsg='显示点击的内容'+'view0,点击次数'+count;    


    //案例2：如何区分到底是点了VIEW0还是点击了VIEW1
    //通过在index.wxml写的id就可以区分到底是点了view0,还是点了view1
    var id=e.currentTarget.id;
   
    param.data.clickMsg='显示点击的内容'+id+'，点击次数'+count;


    //案例3：取得data-xxxx的值控件wxml里面的可以携带的私有数据,例如在调试状态下输出到控制台来看
    console.log(e.currentTarget.dataset);


    //案例4：把dataset里的qf数据取出来
    console.log(e.currentTarget.dataset.qf);


    //案例5：把dataset里的hi数据取出来
    console.log(e.currentTarget.dataset.hi);




    //setData重新刷新界面的数据  
    this.setData(param.data);
  }
};
Page(param);

/**index.wxss代码演示**/
.view-item
{
  padding:10px;
  background-color: limegreen;/**颜色**/
  border-radius: 5px;
  margin:5px; 
}

最终效果