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

序言

最近在写原生微信小程序项目时候，遇到全向（左右上下）滑动更新内容模块，类似于小说的分页功能，页面布局简单。关于文章的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、微信小程序演示