一、微信小程序事件

?由于首先介紹一下微信小程序中的事件，可選擇快速略過或者直接進(jìn)去之后的重點(diǎn)內(nèi)容

一、什么是事件

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
• 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
• 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。

?二、事件的使用方式

1、在組件中綁定一個(gè)事件處理函數(shù)，如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

2、在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event

Page({
  tapName: function(event) {
    console.log(event)
  }
})

?3、可以看到控制臺(tái)上打印出來的事件信息

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

三、事件的分類

事件分為冒泡事件和非冒泡事件：

1、冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)像父節(jié)點(diǎn)傳遞

冒泡事件列表：

? ? ? ? touchstart：手指觸摸動(dòng)作開始

? ? ? ? touchmove：手指觸摸后移動(dòng)

? ? ? ? touchcantel：手指觸摸動(dòng)作被打斷，如來電提醒彈窗

? ? ? ? touchend：手指觸摸動(dòng)作結(jié)束

? ? ? ? tap：手指觸摸后馬上離開

2、非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞

? ? ? ? form的submit事件

? ? ? ? input的input事件

? ? ? ? scroll-view的scroll事件

四、事件的綁定

事件綁定的寫法類似于組件的屬性，

<view bindtap="handleTap">
    Click here!
</view>

當(dāng)用戶點(diǎn)擊頁面中的這個(gè)view的時(shí)候，頁面中的handleTap函數(shù)就會(huì)被調(diào)用，除此之外，事件綁定函數(shù)也可以是一個(gè)數(shù)據(jù)綁定，比如：

<view bindtap="{{ handlerName }}">
    Click here!
</view>

此時(shí)，當(dāng)用戶點(diǎn)擊頁面中的這個(gè)view的時(shí)候，首先獲取js中this.data.handleName的值即為要調(diào)用的函數(shù)名。若該值為空字符串的話，則點(diǎn)擊view后不觸發(fā)函數(shù)。

二、在同一頁面左右滑動(dòng)切換頁面內(nèi)容

現(xiàn)在我們就要進(jìn)入正題了，此次我們需要用到的事件，為上面所提到的touchstart? ??touchend? ?touchmove三個(gè)事件，下面對(duì)這三個(gè)事件簡(jiǎn)要介紹，根據(jù)官方文檔描述，自基礎(chǔ)庫版本1.5.0起，觸摸類事件支持捕獲階段，捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反，需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind或者capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。

?========================================================================

==============================項(xiàng)目開始啦==================================

?=========================================================================

實(shí)現(xiàn)內(nèi)容：手指觸摸手機(jī)屏幕左右滑動(dòng)切換同一頁面中顯示內(nèi)容（有一個(gè)tab欄可以進(jìn)行切換的同時(shí)，加做一個(gè)左右滑動(dòng)也能進(jìn)行切換顯示內(nèi)容的功能）旨在增強(qiáng)用戶的體驗(yàn)感。

1、實(shí)現(xiàn)一個(gè)tab欄

html代碼：

<scroll-view class="swiper-tab"> 
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">男生頭像</view> 
 <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">女生頭像</view> 
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">情侶頭像</view> 
</scroll-view> 

css代碼：

.swiper-tab{ 
  width: 100%; 
  text-align: center; 
  line-height: 80rpx;
} 

.swiper-tab-list{ 
  font-size: 30rpx; 
  display: inline-block; 
  width: 33.33%; 
  border-bottom: 2rpx solid #777777;
  color: #777777; 
 } 
.on{ 
  color: red; 
  border-bottom: 5rpx solid red;
} 

js代碼：

在Page中的data中增加一條currentTab : 0，即初始狀態(tài)男生頭像默認(rèn)被選中，并且男生頭像標(biāo)簽的類名on被激活，除此之外還要寫一個(gè)函數(shù)，作用就是點(diǎn)擊其他tab切換被選中的

  swichNav: function( e ) { 
    var that = this; 
    if( this.data.currentTab === e.target.dataset.current ){ 
      return false; 
    } 
    else { 
      that.setData({ 
        currentTab: e.target.dataset.current 
      }) 
    } 
  }, 

