html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】

1. 新建Scroll文件

2. 在Scroll/index.wxml文件中写入如下代码

style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">

你好，我想实现 “惯性滚动，回弹效果”，请下拉我

3. 在Scroll/index.js 文件中写入如下代码

Page({

data: {

starty: 0, //开始的位置x

endy: 0, //结束的位置y

margintop: 0, //滑动下拉距离

onLoad() {

scrollTouchstart: function (e) {

let py = e.touches[0].pageY;

this.setData({

starty: py

})

scrollTouchmove: function (e) {

let py = e.touches[0].pageY;

let d = this.data;

this.setData({

endy: py,

})

if (py - d.starty < 50 && py - d.starty > -50) {

this.setData({

margintop: py - d.starty

})

}

scrollTouchend: function (e) {

this.setData({

starty: 0,

endy: 0,

margintop: 0

})

}

})

原文：https://www.cnblogs.com/gqx-html/p/13292264.html

html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】相关推荐

微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介绍加载和刷新. 效果图: 先介绍在IDE中,怎么模拟上滑这个操作.开始我是用鼠标点击文章列表,然后先上移动.结果一直没有结果,以为是 ...
微信小程序自定义导航栏与自带下拉刷新冲突
在使用HbuilderX开发微信小程序时(在HbuilderX中写代码,在微信开发者工具编译),由于微信小程序自带的导航栏功能少,样式单一等,于是采用colorUI自定义导航栏实现需求.而问题就一而再 ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...

html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】

html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】相关推荐

最新文章

热门文章

html回弹效果,微信小程序 transform 实现 惯性滚动，回弹效果 【下拉回弹】

html回弹效果,微信小程序 transform 实现 惯性滚动，回弹效果 【下拉回弹】相关推荐

最新文章

热门文章

html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】

html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】相关推荐