网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

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

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

思路

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

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

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

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

实现

滚动视图

左右滑动,其实就是水平方向上的滚动。小程序给我们提供了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 "htmlcode">
{
 "navigationBarTitleText": "卡片滑动",
 "backgroundColor": "#0D1740",
 "navigationBarBackgroundColor": "#0D1740",
 "navigationBarTextStyle": "white"
}

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

上一篇:javascript原型链学习记录之继承实现方式分析
下一篇:微信小程序常见页面跳转操作简单示例
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap