Cara menggunakan input asli dalam uniapp

Uniapp ialah rangka kerja pembangunan merentas platform yang boleh membungkus aplikasi web ke dalam aplikasi Android dan iOS dengan mudah. Dalam aplikasi Uniapp, kita boleh menggunakan kawalan input asli melalui komponen.

Apabila menggunakan Uniapp, kami sering menghadapi masalah, iaitu, kami perlu menggunakan kawalan input asli Sebagai contoh, kami perlu memasukkan tarikh dalam input, dan kami mahu menggunakan pemilih tarikh asli menggunakan pemilih Tarikh untuk H5. Dalam kes ini, kami boleh menggunakan sistem acara asli dan pemalam uni-apl yang disediakan oleh uniapp untuk menggunakan kawalan input asli.

Bagaimana untuk menggunakan kawalan input asli?

Pertama sekali, dalam kod HTML, kita boleh menggunakan teg asli untuk mengisytiharkan kotak input dan mengikat atribut id padanya supaya kita boleh mendapatkan rujukan kepada kotak input kemudian dalam kod tersebut.

Seterusnya, kita perlu mendapatkan rujukan kepada kotak input melalui id elemen dalam kod JS, dan kemudian mengikat fungsi pengendali acara untuk mencetuskan paparan kawalan input asli melalui acara.

Berikut ialah contoh kod:

<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>

Dalam kod di atas, kami mula-mula mengisytiharkan kotak input dalam kod HTML, dan kemudian mendapatkan rujukan dan pengikatan kotak input dalam JS kod Pengendali acara bernama 'onFocus'.

Dalam fungsi pengendalian acara, kami mula-mula mendapatkan jenis sistem pengendalian peranti semasa melalui kaedah uni.getSystemInfoSync(), dan kemudian memaparkan kawalan input asli yang berbeza mengikut jenis sistem pengendalian yang berbeza.

Dalam kod di atas, apabila peranti semasa ialah peranti Android, kami menggunakan kaedah uni.showDatePicker() untuk memaparkan pemilih tarikh asli Apabila peranti semasa ialah peranti iOS, kami menggunakan uni.showDatePicker ( ) kaedah memaparkan pemilih masa asli.

Dengan cara ini, kita boleh menggunakan kawalan input asli dengan mudah tanpa terhad kepada jenis kotak input H5.

Atas ialah kandungan terperinci Cara menggunakan input asli dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!