Comment utiliser la saisie native dans Uniapp

Uniapp est un framework de développement multiplateforme qui peut facilement intégrer une application Web dans des applications Android et iOS. Dans les applications Uniapp, nous pouvons utiliser des contrôles de saisie natifs via des composants.

Lorsque nous utilisons Uniapp, nous rencontrons souvent un problème, c'est-à-dire que nous devons utiliser des contrôles de saisie natifs. Par exemple, nous devons saisir une date dans la saisie et nous souhaitons utiliser le sélecteur de date natif au lieu d'utiliser le H5. sélecteur de date. Dans ce cas, nous pouvons utiliser le système d'événements natif et le plug-in uni-app fournis par uniapp pour utiliser le contrôle d'entrée natif.

Comment utiliser les contrôles de saisie natifs ?

Tout d'abord, dans le code HTML, nous pouvons utiliser la balise native pour déclarer la zone de saisie et y lier un attribut id afin que nous puissions obtenir une référence à la zone de saisie plus tard dans le code.

Ensuite, nous devons obtenir la référence à la zone de saisie via l'identifiant de l'élément dans le code JS, puis lier la fonction de traitement d'événement pour déclencher l'affichage du contrôle de saisie natif via l'événement.

Ce qui suit est un exemple de code :

<template>
  <view>
    <input type="text" :id="'input-' + uid" @focus="onFocus" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        uid: Math.random().toString(36).substr(2, 8),
      };
    },
    methods: {
      onFocus() {
        if (uni.getSystemInfoSync().platform === 'android')) {
          // 显示原生日期选择器
          uni.showDatePicker({
            success: (res) => {
              console.log(res);
            },
          });
        } else if (uni.getSystemInfoSync().platform === 'ios')) {
          // 显示原生时间选择器
          uni.showDatePicker({
            pickerMode: 'time',
            success: (res) => {
              console.log(res);
            },
          });
        }
      },
    },
  };
</script>

Dans le code ci-dessus, nous déclarons d'abord une zone de saisie dans le code HTML, puis obtenons la référence de la zone de saisie dans le code JS et lions un gestionnaire d'événements nommé 'onFocus' fonction.

Dans la fonction de gestion des événements, nous obtenons d'abord le type de système d'exploitation de l'appareil actuel via la méthode uni.getSystemInfoSync(), puis affichons différents contrôles d'entrée natifs en fonction des différents types de système d'exploitation.

Dans le code ci-dessus, lorsque l'appareil actuel est un appareil Android, nous utilisons la méthode uni.showDatePicker() pour afficher le sélecteur de date natif. Lorsque l'appareil actuel est un appareil iOS, nous utilisons la méthode uni.showDatePicker(). pour afficher le sélecteur de date natif.

De cette façon, nous pouvons facilement utiliser des contrôles de saisie natifs sans être limités au type de zone de saisie H5.

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!