微信小程序实现卡片左右滑动效果的示例代码


Posted in Javascript onMay 01, 2019

快放假了,人狠话不多,啥也不说了。先看效果图。

微信小程序实现卡片左右滑动效果的示例代码 

思路

从上面的效果图来看,基本的需求包括:

  • 左右滑动到一定的距离,就向相应的方向移动一个卡片的位置。
  • 卡片滑动的时候有一定的加速度。
  • 如果滑动距离太小,则依旧停留在当前卡片,而且有一个回弹的效果。

看到这样的需求,不熟悉小程序的同学,可能感觉有点麻烦。首先需要计算卡片的位置,然后再设置滚动条的位置,使其滚动到指定的位置,而且在滚动的过程中,加上一点加速度...

然而,当你查看了小程序的开发文档之后,就会发现小程序已经帮我们提前写好了,我们只要做相关的设置就行。

实现

滚动视图

左右滑动,其实就是水平方向上的滚动。小程序给我们提供了scroll-view组件,我们可以通过设置scroll-x属性使其横向滚动。

关键属性

在scroll-view组件属性列表中,我们发现了两个关键的属性:

属性 类型 说明
scroll-into-view string 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation boolean 在设置滚动条位置时使用动画过渡

有了以上这两个属性,我们就很好办事了。只要让每个卡片独占一页,同时设置元素的ID,就可以很简单的实现翻页效果了。

左滑右滑判断

这里,我们通过触摸的开始位置和结束位置来决定滑动方向。

微信小程序给我们提供了touchstart以及touchend事件,我们可以通过判断开始和结束的时候的横坐标来判断方向。

代码实现

card.wxml

<scroll-view class="scroll-box" scroll-x scroll-with-animation
 scroll-into-view="{{toView}}"
 bindtouchstart="touchStart"
 bindtouchend="touchEnd">
 <view wx:for="{{list}}" wx:key="{{item}}" class="card-box" id="card_{{index}}">
  <view class="card">
  <text>{{item}}</text>
  </view>
 </view>
</scroll-view>

card.wxss

page{
 overflow: hidden;
 background: #0D1740;
}
.scroll-box{
 white-space: nowrap;
 height: 105vh;
}

.card-box{
 display: inline-block;
}

.card{
 display: flex;
 justify-content: center;
 align-items: center;
 box-sizing: border-box;
 height: 80vh;
 width: 80vw;
 margin: 5vh 10vw;
 font-size: 40px;
 background: #F8F2DC;
 border-radius: 4px;
}

card.js

const DEFAULT_PAGE = 0;

Page({
 startPageX: 0,
 currentView: DEFAULT_PAGE,
 data: {
 toView: `card_${DEFAULT_PAGE}`,
 list: ['Javascript', 'Typescript', 'Java', 'PHP', 'Go']
 },

 touchStart(e) {
 this.startPageX = e.changedTouches[0].pageX;
 },

 touchEnd(e) {
 const moveX = e.changedTouches[0].pageX - this.startPageX;
 const maxPage = this.data.list.length - 1;
 if (Math.abs(moveX) >= 150){
  if (moveX > 0) {
  this.currentView = this.currentView !== 0 ? this.currentView - 1 : 0;
  } else {
  this.currentView = this.currentView !== maxPage ? this.currentView + 1 : maxPage;
  }
 }
 this.setData({
  toView: `card_${this.currentView}`
 });
 }
})

card.json

{
 "navigationBarTitleText": "卡片滑动",
 "backgroundColor": "#0D1740",
 "navigationBarBackgroundColor": "#0D1740",
 "navigationBarTextStyle": "white"
}

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
js中数组的常用方法小结
Dec 30 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
JavaScript原型链详解
Nov 07 Javascript
微信小程序常见页面跳转操作简单示例
May 01 #Javascript
浅谈对于react-thunk中间件的简单理解
May 01 #Javascript
vue增加强缓存和版本号的实现方法
May 01 #Javascript
vue组件化中slot的基本使用方法
May 01 #Javascript
Vue基本使用之对象提供的属性功能
Apr 30 #Javascript
原生JS实现随机点名项目的实例代码
Apr 30 #Javascript
vue实现随机验证码功能的实例代码
Apr 30 #Javascript
You might like
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python中偏函数partial用法实例分析
2015/07/08 Python
PyQt5实现下载进度条效果
2018/04/19 Python
一看就懂得Python的math模块
2018/10/21 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
Python基于execjs运行js过程解析
2020/11/27 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
运动会班级口号
2014/06/09 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python