初始狀態(tài)：

到這里tab欄就已經(jīng)實(shí)現(xiàn)完成了，總共寫了三個(gè)部分，當(dāng)點(diǎn)擊任意一部分時(shí)，就可以切換被選中的，接下來我們來實(shí)現(xiàn)左右滑動(dòng)的部分。

2、左右滑動(dòng)部分切換頁面內(nèi)容實(shí)現(xiàn)

大體思路：通過開始觸摸的的落點(diǎn)和結(jié)束觸摸的落點(diǎn)的坐標(biāo)進(jìn)行運(yùn)算，以此來判斷到底是向左滑動(dòng)還是向右滑動(dòng)了，接著通過改變currentTab的值來控制頁面內(nèi)容的顯示。

在Page中的data中增加幾條，js中會(huì)用到，

????flag:0, 用來記錄是否需要重新滑動(dòng) 不然會(huì)導(dǎo)致滑動(dòng)過程中會(huì)一直觸發(fā)touchmove

????lastX:0,//手指起點(diǎn)位置

????lastY:0,

html代碼：

<!--男生頭像部分-->
<view  	bind:touchmove="handleTouchmove" bind:touchstart="handleTouchstart" bind:touchend="handleTouchend"  wx:if="{{currentTab==0 ? true : false}}">
    <text>這里是男生頭像</text>
</view>

<!--女生頭像部分-->
<view bind:touchmove="handleTouchmove" bind:touchstart="handleTouchstart" bind:touchend="handleTouchend"   wx:elif="{{currentTab==1 ? true : false}}">
    <text>這里是女生頭像</text>
</view>

<!--情侶頭像部分-->
<view  bind:touchmove="handleTouchmove" bind:touchstart="handleTouchstart" bind:touchend="handleTouchend"  wx:else="{{currentTab==2 ? true : false}}">
    <text>這里是情侶頭像</text>
</view>

js代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-777618.html

  handleTouchstart:function (e) {
    this.data.flag = 0;
		this.data.lastX = e.changedTouches[0].pageX;
		this.data.lastY = e.changedTouches[0].pageY;
  },
  handleTouchmove:function (e) {
   
    if (this.data.flag !== 0) {
      return;
    }
    let currentX = e.changedTouches[0].pageX;
		let currentY = e.changedTouches[0].pageY;
		let tx = currentX - this.data.lastX;
		let ty = currentY - this.data.lastY;
    //左右方向偏移大于上下偏移認(rèn)為是左右滑動(dòng)
		if (Math.abs(tx) - Math.abs(ty) > 5) {
      console.log("cc")
			// 向左滑動(dòng)
			if (tx < 0) {
				// 如果到最右側(cè)
				console.log('向左滑動(dòng)');
        this.data.flag = 1;		
        if(this.data.currentTab===2){
          this.setData({
            currentTab:0
          })
        }else{
          this.setData({
            currentTab:this.data.currentTab+1
          })
        }
      }
      // 向右滑動(dòng) 
      else if (tx > 0) {
					// 如果到最左側(cè)
					this.data.flag = 2;
          console.log('向右滑動(dòng)');
          if(this.data.currentTab===0){
            this.setData({
              currentTab:2
            })
          }else{
            this.setData({
              currentTab:this.data.currentTab-1
            })
          }
				}
      }

      //上下方向滑動(dòng)
			else {
				if (ty < 0) {
          //向上滑動(dòng)
          console.log("向上滑動(dòng)")
					this.data.flag = 3;
				} else if (ty > 0) {
          //向下滑動(dòng)
          console.log("向下滑動(dòng)")
					this.data.flag = 4;
				}
			}
			//將當(dāng)前坐標(biāo)進(jìn)行保存以進(jìn)行下一次計(jì)算
			this.data.lastX = currentX;
			this.data.lastY = currentY;

      

  },
  handleTouchend:function (e) {
    this.data.flag=0
  },

到了這里，關(guān)于微信小程序———同一頁面內(nèi)左右滑動(dòng)切換內(nèi)容顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！