微信小程实现全向(上下左右)滑动切换复杂解构bindtouchstartbindtouchendparseInt
Posted 牧碼人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程实现全向(上下左右)滑动切换复杂解构bindtouchstartbindtouchendparseInt相关的知识,希望对你有一定的参考价值。
文章目录
序言
最近在写原生微信小程序项目时候,遇到全向(左右上下)滑动更新内容模块,类似于小说的分页功能,页面布局简单。关于文章的
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、微信小程序演示
以上是关于微信小程实现全向(上下左右)滑动切换复杂解构bindtouchstartbindtouchendparseInt的主要内容,如果未能解决你的问题,请参考以下文章