怎么在微信小程序中实现卡片左右滑动效果-创新互联
本篇文章为大家展示了怎么在微信小程序中实现卡片左右滑动效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
从策划到设计制作,每一步都追求做到细腻,制作可持续发展的企业网站。为客户提供成都做网站、网站设计、外贸营销网站建设、网站策划、网页设计、域名申请、网页空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。思路
左右滑动到一定的距离,就向相应的方向移动一个卡片的位置。
卡片滑动的时候有一定的加速度。
如果滑动距离太小,则依旧停留在当前卡片,而且有一个回弹的效果。
看到这样的需求,不熟悉小程序的同学,可能感觉有点麻烦。首先需要计算卡片的位置,然后再设置滚动条的位置,使其滚动到指定的位置,而且在滚动的过程中,加上一点加速度...
然而,当你查看了小程序的开发文档之后,就会发现小程序已经帮我们提前写好了,我们只要做相关的设置就行。
实现
滚动视图
左右滑动,其实就是水平方向上的滚动。小程序给我们提供了scroll-view组件,我们可以通过设置scroll-x属性使其横向滚动。
关键属性
在scroll-view组件属性列表中,我们发现了两个关键的属性:
属性 | 类型 | 说明 |
---|---|---|
scroll-into-view | string | 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 |
scroll-with-animation | boolean | 在设置滚动条位置时使用动画过渡 |
有了以上这两个属性,我们就很好办事了。只要让每个卡片独占一页,同时设置元素的ID,就可以很简单的实现翻页效果了。
左滑右滑判断
这里,我们通过触摸的开始位置和结束位置来决定滑动方向。
微信小程序给我们提供了touchstart以及touchend事件,我们可以通过判断开始和结束的时候的横坐标来判断方向。
代码实现
card.wxml
{{item}}
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" }
上述内容就是怎么在微信小程序中实现卡片左右滑动效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文题目:怎么在微信小程序中实现卡片左右滑动效果-创新互联
浏览路径:http://scyanting.com/article/djhjpc.html