微信小程序——日常踩坑（wx.pageScrollTo滚动时有抖动问题）

在小程序的开发过程中，有个功能是点击后需要往view层中添加数据内容，在添加后需要将内容滚动到最下面一条，以便有更好的用户体验。
开始是选择了使用wx.pageScrollTo接口，通过获取当前view层的高度来动态的调整pageScrollTo中的scrollTop值

wx.createSelectorQuery().select('.newsContent').boundingClientRect(function (rect) {// 使页面滚动到底部wx.pageScrollTo({scrollTop: rect.height,duration:1500})
}).exec()

到目前一切看起来好像很ok，但是。。。
在部分安卓机型中，例如华为等机型会在滚动的时候，触发一下拉刷新，也就是说，在触发wx.pageScrollTo之后，会先滚动到最顶端，触发刷新，再从最顶端滚动到我们需要的位置。（这是十分影响用户体验的，整体效果非常差）

在iphone机型中，在触发wx.pageScrollTo时，如果页面中有fixed定位的元素，定位的元素会跟随页面滚动，再回到位置上

这个问题非常的折磨人，因为pageScrollTo这个api不仅有bug这个bug在不同机型环境下竟然还不一样！！！之后我将pageScrollTo的滚动动画时间duration设置为0后，在真机上，都不会出现抖动的问题，因为这个过程其实是直接跳过了，但是直接出来整体的体验也十分糟糕，出现的非常的唐突。

最后，改使用scroll-view

<scroll-view scroll-y class="container" enable-back-to-top="true" style="height: {{windowHeight}}rpx;"  bindscroll="touchclose" scroll-with-animation="true" scroll-top="{{scrollTop}}"><!-- 内容 --><view>-----略------</view>
</scroll-view>

使用scroll-view后可以实现一样的滚动效果，而且是没有抖动的。效果还是比较好的，就我的这个项目来说，用scroll-view的bug要少些，体验要优于pageScrollTo。

ps：关于pageScrollTo的问题，导致安卓和iphone机型不同的原因可能是因为二者小程序运行时候的内核不同，关于该问题的相关的问题解决办法还没有找到比较合适的，小程序社区中有看到有人提出类似问题，但是官方暂时还没有修复pageScrollTo的bug。

微信小程序——日常踩坑（wx.pageScrollTo滚动时有抖动问题）相关推荐

微信小程序入门踩坑记（妥妥的干货，新手快快看过来）
初次上手微信小程序,各种踩坑各种百度,草草扫过官网的文字,呃....表示记不住不想看,然后看了一本入门基础, 诺,就这本啦(链接:https://pan.baidu.com/s/15hKlDNpowU ...
微信小程序开发踩坑合集
微信搜索:凯小白学编程回复小程序领取1000套小程序源码本文分享一下开发小程序是遇到的一些问题.展示了曾经开发过的两个小程序中遇到的坑下一篇文章预告:<Maven入门> ...
微信小程序开发踩坑日记
2017.12.29 踩坑记录引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录微信小程序设置元素满屏,横向直接w ...
微信小程序开发踩坑经验——小蜗社群
2019独角兽企业重金招聘Python工程师标准>>> 之前遇到并且解决的坑,这边也渐渐忘记了,在这里就不列出来了-- 1.wx.redirectTo和wx.navigateTo ...
微信小程序 NFC 踩坑记录
需求读取URL 写入URL 操作流程一.读取 1. 获取NFC适配器实例 this.NFCAdapter = wx.getNFCAdapter() 2. 开始监听贴卡 this.NFCAdapte ...
【浙政钉】微信-专有钉钉小程序-开发踩坑实记
文章目录 ⭐[浙政钉]微信-专有钉钉小程序-开发踩坑实记 ⭐ 创建项目 ⭐ 转化方案 ⭐ 政务钉钉调试 ⭐ 上传发布 ⭐[浙政钉]微信-专有钉钉小程序-开发踩坑实记最近有个需求,要将微信小程序转为浙 ...
微信小程序继续入坑指南
微信小程序继续入坑指南 wxml 类似于html 感觉和ejs灰常的相似数据绑定 js Page({data: {message: "hello world"} }) wxml ...
微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框
摘要: 不管是在普通的H5页面还是在微信小程序中,底部输入框一直是一大难题,因为键盘会在某些情况下遮挡信输入框一部分!值得庆幸的是:在微信小程序中,我们可以通过监听bindfocus来获取键盘的高度, ...
微信小程序初步入坑指南
微信小程序初步入坑小指南安装工具 developers.weixin.qq.com/miniprogram- 打开链接下载小程序云开发 app.json 为json格式的文件,为一个配置文件,属于全 ...

微信小程序——日常踩坑（wx.pageScrollTo滚动时有抖动问题）

微信小程序——日常踩坑（wx.pageScrollTo滚动时有抖动问题）相关推荐

最新文章

热门文章