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


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实现控制台控件的代码
Sep 04 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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与浏览器缓存的分析
2013/06/03 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
中级会计职业生涯规划范文
2014/01/16 职场文书
干部个人对照检查材料
2014/08/25 职场文书
个人授权委托书
2014/09/15 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
使用python绘制分组对比柱状图
2022/04/21 Python