微信小程序——左右滑动切换页面

Posted 2023-04-09

参考技术A 微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。
这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。
touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;
touchmove触摸的过程中不断激发这个事件;
这三个事件都有一个timeStamp的属性，查看timeStamp属性，可以看到顺序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。

微信小程实现全向（上下左右）滑动切换复杂解构bindtouchstartbindtouchendparseInt

文章目录

• 序言
• 1、HTML部分
• 2、JavaScript部分
• 3、代码注解
• • 3.1、HTML部分
  • 3.2、JavaScript部分
• 4、微信小程序演示

序言

最近在写原生微信小程序项目时候，遇到全向（左右上下）滑动更新内容模块，类似于小说的分页功能，页面布局简单。关于文章的css不在此文章中展示，因为使用了公共的自定义类名，所以通过类名大概就能推敲出css对应的属性及值。

---

1、HTML部分

<view class="dis_c_cc width_100_100 height_100_" bindtouchstart="slideStart" bindtouchend="slideEnd">
	<view class="width_100_100 height_680 dis_c_sb padding_26 shadow_0_8_6_10_9A radius_16">
		<view>
			<view class="font_weight_700">info.title</view>
	
			<view class="margin_t_16">
				<view class="text_index_2em" wx:for="info.content" wx:key="id">item</view>
			</view>
		</view>
	
		<view class="margin_t_36 dis_r_sb text_align_right border_t_999">
			<view>
				<text>第</text>
				<text class="font_weight_700"> currentPage+1 </text>
				<text>页</text>
			</view>
	
			<view>
				<text>共</text>
				<text class="font_weight_700"> listLen </text>
				<text>页</text>
			</view>
		</view>
	</view>
</view>

---

2、JavaScript部分

let 
  // 数据列表
  objList,
  // JSON.stringify 克隆
  method_clone,
  // 随机重组
  method_randomRecombination
 = getApp();

Page(
  /**
   * 页面的初始数据
   */
  data: 
    list: [],
    listLen: 0,
    info: ,
    currentPage: 0,
    startX: undefined,
    startY: undefined
  ,

  // 滑动结束
  slideEnd( changedTouches:  [0]:  clientX, clientY   ) 
    let self = this,
      selfData = self.data,
      list = selfData.list,
      listLen = list.length,
      currentPage = selfData.currentPage,
      startX = selfData.startX,
      startY = selfData.startY,
      endX = parseInt(clientX),
      endY = parseInt(clientY),
      _X = endX - startX,
      _Y = startY - endY;

    currentPage = _Y - _X > 0 ? currentPage + 1 : currentPage - 1;

    if (currentPage < 0) return currentPage = 0;
    if (currentPage === listLen) return currentPage = listLen - 1;

    self.setData(
      currentPage,
      info: list[currentPage]
    );
  ,

  // 开始滑动
  slideStart( changedTouches:  [0]:  clientX, clientY   ) 
    clientX = parseInt(clientX);
    clientY = parseInt(clientY);

    this.setData(
      startX: clientX,
      startY: clientY
    );
  ,

  // 初始化
  init() 
    let list = objList.tabBar_E;
    
    list = method_clone(list);
    list = method_randomRecombination(list);

    this.setData(
      list,
      listLen: list.length,
      info: list[0]
    );
  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) 
    this.init();
  
)

---

3、代码注解

3.1、HTML部分

HTML部分使用卡片的形式布局。顶部分别是标题和内容，使用上下的布局模式。底部存放当前页码和总页数，使用左右布局模式。

---

3.2、JavaScript部分

第一步
在.js文件顶部引入三个数据变量，分别是对象列表objList、克隆函数method_clone和随机重组函数method_randomRecombination。

第二步
在data中定义六个变量，分别是：
list：源数据；
listLen：源数据长度（也就是总页数）；
info：当前数据对象；
currentPage：当前页，不过这个值在渲染时需要进行加1操作；
startX：开始触摸的X轴；
startY：开始触摸的Y轴。

第三步
定义名为init的函数进行初始化操作。函数第一行获取数据；第二行克隆数据；第三行随机重组数据；最后把数据列表、列表长度和列表第一项赋值到data对应的变量中。

第四步
定义名为slideStart函数用来记录开始触摸的坐标值。通过解构获取对应坐标，因为获取到的坐标有小数点，所以通过parseInt去除小数点，只保留整数部分（这一步不是必要操作，只是个人习惯）。最后把坐标值放到data中的startX和startY变量。

第五步
定义名为slideEnd的函数，这是最终实现全向滑动的函数。在函数顶部定义相关变量，需要注意的是_Y变量不是结束的Y坐标减去开始的Y坐标，当手势向上滑动时得到的是一个负值，向下滑动时得到一个正值，而页面效果是向上滑需要的是切换下一页。_Y - _X会得到一个总数值，如果大于0，表示切换至下一页。如果小于0，表示切换至上一页。if (currentPage < 0) return currentPage = 0;如果currentPage的值小于0，那么终止程序继续往下运行，并且把currentPage的值赋为0。if (currentPage === listLen) return currentPage = listLen - 1;如果currentPage等于源数据长度，那么终止程序继续往下运行，并且把currentPage的值赋为源数据长度减1。如果以上两个判断都不进入，那么就正常赋值切换即可。

---

4、微信小程序演示