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

这篇具有很好参考价值的文章主要介绍了微信小程序———同一页面内左右滑动切换内容显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、微信小程序事件

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

一、什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 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关键字，后者将中断捕获阶段和取消冒泡阶段。

微信小程序左右滑动切换页面,微信小程序,微信小程序,小程序,html,javascript

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

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

微信小程序左右滑动切换页面,微信小程序,微信小程序,小程序,html,javascript

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

实现内容：手指触摸手机屏幕左右滑动切换同一页面中显示内容（有一个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 
      }) 
    } 
  },

初始状态：微信小程序左右滑动切换页面,微信小程序,微信小程序,小程序,html,javascript

到这里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代码文章来源地址https://www.toymoban.com/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;
    //左右方向偏移大于上下偏移认为是左右滑动
		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
  },

到了这里，关于微信小程序———同一页面内左右滑动切换内容显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！