Comment utiliser js pour obtenir l'effet de masquer la vue dans le projet uniapp

UniApp est un outil de développement multiplateforme basé sur le framework Vue.js. Il dispose d'une riche bibliothèque de composants et d'une API, qui peuvent développer rapidement des applications multiplateformes de haute qualité. Dans le développement réel, nous devons souvent contrôler l'affichage et le masquage de certains composants de vue sur la page. Cet article explique comment utiliser JavaScript pour obtenir l'effet de masquage des vues dans UniApp.

1. Utilisez la directive v-if pour obtenir un rendu dynamique des vues

Dans Vue.js, utilisez la directive v-if pour rendre les composants de vue de manière conditionnelle. La même chose s'applique dans UniApp Nous pouvons contrôler l'affichage et le masquage des composants de vue en fonction de la valeur vraie ou fausse d'une variable.

Par exemple, si nous devons contrôler l'affichage et le masquage d'un composant bouton, nous pouvons définir une variable isShowButton dans le modèle de données :

<template>
  <!-- 视图组件 -->
  <button v-if="isShowButton">按钮</button>
</template>
 
<script>
export default {
  data() {
    return {
      isShowButton: true   // 控制按钮组件的显示与隐藏
    }
  }
}
</script>

Lorsque la valeur de la variable isShowButton est vraie, le composant bouton sera rendu ; lorsque la valeur de la variable est false , le composant bouton sera masqué. Nous pouvons modifier dynamiquement la valeur de la variable isShowButton dans le programme pour obtenir un rendu dynamique du composant de vue.

2. Utilisez la commande v-show pour obtenir un rendu statique de la vue

Si le composant de vue que nous devons contrôler est rendu plusieurs fois sur la page, un rendu dynamique fréquent affectera les performances du programme. la commande v-show peut être utilisée pour contrôler l'affichage et le masquage des composants.

Le principe de v-show est d'afficher et de masquer les composants de la vue via l'attribut display du CSS. Lorsque la valeur de v-show est vraie, l'attribut d'affichage du composant est défini sur block et le composant sera affiché ; lorsque la valeur de v-show est false, l'attribut d'affichage du composant est défini sur none et le composant sera affiché ; caché.

Par exemple, si nous devons contrôler l'affichage et le masquage d'un composant image, nous pouvons utiliser l'instruction v-show :

<template>
  <!-- 视图组件 -->
  <img :src="imageUrl" v-show="isShowImage">
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: 'https://some.image.url',
      isShowImage: false   // 控制图片组件的显示与隐藏
    }
  }
}
</script>

Dans cet exemple, lorsque la valeur de la variable isShowImage est vraie, le composant image sera affiché ; lorsque la valeur de la variable est fausse, le composant image sera masqué. En modifiant la valeur de la variable isShowImage dans le modèle de données, nous pouvons obtenir un rendu statique et un masquage du composant image.

3. Utilisez JavaScript pour contrôler dynamiquement le style du composant de vue

Si nous avons besoin de contrôler plus finement l'affichage et le masquage du composant de vue (par exemple : nécessité de modifier la transparence, la position et d'autres propriétés du composant) , nous pouvons utiliser JavaScript pour contrôler dynamiquement le style du composant de vue .

Dans UniApp, les composants d'affichage de la page actuelle peuvent être exploités via la variable globale uni-app. Nous pouvons obtenir le composant spécifié via l'attribut $refs d'uni-app et changer son style.

Par exemple, nous devons contrôler dynamiquement la transparence d'un composant div, ce qui peut être réalisé en utilisant le code suivant :

<template>
  <!-- 视图组件 -->
  <div ref="myDiv">Hello, UniApp!</div>
</template>
 
<script>
export default {
  mounted() {
    // 获取div组件
    const myDiv = this.$refs.myDiv;
 
    // 设置div组件透明度为0.5
    myDiv.style.opacity = 0.5;
  }
}
</script>

Dans cet exemple, nous obtenons le composant div dans la fonction hook montée du composant et modifions la transparence en définissant son style. Nous pouvons utiliser JavaScript pour contrôler dynamiquement les styles des composants de vue en fonction des besoins du programme, obtenant ainsi un contrôle plus précis des composants sur la page.

Résumé

Grâce aux trois méthodes ci-dessus, nous pouvons utiliser JavaScript dans UniApp pour contrôler l'affichage et le masquage des composants de vue sur la page, réalisant ainsi la nécessité de changements de page dynamiques. Dans le développement réel, nous pouvons utiliser ces techniques de manière flexible pour développer rapidement des applications multiplateformes de haute qualité.

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!