Skip to content

微信小程序中IOS的回弹机制导致页面滑动 #64

Open
@jynba

Description

@jynba

最近做了一个表格左右滚动查看列的需求,发现在IOS中滚动的时候会出现一种非常Q弹的效果,查了一下发现,原来在IOS系统中存在回弹机制,也叫橡皮筋效果,即在往边界滑动的时候,可以划出边界,然后回弹回来,那么如何在微信小程序中禁用该效果呢?

最终解决方案

微信开放文档 中针对 scroll-view存在两个属性,enhancedbounces`

enhanced | boolean | false | 否 | 启用 scroll-view 增强特性,启用后可通过 ScrollViewContext 操作 scroll-view
bounces | boolean | true | 否 | iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)

可以进行如下设置:

<scroll-view scroll-y="true" bindscrolltolower="nextPage" enhanced="true" bounces="false"> 
  • 但在实际开发时我发现这样还是无法解决问题,通过查找资料我发现,需要控制 当scroll-view存在数据的时候才渲染,这样才能控制

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions