【uniapp】小程序中的scroll-view禁止橡皮筋回弹效果以及隐藏滑动条

小付学代码

已于 2022-08-24 17:49:57 修改

阅读量7.1k

点赞数 1

分类专栏： uni-app 文章标签： uni-app 小程序前端

于 2022-08-24 10:42:27 首次发布

本文链接：https://blog.csdn.net/ONLYSRY/article/details/126499414

版权

2.12.0版本更新 IOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)

scroll-view | 微信开放文档

2.1.5 +后即可用show-scrollbar属性来控制是否显示滚动条

scroll-view | uni-app官网

以下为一个示例，复制粘贴run以下即可看到效果，苹果12 13机型实测没有问题。（禁止回弹，隐藏滚动条）

<template>
	<view>
		<scroll-view scroll-y="true" class&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小付学代码

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp [全端兼容] - 详细实现scroll-view滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题！

王二红

04-01

4405

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉io

【微信小程序】常见问题-ios设备页面回弹开关

墨夶的博客

11-27

1454

通过上述方法，开发者可以根据具体需求选择合适的方式来关闭或控制微信小程序在iOS设备上的页面回弹效果。每种方法都有其适用场景，合理选择可以有效提升用户体验。希望这些方法能帮助你更好地管理页面滚动行为，提升小程序的整体质量。

参与评论您还未登录，请先登录后发表或查看评论

uni踩坑笔记 - 禁用scroll-view在IOS端下的橡皮筋效果

weixin_46737742的博客

05-21

865

微信小程序端使用scroll-view组件绘制页面，在IOS真机中会出现上下拉动回弹的橡皮筋效果，部分页面想要禁用该默认效果。

uniapp 实现上拉阻尼效果(橡皮筋回弹) -仿ios底部回弹

最新发布

Echo24_R的博客

03-05

1567

uniapp 实现滑动到底部出现文字，并且再次上拉出现仿ios阻尼效果（橡皮筋回弹），可实现回弹跳转页面或上拉加载更多

uni-app禁用页面回弹效果

野猿新一

12-19

4031

uni-app页面默认有页面回弹效果，按住页面往下拉页面会往下拉伸，放开后会回弹。只需要将bounce设置成false即可。有时候不需要此效果，可以禁用掉。

UIScrollView 取消拉动反弹

HHuiHao

03-25

5174

UIScrollView 取消拉动反弹

[UNIAPP系列] IOS端取消橡皮筋回弹效果

weixin_45969775的博客

01-12

2676

APP-IOS端取消橡皮筋回弹效果

uniAPP IOS 端关闭滚动回弹效果

sinat_33255495的博客

12-27

2554

【代码】uniAPP IOS 端关闭滚动回弹效果。

禁止小程序scroll-view或view橡皮筋回弹效果

w96098的博客

11-27

8894

一、页面无滚动区域；直接在json文件添加配置； { "disableScroll":true } 二、页面有滚动区域，滚动区域通过view模拟实现或使用scroll-view;IOS中都会有回弹效果； <scroll-view class="set_new_work_bg" scroll-y="{{true}}" enhanced="{{true}}" bounces="{{false}}"> </scroll-view> ...

[uniapp] scroll-view 取消滚动条

jinwenshuo2007的博客

10-31

400

【代码】[uniapp] scroll-view 取消滚动条。

scroll-view组件，在iOS设备上禁用橡皮筋回弹效果

T3165919332的博客

12-02

922

在实现uniapp微信小程序的一个项目时，ios真机测试，scroll-view组件可以向下拉动一段距离然后又回弹。组件的属性来禁用橡皮筋回弹效果。可以关闭iOS回弹效果‌。

详解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) {

带橡皮筋效果的RecyclerView

03-05

本项目聚焦于一个特定的交互效果——“橡皮筋效果”，即用户在滑动RecyclerView时，能够感受到如同橡皮筋般的拉伸和回弹，这种效果为用户提供了更自然、更有趣的滚动体验。 "橡皮筋效果"，也称为“弹性滚动”或...

【微信小程序】iOS设备微信小程序页面回弹效果：关闭还是保留？

java专栏

11-30

1890

通过本文的学习，相信你已经掌握了如何在微信小程序中关闭或保留iOS设备的回弹效果。无论是使用页面级配置、组件，还是动态控制回弹效果，都有各自的适用场景和优势。你可以根据具体需求选择合适的方法，让小程序的用户体验更加完美！🌟如果你有任何问题或者更好的方法，欢迎在评论区留言交流。💖希望这篇文章能够帮助你在微信小程序开发的道路上更进一步，让小程序更加贴近用户需求，提升用户满意度！🚀好了，今天的分享就到这里啦！如果你还想了解更多微信小程序的开发技巧和最佳实践，记得关注我，我会持续更新更多有趣的内容。

微信小程序在ios中下拉出现“橡皮筋”效果

黄腾霄的博客

07-14

3649

今天和大家聊一聊微信小程序在ios中下拉出现“橡皮筋”效果问题现象话不多说，先看代码（使用taro编写）。代码很简单，一个flex的容器+一个允许进行下拉刷新的ScrollView，就组成了一个最简demo const TicketRecordsPage = () => { const revenueData = new Array(10).fill(0).map((_, i) => i) return ( <View className={styles['root

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下拉、回弹抖动的bug

任磊

08-04

5395

在uni-app框架下，使用scroll-view进行下拉加载时，不要设置 scroll-top 或者 scroll-left 否则会出现，页面抖动的情况

uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件

qq_42682622的博客

03-24

5516

当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。

小程序IOS页面下拉回弹效果

懒羊羊我小弟的博客

08-12

4986

小程序IOS页面下拉回弹效果 小程序在ios系统上的橡皮筋回弹效果，是ios特有的，目前小程序没有特有的方法去控制。根据业务需求不想要这个回弹的效果，故此记录一下解决方案；方案一：当页面内容比较少，且没有用到scroll-view组件时在页面配置中添加：{"disableScroll": true} ，这个属性会禁止整个页面滚动。不适合页面有滚动区域的情况；方案二：当页面上有滚动区域，使用了scroll-view时在微信的官方文档scroll-view组件，上记录了两个属性，当en

uniapp回弹效果

01-15

### 实现回弹效果在 UniApp 中实现 iOS 橡皮筋回弹效果可以通过 `scroll-view` 组件来完成。为了启用此功能，在设置组件属性时需注意特定参数配置[^3]。对于希望展示的示例代码如下所示： ```html <template> <view>  <scroll-view class="scrollViewClass" :scroll-y="true" :enhanced="true" :bounce-top="true" :bounce-bottom="true"> <block v-for="(item,index) in listData" :key="index"> <text>{{ item }}</text> </block> </scroll-view> </view> </template> <script> export default { data() { return { listData: ['Item 1', 'Item 2', 'Item 3'] } }, } </script> <style scoped> .scrollViewClass{ height: 300px; /* 设置高度 */ } </style> ``` 上述代码片段展示了如何通过调整 `scroll-view` 的属性来激活上下方向上的回弹效果，其中 `:scroll-y="true"` 表明允许纵向滚动；`:enhanced="true"` 是为了让增强特性起作用所必需设定的一项；而 `:bounce-top="true"` 和 `:bounce-bottom="true"` 则分别控制顶部和底部是否具有反弹动画。