Solve small program rolling penetration method

The problem

In the mini program custom pop-up box, when the contents of the inner pop-up box are rolled to the bottom, sliding will cause the bottom page to scroll (slide through).

Let’s look at the last picture

The solution

  • Add catchTouchMove =”funcName” to the outside of the popbox. After catchTouchMove is added, the page cannot slide, so you need to use scroll View in the content part.
<view class="mask" catchtouchMove ="funcName">Copy the code
  • The scroll view component is used for the content of the scroll frame, and the property of scroll x=”true” is enough. Remember to set the height of the scroll view. If the height is not set, the page may not slide
<view class="mask" catchtouchmove="funcName"> <view class="box"> <scroll-view scroll-y="true"> <view class="item">1</view> // ... </ scrollview > </view> </view>Copy the code

Complete test code

<view class="container"> <view class="list"> <view class="item">11</view> // ... </view> <view class="mask" catchtouchmove="funcName"> <view class="box"> <scroll-view scroll-y="true"> <view class="item">1</view> // ... </ scrollview > </view> </view> </view>Copy the code