微信小程序———同一页面内左右滑动切换内容显示

2024-02-21 小程序 0

一、微信小程序事件

由于首先介绍一下微信小程序中的事件，可选择快速略过或者直接进去之后的重点内容

一、什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

二、事件的使用方式

1、在组件中绑定一个事件处理函数，如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

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

2、在相应的Page定义中写上相应的事件处理函数，参数是event

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

3、可以看到控制台上打印出来的事件信息

{  "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、冒泡事件：当一个组件上的事件被触发后，该事件会像父节点传递

冒泡事件列表：

touchstart：手指触摸动作开始

touchmove：手指触摸后移动

touchcantel：手指触摸动作被打断，如来电提醒弹窗

touchend：手指触摸动作结束

tap：手指触摸后马上离开

2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

form的submit事件

input的input事件

scroll-view的scroll事件

四、事件的绑定

事件绑定的写法类似于组件的属性，

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

当用户点击页面中的这个view的时候，页面中的handleTap函数就会被调用，除此之外，事件绑定函数也可以是一个数据绑定，比如：

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

此时，当用户点击页面中的这个view的时候，首先获取js中this.data.handleName的值即为要调用的函数名。若该值为空字符串的话，则点击view后不触发函数。

二、在同一页面左右滑动切换页面内容

现在我们就要进入正题了，此次我们需要用到的事件，为上面所提到的touchstart touchend touchmove三个事件，下面对这三个事件简要介绍，根据官方文档描述，自基础库版本1.5.0起，触摸类事件支持捕获阶段，捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反，需要在捕获阶段监听事件时，可以采用capture-bind或者capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

========================================================================

==============================项目开始啦==================================

=========================================================================

实现内容：手指触摸手机屏幕左右滑动切换同一页面中显示内容（有一个tab栏可以进行切换的同时，加做一个左右滑动也能进行切换显示内容的功能）旨在增强用户的体验感。

1、实现一个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，即初始状态男生头像默认被选中，并且男生头像标签的类名on被激活，除此之外还要写一个函数，作用就是点击其他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       })     }   },

初始状态：

到这里tab栏就已经实现完成了，总共写了三个部分，当点击任意一部分时，就可以切换被选中的，接下来我们来实现左右滑动的部分。

2、左右滑动部分切换页面内容实现

大体思路：通过开始触摸的的落点和结束触摸的落点的坐标进行运算，以此来判断到底是向左滑动还是向右滑动了，接着通过改变currentTab的值来控制页面内容的显示。

在Page中的data中增加几条，js中会用到，

flag:0, 用来记录是否需要重新滑动不然会导致滑动过程中会一直触发touchmove

lastX:0,//手指起点位置

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代码

  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;    //左右方向偏移大于上下偏移认为是左右滑动		if (Math.abs(tx) - Math.abs(ty) > 5) {      console.log("cc")			// 向左滑动			if (tx < 0) {				// 如果到最右侧				console.log('向左滑动');        this.data.flag = 1;		        if(this.data.currentTab===2){          this.setData({            currentTab:0          })        }else{          this.setData({            currentTab:this.data.currentTab+1          })        }      }      // 向右滑动       else if (tx > 0) {					// 如果到最左侧					this.data.flag = 2;          console.log('向右滑动');          if(this.data.currentTab===0){            this.setData({              currentTab:2            })          }else{            this.setData({              currentTab:this.data.currentTab-1            })          }				}      }      //上下方向滑动			else {				if (ty < 0) {          //向上滑动          console.log("向上滑动")					this.data.flag = 3;				} else if (ty > 0) {          //向下滑动          console.log("向下滑动")					this.data.flag = 4;				}			}			//将当前坐标进行保存以进行下一次计算			this.data.lastX = currentX;			this.data.lastY = currentY;        },  handleTouchend:function (e) {    this.data.flag=0  },

# 上一篇：微信小程序canvas手写签字

# 下一篇：小程序采集网站：解锁疑惑，省时又省力