Solution 1: Customize components through appletsscroll-viewImplement layout, dynamic modificationscroll-yattribute

The component and properties is introduced: developers.weixin.qq.com/miniprogram…

Disadvantages: Layout is limited to scrollview components, most requirements can not be met.

Scheme 2: Add a custom shell mask or outer containercatchtouchmoveThe event

<view class="mask-box" catchtouchmove="preventTouchMove"> <! -- Shell content --> </view>Copy the code

Disadvantages: elastic layer can not slide; It is suitable for customizing the shell layer without sliding.

Scheme 3: Add dynamically to the outermost elementposition:fixed style

<view style="{{isMask ? 'position:fixed; top: 0; left: 0; ':' '}} "> <! -- Content area --> </view>Copy the code

Disadvantages: The bottom page always goes back to the top when customizable shells are displayed; You can’t pass the test if you don’t have a good experience.

Scenario 4: Dynamic style modification (recommended)

Let’s set overflow: hidden for the page and overflow: auto for the outermost layout. Let’s set height to overflow: hidden for the page. As follows:

  • Height: 100vh, pull-up loading, pull-down refresh is invalid on Android, ios is ok. Applicable to the current page does not need to pull up, pull down refresh;

  • If overflow: Hidden is set to page, the entire Android page will not slide. Apply to the bottom layout without sliding;

  • Page set overflow: visible, all above problems can be resolved (recommended);

The code is as follows:

<view class="content {{isMask? 'page-hidden' : ''}}"> <! -- Content area --> </view>Copy the code

wxss:

page {
  overflow: visible;
  height: 100%;
}
.content{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.page-hidden{
  overflow: hidden
}
Copy the code

If you have any questions, please leave a comment