uniapp ajoute dynamiquement des vues

Ces dernières années, avec la popularité des applications mobiles, les développeurs ont une demande croissante de création rapide d'applications mobiles. Dans le développement d'applications mobiles, UniApp, en tant que cadre de développement mobile multiplateforme, est privilégié par de plus en plus de développeurs. L'un des avantages d'UniApp est qu'il possède une bonne expérience de développement et une riche bibliothèque de composants. Il peut non seulement créer rapidement des pages de base, mais également implémenter une logique interactive complexe.

Cet article présentera comment UniApp peut augmenter et ajouter dynamiquement des vues pour répondre aux besoins de mise en œuvre d'une logique d'interaction complexe.

Tout d'abord, nous devons clarifier le concept de base d'UniApp. Dans UniApp, une page est composée de plusieurs composants. Chaque composant peut représenter une vue ou un comportement. Différents composants peuvent être imbriqués et combinés les uns avec les autres pour former diverses pages complexes.

Ensuite, voyons comment ajouter des composants de manière dynamique. Prenons comme exemple une exigence simple : sur une page, cliquez sur un bouton pour ajouter dynamiquement une zone de texte.

Tout d'abord, définissez un composant de bouton sur la page. Lorsque vous cliquez sur le bouton, ajoutez une zone de texte. Le code spécifique est le suivant :

<template>
  <view>
    <button @tap="addInput">添加文本框</button>
    <view class="input-container">
      <!-- 这里是我们要添加的文本框 -->
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    addInput() {
      // 动态添加文本框的操作
    }
  }
}
</script>

Dans la méthode addInput de l'événement click du bouton, nous devons ajouter dynamiquement un composant de zone de texte. UniApp fournit une méthode de composants dynamiques, qui peut être implémentée via des composants de composants. Le code spécifique est le suivant :

<template>
  <view>
    <button @tap="addInput">添加文本框</button>
    <view class="input-container">
      <!-- 这里是我们要添加的文本框 -->
      <component :is="inputComponent"></component>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputComponent: 'input'
      // 这里我们先设置为原生的input组件，后面会解释如何动态改变组件类型
    }
  },
  methods: {
    addInput() {
      // 动态添加文本框的操作
      this.inputComponent = 'input' // 这里我们先设置为原生的input组件
    }
  }
}
</script>

Dans le code ci-dessus, nous lions dynamiquement un composant via inputComponent et indiquons au composant le type de composant à restituer via la directive :is.

Maintenant, nous devons mettre en œuvre l'opération d'ajout dynamique de zones de texte. Le code spécifique est le suivant :

<template>
  <view>
    <button @tap="addInput">添加文本框</button>
    <view class="input-container">
      <!-- 这里是我们要添加的文本框 -->
      <component :is="inputComponent"></component>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputComponent: 'input'
      // 这里我们先设置为原生的input组件，后面会解释如何动态改变组件类型
    }
  },
  methods: {
    addInput() {
      // 动态添加文本框的操作
      this.inputComponent = 'input' // 这里我们先设置为原生的input组件
      
      // 使用uni.$createComponent创建一个新的组件实例
      const inputInstance = uni.$createComponent({
        // 组件的选择器
        selector: 'dynamic-input',
        // 组件的模板
        template: '<input v-model="value" placeholder="请输入内容"></input>',
        // 组件的数据
        data() {
          return {
            value: ''
          }
        }
      })
      
      // 使用this.$refs获取到容器内的dom对象
      const containerDom = this.$refs.inputContainer.$el
      
      // 使用uni.$app.$mount将组件实例挂载到dom容器中
      inputInstance.$mount(containerDom)
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons d'abord la méthode uni.$createComponent pour créer une nouvelle instance de composant dynamique, puis utilisons this.$refs pour obtenir l'objet DOM de le conteneur, puis utilisez uni. La méthode $app.$mount monte l'instance du composant dans le conteneur dom.

Maintenant, nous pouvons exécuter le code, cliquer sur le bouton et ajouter avec succès une zone de texte de manière dynamique. Cependant, si nous souhaitons modifier dynamiquement le type de composant, par exemple en ajoutant un bouton radio, nous devons modifier dynamiquement la valeur de inputComponent, puis réexécuter l'opération d'ajout dynamique du composant.

Cet article explique comment augmenter et ajouter dynamiquement des vues dans UniApp en créant dynamiquement des instances de composants, et explique comment modifier dynamiquement les types de composants. J'espère que cet article pourra être utile aux développeurs mobiles.

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!