uniapp prohibits manual sliding of views

Preface

uniapp is a cross-end development framework that allows you to use vue syntax to develop small programs, H5 and APPs, allowing developers to develop cross-platform applications more efficiently. But when using uniapp to develop small programs, you may encounter some problems. This article introduces how to disable manual sliding of views in mini programs.

Problem description

When developing small programs in uniapp, sometimes it is necessary to implement a sliding effect in the view. In order to achieve this effect, we usually use scrollview and put it in a view. But sometimes we don't want users to manually slide this view, because manual sliding may affect the layout of the entire page. So how to make this view unable to slide manually?

Solution

In uniapp, we can achieve this effect by setting the scroll-y attribute and catchtouchmove attribute of the scroll-view component. Among them, when the scroll-y attribute is true, it means that vertical sliding can be performed, and when the catchtouchmove attribute is true, it means that touch events are prevented from bubbling.

The specific operations are as follows:

1. Add the scroll-view component in the view, and set the scroll-y and catchtouchmove properties to true.

<view>
<scroll-view scroll-y="true" catchtouchmove="true">
</scroll-view>
</view>

2. In the global CSS of the mini program, add the following code to prevent the view component from sliding.

html,body{
  height:100%;
  overflow:hidden;
}

Since we put the scroll-view component in a view, we only need to prohibit the view component from sliding to achieve the "disable sliding" effect. We set the height of html and body to 100% and overflow to hidden in global CSS. In this way, we prohibit the sliding of the entire page, and the view component cannot slide.

However, there may be a problem with this approach. When you want to use sliding operations in the page, we must set the overflow attribute of the html and body components to auto again. But this approach may affect the styles of other components. In order to avoid this from happening, we need to minimize the impact on other components when implementing "no sliding".

To sum up, the steps to disable manual sliding of the view in uniapp are as follows:

1. Add the scroll-view component to the view and set the scroll-y and catchtouchmove properties to true .

2. Add the following code to the global CSS of the mini program:

html,body{
  height:100%;
  overflow:hidden;
}

In this way, we can achieve the effect of prohibiting manual sliding of the view while having less impact on the styles of other components. .

Summary

The uniapp framework provides developers with many convenient functions and APIs, but sometimes we may need to make some settings and adjustments when implementing certain functions. This article introduces how to disable manual sliding of views in a mini program, using the scroll-view properties and global CSS settings. Hope this article can be helpful to everyone.

The above is the detailed content of uniapp prohibits manual sliding of views. For more information, please follow other related articles on the PHP Chinese website!