Bagaimana untuk melumpuhkan tekan halaman dalam uniapp

Dengan perkembangan Internet mudah alih, penggunaan peranti mudah alih kami semakin meluas, dan pelbagai isu mengenai penggunaan peranti mudah alih turut timbul. Apabila menggunakan peranti mudah alih, kadangkala kita perlu membuka papan kekunci, seperti menaip, mencari, dll. Walau bagaimanapun, disebabkan oleh perbezaan antara sistem iOS dan Android, beberapa masalah mungkin berlaku apabila membuka papan kekunci Contohnya, papan kekunci di bawah sistem iOS akan menolak seluruh halaman, tetapi di bawah sistem Android ia tidak akan. Artikel ini akan memperkenalkan cara untuk melumpuhkan tolak halaman dalam uniapp.

Latar Belakang

Di bawah iOS, membuka papan kekunci akan menolak keseluruhan halaman ke atas supaya pengguna dapat melihat apa yang sedang dimasukkan. Walau bagaimanapun, apabila terdapat banyak kotak input, ketinggian yang ditolak ke atas pada halaman boleh menjejaskan elemen lain, menyebabkan kekeliruan reka letak. Di bawah sistem Android, papan kekunci akan menutup kotak input, tetapi keseluruhan halaman tidak akan ditolak ke atas. Oleh itu, dalam pembangunan uniapp, kita perlu mencari jalan untuk menyelesaikan masalah ini supaya halaman tidak akan ditolak kerana membuka papan kekunci.

Penyelesaian

Dalam uniapp, kita boleh mendengar acara pembukaan dan penutupan papan kekunci dan melaraskan ketinggian halaman untuk mencapai kesan larangan menolak halaman.

Dengar acara pembukaan dan penutup papan kekunci

Dalam uniapp, kita boleh mendengar acara pembukaan dan penutup papan kekunci melalui dua kaedah: uni.onKeyboardShow dan uni.onKeyboardHide. Menggunakan dua kaedah ini, kita boleh mendapatkan maklumat seperti ketinggian papan kekunci dan masa peristiwa itu dicetuskan. Di sini, kita perlu menggunakan kaedah uni.createSelectorQuery() untuk mendapatkan maklumat saiz elemen halaman dan memanipulasi halaman apabila papan kekunci dibuka atau ditutup.

export default {
    data() {
        return {
            // 页面高度
            pageHeight: '',
            // 输入框距离页面底部的距离
            marginTop: '',
            // 页面是否被上推
            isPushed: false
        }
    },
    mounted() {
        this.getPageHeight()
    },
    methods: {
        // 获取页面高度和输入框的位置信息
        getPageHeight() {
            uni.createSelectorQuery().select('.input-box').boundingClientRect((rect) => {
                // 记录输入框距离页面底部的距离
                this.marginTop = this.pageHeight - rect.bottom
            }).exec()
            uni.createSelectorQuery().select('.page').boundingClientRect((rect) => {
                // 记录页面高度
                this.pageHeight = rect.height
            }).exec()
        },
        // 监听键盘打开事件
        onKeyboardShow(e) {
            // 获取键盘高度
            let keyboardHeight = e.height
            // 页面上推
            this.pushPage(keyboardHeight)
        },
        // 监听键盘关闭事件
        onKeyboardHide() {
            // 页面还原
            this.restorePage()
        },
        // 页面上推
        pushPage(keyboardHeight) {
            if (!this.isPushed) {
                this.isPushed = true
                // 计算上推的高度
                let pushHeight = keyboardHeight - this.marginTop
                if (pushHeight > 0) {
                    uni.pageScrollTo({
                        scrollTop: pushHeight,
                        duration: 100
                    })
                }
            }
        },
        // 页面还原
        restorePage() {
            if (this.isPushed) {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 100
                })
                this.isPushed = false
            }
        }
    }
}

Pertama, dapatkan ketinggian halaman dan maklumat kedudukan kotak input dalam fungsi mounted(). Kemudian, dalam kaedah onKeyboardShow(), dapatkan ketinggian papan kekunci, kira jarak tekan tubi dan lakukan operasi tekan tubi halaman. Akhir sekali, pulihkan keadaan asal halaman dalam kaedah onKeyboardHide().

Pengiraan dinamik ketinggian halaman dan maklumat kedudukan kotak input

Dalam kod di atas, kami menggunakan dua kaedah uni.createSelectorQuery() untuk mendapatkan ketinggian halaman dan maklumat kedudukan kotak input. Walau bagaimanapun, kaedah ini perlu dilaksanakan dalam fungsi mounted() Jika dipanggil sebelum halaman dimuatkan, maklumat elemen halaman tidak akan diperoleh dengan betul. Oleh itu, kita juga perlu menggunakan kaedah pengiraan dinamik untuk mendapatkan maklumat tentang elemen halaman.

<style>
  .page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .input-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 1000;
  }
</style>

Mula-mula, tetapkan ketinggian halaman kepada 100vh mengikut gaya supaya ketinggian halaman boleh dilaraskan secara dinamik berdasarkan ketinggian skrin peranti. Kemudian, tetapkan position: absolute dalam gaya bekas kotak input, dan tetapkan bottom: 0 supaya kotak input sentiasa berada di bahagian bawah halaman. Dengan cara ini, apabila papan kekunci muncul, kotak input tidak akan terjejas.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara untuk melumpuhkan tolak halaman dalam uniapp. Dengan mendengar acara pembukaan dan penutupan papan kekunci dan melaraskan ketinggian halaman apabila acara dicetuskan, kita boleh mencapai kesan menghalang halaman daripada ditolak ke atas kerana membuka papan kekunci. Apabila membangunkan aplikasi mudah alih, adalah penting untuk memahami ciri peranti mudah alih dan penyelesaian kepada pelbagai masalah, yang akan membantu membangunkan aplikasi mudah alih yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan tekan halaman dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!