Uniapp interdit le glissement manuel des vues

Avant-propos

uniapp est un framework de développement cross-end qui vous permet d'utiliser la syntaxe vue pour développer de petits programmes, H5 et APP, permettant aux développeurs de développer plus efficacement des applications multiplateformes. Mais lorsque vous utilisez Uniapp pour développer de petits programmes, vous pouvez rencontrer certains problèmes. Cet article explique comment désactiver le glissement manuel des vues dans les mini-programmes.

Description du problème

Lors du développement de petits programmes dans uniapp, il est parfois nécessaire d'implémenter un effet de glissement dans la vue. Afin d'obtenir cet effet, nous utilisons généralement scrollview et le plaçons dans une vue. Mais parfois, nous ne souhaitons pas que les utilisateurs fassent glisser manuellement cette vue, car le glissement manuel peut affecter la mise en page de la page entière. Alors, comment empêcher cette vue de glisser manuellement ?

Solution

Dans uniapp, nous pouvons obtenir cet effet en définissant l'attribut scroll-y et l'attribut catchtouchmove du composant scroll-view. Parmi eux, lorsque l'attribut scroll-y est vrai, cela signifie que le glissement vertical peut être effectué, et lorsque l'attribut catchtouchmove est vrai, cela signifie que les événements tactiles ne peuvent pas bouillonner.

Les opérations spécifiques sont les suivantes :

1. Ajoutez le composant scroll-view dans la vue et définissez les attributs scroll-y et catchtouchmove sur true.

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

2. Dans le CSS global du mini programme, ajoutez le code suivant pour empêcher le composant de vue de glisser.

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

Puisque nous avons mis le composant scroll-view dans une vue, il nous suffit d'interdire au composant view de glisser pour obtenir l'effet "désactiver le glissement". Nous définissons la hauteur du HTML et du corps à 100 % et le débordement est masqué dans le CSS global. De cette façon, nous interdisons le glissement de la page entière et le composant d'affichage ne peut pas glisser.

Cependant, cette approche peut poser un problème. Lorsque vous souhaitez utiliser des opérations de glissement dans la page, nous devons à nouveau définir l'attribut overflow des composants html et body sur auto. Mais cette approche peut affecter les styles d’autres composants. Afin d'éviter que cela ne se produise, nous devons minimiser l'impact sur les autres composants lors de la mise en œuvre du « pas de glissement ».

En résumé, les étapes pour désactiver le glissement manuel des vues dans uniapp sont les suivantes :

1. Ajoutez le composant scroll-view à la vue et définissez les attributs scroll-y et catchtouchmove sur true.

2. Ajoutez le code suivant dans le CSS global du mini programme :

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

De cette façon, nous pouvons obtenir l'effet d'interdire le glissement manuel de la vue tout en ayant moins d'impact sur les styles des autres composants.

Résumé

Le framework uniapp fournit aux développeurs de nombreuses fonctions et API pratiques, mais nous pouvons parfois avoir besoin d'effectuer certains paramètres et ajustements lors de la mise en œuvre de certaines fonctions. Cet article explique comment désactiver le glissement manuel des vues dans un mini-programme, à l'aide des propriétés de défilement de la vue et des paramètres CSS globaux. J'espère que cet article pourra être utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!