关于微信小程序 scroll-view 在IOS中所存在的一些问题

最新推荐文章于 2024-05-21 22:58:32 发布
最新推荐文章于 2024-05-21 22:58:32 发布
阅读量7.3k 收藏 1
点赞数
分类专栏： 前端基础学习 小程序 scroll-view 文章标签： 小程序 scroll-view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43311271/article/details/90403007
版权

最近在对小程序进行一些优化，发现 scroll-view 的两处问题

1、IOS手机下scroll-view会存在上拉加载时卡顿情况
暂时解决方法(设置高度为100%，问题：设置后不能触发上拉触底事件)：

          <scroll-view scroll-y="true" style="height:100%">
          </scroll-view>

2、IOS手机下scroll-view会存在点击不触发 navigator-hover 里的css
没有找到什么好的解决办法，故只有用view替代了scroll-view

空、
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
主要介绍了详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序scroll-view滚动到底部一直抖动
qq_39931894的博客
10-21 1711
微信小程序滚动到底部一直抖动 微信小程序中使用了scroll-view之后，滚动到底部就会一直在抖动。 解决办法： 1.把scroll-view里面的fixed元素全部放到外面，里面不要有fixed元素 2.用page默认的滚动
uniapp使用scroll-view，在iphone上，顶部底部上下拉，会产生抖动
qq_37698249的博客
09-26 1960
造成抖动的原因是因为在scroll-view上，添加了scroll-top属性（用作锚点定位） 改用生命周期onPageScroll，来实现滚动加载 锚点定位改用 uni.pageScrollTo({ scrollTop: 0, duration: 300 });
uni踩坑笔记 - 禁用scroll-view在IOS端下的橡皮筋效果
最新发布
weixin_46737742的博客
05-21 191
微信小程序端使用scroll-view组件绘制页面，在IOS真机中会出现上下拉动回弹的橡皮筋效果，部分页面想要禁用该默认效果。
去除IOS微信下自带滚动回弹（橡皮筋效果）
dk123sw的博客
12-03 2953
先说结论： 可以去除滚动回弹,根据不同情况使用不同的方式。 1.程序内没有滚动 直接使用下面代码轻轻松松没毛病 document.body.addEventListener('touchmove',function(e){ e.preventDefault() },{ passive: false }) 2.有滚动的情况 下面是去掉微信自带的回弹的demo <!...
【小程序】scroll-view在ios机型滚动不流畅
lily19970107的博客
11-27 724
这个问题不是滚动补流程的问题，是scrollView高度设置的有问题，因为项目是自定义navbar和tabbar，scrollView的高度应该设置为windowHeight-navbarHeight-底部的padding,有的页面没有就可以减底部的padding。可以为scrollView设置。
小程序IOS页面下拉回弹效果
懒羊羊我小弟的博客
08-12 4575
小程序IOS页面下拉回弹效果 ​ 小程序在ios系统上的橡皮筋回弹效果，是ios特有的，目前小程序没有特有的方法去控制。根据业务需求不想要这个回弹的效果，故此记录一下解决方案； 方案一：当页面内容比较少，且没有用到scroll-view组件时 ​ 在页面配置中添加：{"disableScroll": true} ，这个属性会禁止整个页面滚动。不适合页面有滚动区域的情况； 方案二：当页面上有滚动区域，使用了scroll-view时 ​ 在微信的官方文档scroll-view组件，上记录了两个属性，当en
ios下，微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
hahahhahahahha123456的博客
02-28 1066
问题现象 这个问题是最近在优化小程序代码时发现的。 在ios环境下，微信小程序的scrollview组件包裹着一个position：fixed的view。 当在scrollview组件上滑动时，这个view会疯狂抖动。 直接上图吧： 下面是简化后的代码： <view class="main"> <scroll-view scroll-y="{{true...
微信小程序scroll-view的scroll-into-view无效问题解决办法
weixin_55109596的博客
02-14 7735
轻松解决微信小程序scroll-view的scroll-into-view无效问题
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度，现通过样式和布局实现高度自适应不设定高度
微信小程序scroll-view的滚动条设置实现
10-15
本文主要探讨了如何在微信小程序的 `scroll-view` 组件中设置滚动条的样式和行为，尤其是在 Android 和 iOS 平台上的差异处理。 首先，微信小程序的官方文档并未直接提供控制 `scroll-view` 滚动条显示和样式的属性...
小程序scroll-view安卓机隐藏横向滚动条的实现详解
10-16
在微信小程序中，`scroll-view` 组件是一个用于实现可滚动内容区域的组件，特别适合在有限的空间内展示大量数据。在本问题中，开发者遇到了一个特定于安卓设备的问题，即在使用 `scroll-x` 属性实现横向滚动时，滚动...
微信小程序 ios 13.6 版本 scroll-view 无法滑动
FE-阿阳的博客
05-25 2160
问题描述 在 ios 13.6 版本中，页面有个 scroll-view 无法滚动，找了很长时间的问题，前提是确保 scroll-view 元素高度正常，设置了可滑动的方向，在其他手机上没问题，以下只是个人遇到的场景，并不一定通用 问题原因 本人遇到的问题原因是：页面有个全局的弹窗，定位为 fixed 布局，为了做动画效果，使用 transform: scale(0) => transform: scale(1); 的过渡，但是在 ios 13.6 版本中 transform: scale(0) 有
ios下滚动卡顿不流畅问题及解决
immocha的博客
01-22 2390
用webview嵌套制作的小程序，无限上拉加载列表，开始用的是body的scroll来加载，安卓端表现良好，但是在苹果手机的微信中打开，滚两下就不滚了，体验很糟糕。 后来改用iScroll来做列表，IOS的体验好了一些，但是安卓的体验大不如前，所以区别IOS和Andriod两端，分别使用iScroll和body的原生scroll来做。 因为ios的弹性效果，滚动还是有些奇怪，上拉的时候会被拉起一截空白，所以加了一段代码，禁用了列表页的弹性效果。
微信小程序scroll-view无法下拉刷新问题（已解决）
weixin_47077674的博客
08-01 4835
bug介绍及复现 在最近开发小程序的时候遇到了一个bug，当你动态赋予scroll-view高度的时候，scroll-view的下拉刷新功能可能会只能拉到一半就卡住，并且无法下拉。如下图所示 ![请添加图片描述](https://img-blog.csdnimg.cn/dcf865745e184c5da5f78eb59d6d2ecd.gif 产生原因 应该是scroll-view元素的下拉位置在元素渲染时就确定了，而我们赋予scroll-view的高度更改了下拉位置，导致下拉的时候没法拉到位 解决方法 在s
微信小程序 ios 橡皮筋效果踩坑
Sakura_Codeboy的博客
01-21 2799
scroll-view在ios上面会继承原来 ios 的UI 框架所以会出现“橡皮筋”效果，即上拉到最顶部的时候还可以继续上拉放手会回弹（左右同理） 解决方案 1.在不需要滚动的页面可以全局禁用滚动 { “disableScroll”:true } 2.使用了 scroll-view 的情况下，可以使用 <scroll-view :enhanced="true" :bounces="false“ > 这两个属性禁用橡皮筋效果（不知道为啥在微信文档上没有看
微信小程序ios端overflow:auto滚动卡顿
weixin_30372371的博客
03-22 489
解决方法一： view{ overflow:auto; -webkit-overflow-scrolling: touch; } 　　这种方法虽然可以让列表滚动，但会伴随副作用（比如fixed元素会跟随滚动再恢复位置），不推荐。 解决方法二： 直接使用微信小程序提供的 “ scroll-view " 组件。 <scroll-view scroll-y sty...
小程序scroll-view简单使用,子元素换行在ios中出现子元素不换行问题,没有顶部对齐的问题;去除滚动条样式；子元素文字不换行
hangGe0111的博客
07-31 959
1.代码 1.1.wxml <!-- 图片，横向scroll-x必须设置为true --> <scroll-view class='parentone' scroll-x="{{true}}"> <view class='sonone' style='background-color:red;'></view> <view cla...
小程序中scroll-view标签的bindscroll属性不生效的解决方案
weixin_43968782的博客
04-23 1204
<scroll-view class="wrapper" bindscroll="scrollView"> <block class="a"></block> <block class="b"></block> </scroll-view> <scroll-view class="wrapper" bindscroll="scrollView"> <view> <block class="a"&
微信小程序scroll-view scroll-into-view
10-13
微信小程序中的 scroll-view 组件可以实现滚动视图的效果，而 scroll-into-view 属性可以让指定的某个子组件滚动到视图中。当 scroll-into-view 的值为某个子组件的 id 时，该子组件就会滚动到 scroll-view 的顶部或底部，具体取决于该子组件在 scroll-view 中的位置。 例如，以下代码可以让 id 为 "item-5" 的子组件滚动到 scroll-view 的顶部： ``` <scroll-view scroll-into-view="item-5"> <view id="item-1">...</view> <view id="item-2">...</view> <view id="item-3">...</view> <view id="item-4">...</view> <view id="item-5">...</view> <view id="item-6">...</view> <view id="item-7">...</view> </scroll-view> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值