Web前端之微信小程实现上下左右全向滑动切换、复杂解构、bindtouchstart、bindtouchend、parseInt

序言

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

Html

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

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}}}){letself=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)returncurrentPage=0;if(currentPage===listLen)returncurrentPage=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(){letlist=objList.tabBar_E;list=method_clone(list);list=method_randomRecombination(list);this.setData({list,listLen:list.length,info:list[0]});},/** * 生命周期函数--监听页面加载 */onLoad(options){this.init();}})

代码注解

1、Html

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

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。如果以上两个判断都不进入，那么就正常赋值切换即可。