您当前的位置: 首页 > 解决方案

微信小程序里面scroll-view组件的scroll-into-view属性失效问题

  • 作者: admin
  • 发布于 2018-05-26 13:57:36
  • 来源:  
  • 栏目:解决方案

导语: 问题 今天在重构之前写的一个小程序页面,在修改scroll-view组件之后,发现之前的scroll-into-view的跳转失效了

 

问题

今天在重构之前写的一个小程序页面,在修改scroll-view组件之后,发现之前的scroll-into-view的跳转失效了

之前的页面是一直正常的,所以官方的关于scroll-view的一些 tips 是不会关联了

tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

tip: scroll-into-view 的优先级高于 scroll-top

tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh

tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

再仔细看官方的说明,发现有这么一句

使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。

当前我的页面的scroll-view是能滚动的,不过说不定问题可能出在这里,因为高度设定的100%

先尝试着手动把scroll-view改成一个比较小的高度,再试试调整scroll-into-view的值,发现可以了,那问题就出在height上了。

原因

旧版本里面navBar是系统自带的,设置height: 100%是能正确展示。

新版本里面,在 app.json 里面配置了 navigationStyle: 'custom' ,然后配置了一个自定义样式的导航栏。在调整样式的时候,让内容区域 margin-top: 128px; ,这样就不会跟自定义的navBar冲突。

问题应该就出在这了。

scroll-view的父级只有margin-top,没有一个固定的高度,使得scroll-view的 height: 100% 失效,只要能重新计算出一个准确的高度,那问题就能完美解决。

解决

本来有想过调整scroll-view的父级,不过会是一个比较罗嗦的方法,所以想试试一些css里面的新技术:

scroll-view {
  height: calc(100vh - 128px);
}

基于 calc() 和 vh 来动态计算scroll-view的高度

试了下效果,正确运行!

为了保证在各个设备和系统下能正确工作,查了一下caniuse:

vh

calc

可以看到这两个特性在iOS和Andriod下都是早早就支持了,可以安心使用的



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部