本篇文章給大家分享的是有關(guān)微信小程序中怎么實現(xiàn)事件交互操作，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

目前成都創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、大寧網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

什么是事件？

指點擊，觸摸，按下，滑動，松開，等一系列對手機屏幕操作。

下面代碼所要呈現(xiàn)的效果就是給兩個按鈕一人一個ID然后點擊誰，在上面顯示信息那就顯示 點擊了誰，點擊了多少次，這多少次沒有分開啊，次數(shù)是點擊他兩的總和。下面另一代碼是分開的，各計各的。

1. 在index.wxml 中設(shè)置點擊事件（測試時需要刪除注釋部分）

    //點擊后在這里顯示信息，來表明是有點擊事件的
   {{clickMsg}}
//設(shè)置點擊事件

  按鈕1
  按鈕2

2. 在index.wxss中設(shè)置view的樣式

.page{
text-align: center;
}
.view-item{
background-color:green;
width: 60px;
height: 30px;
margin: 30px auto 0 auto;
color: navajowhite;
border-radius: 10px;
padding: 20px;
}

3. 在index.js中設(shè)置點擊事件的響應(yīng)

//注冊兩個變量
var id;
var count = 0;
var param = {
 data: {
  clickMsg: '顯示點擊內(nèi)容'
 },
 //function就是觸發(fā)點擊事件的函數(shù)，以后是點擊事件你就這樣寫就行
 //e就是event事件對象，包含了很多，比如：誰被點擊了，什么時候被點擊了
 clickMe: function (e) {
  count++;
  console.log(e);//把點擊事件詳細信息打印到調(diào)試的console中
  id = e.currentTarget.id; //獲取被點擊按鈕的id
  param.data.clickMsg = '顯示點了誰：' + id + '點擊次數(shù)' + count;
  //重新刷新clickMsg的顯示內(nèi)容，要想看到message變化必須寫這個
  this.setData(param.data);
 }
};
Page(param);
//這個必須寫，它是為了讓param這個函數(shù)真實化，要不然你干寫著，在index.wxml中調(diào)用時沒反應(yīng)的

怎樣讓點擊控件view0攜帶私有信息呢

為了以后傳值什么的

點擊我view0

怎樣調(diào)用控件私有信息呢？

var param={
  clickMe:function(e){
     id=e.currentTarget.id;
     console.log(e.currentTarget.id.dataset.siyou);
}
};
Page(param);

二、添加判斷的點擊事件

index.wxml

   {{Message}}
   {{Message1}}

  按鈕1
  按鈕2

index.js

var id;
var count1 = 0;
var count2 = 0;
var param = {
 data: {
  Message: '點擊后，在這里顯示信息',
  Message1: '點擊后，在這里顯示信息'
 },
 clickMe: function (e) {
  console.log(e);
  id = e.currentTarget.id;
  if (id == 'view1') {
   count1++;
   param.data.Message = '顯示點擊了' + id + '點擊了' + count1 + '次';
   this.setData(param.data);
  } else if (id == 'view2') {
   count2++;
   param.data.Message1 = '顯示點擊了' + id + '點擊了' + count2 + '次';
   this.setData(param.data);
  }
 }
};
Page(param);

以上就是微信小程序中怎么實現(xiàn)事件交互操作，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：微信小程序中怎么實現(xiàn)事件交互操作-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/cscppe.html