Shulou(Shulou.com)06/02 Report--

This article mainly introduces Mini Program how to achieve a custom bullet layer to prohibit page scrolling, the article is very detailed, has a certain reference value, interested friends must read it!

Scheme 1: implement the layout through Mini Program custom component scroll-view, and dynamically modify scroll-y attributes. Disadvantages: the layout is limited to scroll-view components, and most of the requirements can not be met.

Option 2: add catchtouchmove events to custom bullet layer masks or outer containers

```js bullet layer content ````disadvantages: the bullet layer cannot be slipped; it is suitable for custom layouts that do not slide.

Scenario 3: dynamically add position:fixed styles to the outermost elements

```js content zone```` disadvantages: when isMask is true, the page will always go back to the top; the experience is not good

Scenario 4: dynamically modify the style processing (recommended)

Principle: Mini Program API gives us to dynamically modify the page style, so let's change our way of thinking. At the beginning, we set * overflow:hidden*, outermost layout settings * overflow:auto* for page, but there are still holes when setting the height property. The results are as follows:-* when height:100vh*, pull-up loading and pull-down refresh fail on Android, and ios is fine; it is suitable for the current page without pull-up or drop-down refresh. When setting * overlfow:hidden;* in page*, the Android page cannot be scanned as a whole. Applicable to the underlying layout does not need to slide * page* setting * overflow: visible*, all the above problems are solved as follows: wxml```jspage {overflow: visible; height: 100%;} .group-buying-list {height: 100%; overflow: auto;-webkit-overflow-scrolling: touch;}. Page-hidden {overflow: hidden} ```above is all the contents of the article "how to achieve a custom bullet layer to prohibit page scrolling in Mini Program". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.