uniapp解决scroll-view下拉、回弹抖动的bug

最新推荐文章于 2024-08-22 11:53:20 发布
最新推荐文章于 2024-08-22 11:53:20 发布
阅读量5k 收藏 4
点赞数 2
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36728518/article/details/119388373
版权

在uni-app框架下，使用scroll-view进行下拉加载时，不要设置

scroll-top

或者

scroll-left

否则会出现，页面抖动的情况

任磊abc
关注
专栏目录
详解mpvue scroll-view自动回弹bug解决方案
11-27
表现 设置了scroll-top的scroll-view组件，在组件所在vue实例data发生改变时会自动回弹到最上方 解决方案 打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法 function calcDiff(holder, key, newObj, oldObj) { if (newObj === oldObj || newObj === undefined) { return } if (newObj == null || oldObj == null || typeof newObj !== typeof oldObj) {
微信小程序-解决scroll-view抖动
weixin_44943268的博客
06-21 9378
微信小程序scroll-view抖动 原因：产品需要点击换一换，列表置顶并刷新，所以需要动态绑定scroll-view里面的scrollTop属性 scrollTop属性用法需要保存@scroll时的值，如果在@scroll时直接复制给scrollTop的话 就会出现页面抖动 解决：@scroll时复制给一个变量，点击换一换时再将变量赋值给scrollTop ...
uniapp实现区域滚动、下拉刷新、上滑滚动加载更多
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-22 5750
scroll-view自定义滚动区域，通过css样式，让滚动区域自适应整个屏幕剩余空间。min-height:0;设置为0
uniapp解决scroll-view回弹抖动等bug
热门推荐
qq_39905409的博客
12-09 1万+
滑动时回弹抖动： 1、设置scroll-anchoring为true 默认为false，开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 2、不设@scroll 和scroll-top/scroll-left，如下 <scroll-view class="scroll-view_Line" :scroll-anchoring="true" scroll-y="true"> &l
uniapp scroll-view防抖
weixin_57925162的博客
11-22 1474
scrollTop属性用法需要保存scroll时的值，如果在scroll时直接复制给scrollTop的话 就会出现页面抖动。解决办法：scroll时复制给一个变量，点击换一换时再将变量赋值给scrollTop。
uniapp使用scroll-view，在iphone上，顶部底部上下拉，会产生抖动
qq_37698249的博客
09-26 2103
造成抖动的原因是因为在scroll-view上，添加了scroll-top属性（用作锚点定位） 改用生命周期onPageScroll，来实现滚动加载 锚点定位改用 uni.pageScrollTo({ scrollTop: 0, duration: 300 });
scroll-view标签下滑抖动回弹
qq_54097544的博客
06-21 1021
解决scroll-view下滑列表抖动回弹问题
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
uniapp使用scroll-view下拉刷新无法取消的坑
haosicx的博客
09-16 2822
在做uniapp的时候需要用到tap页 但是uView的基础tap页是不支持左右滑动的 所以使用了tap-swiper组件 但是这个组件必须包裹一个scroll-view 包裹后uniapp自带的下拉刷新就没了 必须使用scroll-view自带的下拉刷新才行 但是做的时候出现了一个问题 scroll-view自带的下拉刷新 刷新后无法取消那个动画 我在网上也找了很多 都没有找到一个好的解决方案 后来就自己搞出来了 虽然性能不太好 但是还是可以用的 思路如下 仅供参考 .
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在提供的资源文件中，`super-scroll-view.js`可能是实现下拉刷新逻辑的JavaScript代码，`super-scroll-view.json`是该组件的配置文件，`super-scroll-view.wxml`和`super-scroll-view.wxss`分别是组件的结构和样式...
uni-app下拉实例模板
04-04
uni-app的点击下拉实例模板，非常好用，可以放心使用。
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
社交应用中，onPullDownRefresh下拉加载历史消息，与页面上的消息合并，滚动到下拉之前，页面不闪
uniapp中scroll-view利用scroll-into-view实现锚点功(滚动到某个view重新回到第一个view)
高桥留de博客
09-07 1547
uniapp中scroll-view利用scroll-into-view实现锚点功(滚动到某个view重新回到第一个view)
uniapp app滑动、触摸时页面出现抖动拉伸解决
admire_fish的博客
07-05 1330
uniapp app滑动、触摸时页面出现抖动拉伸解决
uniapp scroll-view 下拉刷新动画无法关闭问题
anjignren的博客
08-24 3410
uniapp scroll-view做的下拉刷新动画无法关闭问题
uni-app在iOS移动端页面上下滑动关闭(页面回弹问题，非刷新)
litter_m的博客
05-20 7595
使用uni-app写出的App同时在安卓端和iOS运行对比时，发现在iOS会因为上下拉出现空白页，而安卓端并没有这种问题，通过查阅官网发现使用以下代码可以解决问题。 进入pages.josn文件找到想要禁止回弹的页面，在对应的style中添加以下代码 "app-plus":{ // 将回弹属性关掉 "bounce":"none" } 例如： "pages": [ //pages数组中第一项表示应用启动页 { "path": "pages/login/logi
uni-app 下拉刷新 不回弹问题 用@refresherpulling=“onPulling“解决 和直接scroll-view 封装页面使用demo
Rainliangr的博客
12-04 977
uni-app 下拉刷新 不回弹问题 用@refresherpulling="onPulling"解决 和直接scroll-view 封装页面使用demo
uniapp 如何关闭页面的上下拉后触发的回弹效果
奇点的博客
08-17 1506
pages.json中在全局中 加 bounce
uniapp修改scroll-view下拉刷新样式
06-02
要修改 `scroll-view` 下拉刷新的样式，需要在 `scroll-view` 中添加下拉刷新组件，并设置其相应的样式。 以下是一个示例代码： ```html <scroll-view class="scrollview" scroll-y bindscrolltolower="scrolltolower" bindscrolltoupper="scrolltoupper"> <view class="refresh-view" style="height:{{refreshHeight}}px;"> <image class="refresh-image" src="../../static/img/refresh.png"></image> <view class="refresh-text">{{refreshText}}</view> </view> <!-- 此处为scroll-view的内容 --> </scroll-view> ``` 其中，`refresh-view` 为下拉刷新的容器，`refresh-image` 为下拉刷新的图标，`refresh-text` 为下拉刷新的文字。 接着，在 js 文件中设置下拉刷新的相关逻辑和样式： ```javascript Page({ data: { refreshHeight: 0, refreshText: '下拉刷新', refreshAnimation: {} }, // touchstart事件，记录下拉刷新的初始位置 touchstart: function (e) { this.setData({ startY: e.changedTouches[0].clientY }) }, // touchmove事件，计算下拉刷新的距离并更新样式 touchmove: function (e) { var moveY = e.changedTouches[0].clientY var disY = moveY - this.data.startY if (disY < 0) { return } var scrollHeight = this.data.scrollHeight var refreshHeight = this.data.refreshHeight var progress = disY / (refreshHeight + 10) * 100 if (progress > 100) { progress = 100 } var refreshText = '' if (progress < 20) { refreshText = '下拉刷新' } else if (progress < 80) { refreshText = '释放立即刷新' } else { refreshText = '正在刷新...' } this.setData({ refreshHeight: disY, progress: progress, refreshText: refreshText }) }, // touchend事件，触发下拉刷新并更新样式 touchend: function (e) { var refreshHeight = this.data.refreshHeight var scrollHeight = this.data.scrollHeight var progress = this.data.progress if (progress < 80) { this.setData({ refreshHeight: 0, refreshText: '下拉刷新' }) } else { this.setData({ refreshHeight: 50, refreshText: '正在刷新...' }) // 触发下拉刷新 this.refreshData() } }, // scrolltolower事件，触发上拉加载更多 scrolltolower: function () { // 触发上拉加载更多 this.loadMoreData() }, // scrolltoupper事件，触发下拉刷新 scrolltoupper: function () { this.setData({ refreshHeight: 50, refreshText: '正在刷新...' }) // 触发下拉刷新 this.refreshData() }, // 下拉刷新的逻辑 refreshData: function () { // 下拉刷新的具体实现 }, // 上拉加载更多的逻辑 loadMoreData: function () { // 上拉加载更多的具体实现 } }) ``` 在 css 文件中设置相应的样式： ```css .scrollview { height: 100%; overflow: auto; } .refresh-view { display: flex; justify-content: center; align-items: center; height: 0; transition: height 0.3s; } .refresh-image { width: 20px; height: 20px; margin-right: 10px; } .refresh-text { font-size: 14px; color: #666; } ``` 这样就可以实现自定义 `scroll-view` 下拉刷新的样式了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任磊abc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值