微信小程实现全向(上下左右)滑动切换复杂解构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中的startXstartY变量。

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


4、微信小程序演示

以上是关于微信小程实现全向(上下左右)滑动切换复杂解构bindtouchstartbindtouchendparseInt的主要内容,如果未能解决你的问题,请参考以下文章

Android防微信首页左右滑动切换

手机左右滑动屏幕切换页面是如何实现的

微信小程序滚动Tab实现左右可滑动切换

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

请问有人用videojs实现上下滑动切换视频功能

如何只用AngularJs实现图片滑动切换?