Uniapp définit la hauteur de défilement

Uniapp est un outil de développement d'applications multiplateforme basé sur le framework Vue.js, qui peut rapidement créer des applications pour plusieurs plateformes (iOS, Android, H5). Lors du développement avec Uniapp, vous rencontrez souvent le besoin de définir la hauteur de défilement. Par conséquent, cet article explique comment définir la hauteur de défilement dans Uniapp.

1. Définir la hauteur de défilement de la page

1. Ajouter une balise de défilement dans le modèle

Lors de l'écriture de la page, nous pouvons ajouter une balise de défilement dans le modèle pour réaliser le défilement de la page. Dans le même temps, nous devons également définir la hauteur de la vue de défilement afin que la page puisse défiler.

Par exemple, ajoutez le code suivant au modèle :

<template>
  <scroll-view style="height: 1000rpx;">
    <!-- 页面内容 -->
  </scroll-view>
</template>

Dans cet exemple, nous définissons la hauteur de la vue de défilement à 1000rpx.

2. Calculer la hauteur de défilement dans la fonction de crochet du cycle de vie de la page

En plus de définir la hauteur de la vue de défilement dans le modèle, nous pouvons également calculer la hauteur de défilement dans la fonction de crochet du cycle de vie de la page.

Par exemple, dans la fonction hook onLoad de la page, nous pouvons calculer la hauteur de défilement comme suit :

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 页面内容 -->
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        scrollHeight: 0
      };
    },
    onLoad() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().screenHeight;
      // 计算scroll-view的高度
      const scrollHeight = screenHeight - 100;  // 100为非内容区高度
      // 更新scroll-view的高度
      this.scrollHeight = scrollHeight;
    }
  }
</script>

Dans cet exemple, nous utilisons une variable scrollHeight pour représenter la hauteur de la vue de défilement, et sa valeur initiale est 0. Dans la fonction hook onLoad de la page, nous avons obtenu la hauteur de l'écran via l'API uni.getSystemInfoSync() et calculé la hauteur de la vue de défilement en fonction de la hauteur de l'écran. Enfin, nous attribuons la hauteur de défilement calculée à la variable scrollHeight, mettant ainsi à jour la hauteur de défilement de la page.

2. Définir la hauteur de défilement du composant

En plus de la hauteur de défilement de la page, nous devons parfois définir la hauteur de défilement du composant. Uniapp fournit un mode mixin pour partager du code entre plusieurs composants. Nous pouvons utiliser le modèle mixin pour définir la hauteur de défilement du composant.

1. Créer un mixin

Tout d'abord, nous devons créer un mixin dans le projet Uniapp. Créez un nouveau fichier "scrollHeightMixin.js" dans le dossier "/common/mixins/" dans le répertoire racine du projet pour stocker notre code mixin.

export default {
  data() {
    return {
      scrollHeight: 0
    };
  },
  mounted() {
    // 获取屏幕高度
    const screenHeight = uni.getSystemInfoSync().screenHeight;
    // 计算scroll-view的高度
    const scrollHeight = screenHeight - 100;   // 100为非内容区高度
    // 更新scroll-view的高度
    this.scrollHeight = scrollHeight;
  }
};

Dans cet exemple, nous définissons un mixin appelé scrollHeightMixin, qui contient une variable nommée scrollHeight. Dans la fonction hook montée du mixin, nous utilisons l'API uni.getSystemInfoSync() pour obtenir la hauteur de l'écran et calculons la hauteur de la vue de défilement en fonction de la hauteur de l'écran. Enfin, nous attribuons la hauteur de défilement calculée à la variable scrollHeight pour obtenir la hauteur de défilement du composant.

2. Utilisation de mixins dans les composants

Ensuite, nous devons introduire le mixin précédemment défini dans le composant. Ajoutez le code suivant dans la balise script du composant :

<script>
  import ScrollHeightMixin from "@/common/mixins/scrollHeightMixin.js";
  export default {
    mixins: [ScrollHeightMixin],
    // 组件其他内容
  };
</script>

Dans cet exemple, nous utilisons l'instruction import pour introduire le mixin précédemment défini dans le composant. Ensuite, nous ajoutons le mixin à la propriété mixins afin que le composant puisse utiliser la variable scrollHeight définie dans le mixin.

Enfin, nous pouvons utiliser la balise scroll-view dans la balise template du composant et définir la hauteur de la scroll-view sur la valeur de la variable scrollHeight définie dans le mixin.

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 组件内容 -->
  </scroll-view>
</template>

Dans cet exemple, nous définissons la hauteur de scroll-view sur la valeur de la variable scrollHeight définie dans le mixin.

Résumé :

Cet article explique comment utiliser Uniapp pour définir la hauteur de défilement de la page et la hauteur de défilement des composants. Pour la hauteur de défilement de la page, nous pouvons définir la hauteur de la vue de défilement dans le modèle ou calculer la hauteur de défilement dans la fonction hook de cycle de vie de la page. Pour la hauteur de défilement des composants, nous pouvons utiliser le mode mixin pour y parvenir. J'espère que cet article vous sera utile pour définir la hauteur de défilement dans le développement Uniapp.

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!