Bagaimana untuk melaksanakan fungsi muat semula tarik turun dan muat naik dalam uniapp

Dengan peningkatan berterusan pembangunan terminal mudah alih, permintaan pembangun untuk aplikasi mudah alih juga semakin tinggi. Dalam kebanyakan aplikasi mudah alih, tarik ke bawah untuk menyegarkan dan tarik ke atas untuk memuatkan adalah fungsi yang lebih penting Untuk meningkatkan pengalaman pengguna, banyak aplikasi mudah alih akan menambah dua fungsi ini. Di sini, kami akan memperkenalkan cara melaksanakan tarik-turun untuk memuat semula dan tarik-turun untuk memuatkan lebih banyak fungsi dalam uniapp.

1. Pengenalan kandungan asas

Uniapp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js, yang menyokong penulisan sekali dan penerbitan berbilang hujung. Disebabkan ciri merentas platformnya yang baik dan banyak API asli terbina dalam, pembangun boleh menggunakan API ini terus dalam uniapp tanpa perlu mempelajari bahasa pembangunan lain.

Dalam uniapp, muat semula tarik-turun dan pemuatan tarik-turun adalah lebih banyak komponen terbina dalam, iaitu, <uni-scroll-view> Melalui kawalan ini, kami boleh melaksanakan fungsi muat semula tarik-turun dan muat turun tanpa melibatkan modul lain .

2. Muat semula tarik turun

Muat semula tarik turun bermaksud apabila kandungan halaman ditarik ke bawah, peristiwa dicetuskan, data terkini diperoleh daripada pelayan dan data bagi halaman semasa diganti. Dalam bab ini, kami akan memperkenalkan cara menggunakan komponen <uni-scroll-view> untuk melaksanakan fungsi muat semula tarik-turun dalam uniapp.

1. Buka halaman

Sebelum membangunkan halaman uniapp, anda perlu terlebih dahulu memasukkan alat projek Hbuilder X dan mencipta projek uniapp baharu Memandangkan kami mahu untuk melaksanakan penyegaran tarik-turun dan Untuk fungsi pemuatan tarik-turun, anda perlu terlebih dahulu mengesahkan bahawa anda menggunakan pustaka komponen uni-ui, jadi anda mesti memilih uni-ui semasa membuat halaman pemilihan projek baharu.

2. Tulis kod

Berikut ialah kaedah pelaksanaan khusus:

Nota: Kod sampel hanya untuk rujukan dan tidak menjamin 100% ketepatan.

kod index.vue:

<!-- 下拉刷新 -->
<uni-scroll-view
    class="content"
    :enable-back-to-top="true"
    @downRefresh="onDownRefresh" 
    refresher-default-style
    :refresher-triggered="isRefreshing"
    refresher-loading="{{isLoading}}"
    refresher-enabled="{{true}}"
    style="height:100vh;"
>
    <!--该区域可以放置需要下拉刷新的内容-->
    <!--......-->
    <div class="list-view">
        <ul>
            <li v-for="item in items" :key="item.id">{{item.text}}</li>
        </ul>
    </div>
</uni-scroll-view>

<script>
export default {
    data() {
        return {
            items: [
                {text: 'item1', id:1},
                {text: 'item2', id:2},
                {text: 'item3', id:3},
                {text: 'item4', id:4},
                {text: 'item5', id:5},
                {text: 'item6', id:6},
                {text: 'item7', id:7},
                {text: 'item8', id:8},
                {text: 'item9', id:9},
                {text: 'item10', id:10}
            ],
            isRefreshing: false,
            isLoading: false,
        }
    },
    methods: {
        onDownRefresh() {
            this.isRefreshing = true;
            setTimeout(() => {
                this.isRefreshing = false;
                uni.stopPullDownRefresh()
            }, 2000)
        },
    }
}
</script>

<style>
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

Selepas langkah di atas, kita boleh melaksanakan fungsi muat semula tarik-turun. Khususnya, ini dicapai melalui acara <uni-scroll-view> komponen downRefresh Apabila acara dicetuskan oleh tarik-turun, kami menetapkan isRefreshing kepada true dan status yang dimuat semula dipaparkan. Selepas masa tamat, kami tetapkan isRefreshing kepada false dan tutup uni.stopPullDownRefresh() pada masa yang sama.

3. Pemuatan tarik naik

Pemuatan tarik naik lebih banyak bermakna apabila kandungan halaman ditarik ke atas, fungsi dicetuskan untuk mendapatkan lebih banyak data daripada pelayan dan ditambahkan pada penghujung halaman tersebut. Dalam bab ini, kami akan memperkenalkan cara menggunakan komponen <uni-scroll-view> dalam uniapp untuk melaksanakan pemuatan tarik naik dan lebih banyak fungsi.

1. Tulis kod

Kod di atas sudah termasuk fungsi muat semula tarik-turun, jadi kita hanya perlu menambah kod fungsi pemuatan tarik-atas pada kod di atas.

<uni-scroll-view
    class="content"
    :enable-back-to-top="true"
    @downRefresh="onDownRefresh" 
    refresher-default-style
    :refresher-triggered="isRefreshing"
    refresher-loading="{{isLoading}}"
    refresher-enabled="{{true}}"
    @scrolltolower="loadMore" 
    :onLoadmore="false"
    style="height: 100vh;"
>
    <!--该区域可以放置需要下拉刷新的内容-->
    <!--......-->
    <div class="list-view">
        <ul>
            <li v-for="item in items" :key="item.id">{{item.text}}</li>
        </ul>
        <!--上拉加载-->
        <div v-if="isLoadMore">
            <span>loading...</span>
        </div>
    </div>
</uni-scroll-view>

<script>
export default {
    data() {
        return {
            items: [
                {text: 'item1', id:1},
                {text: 'item2', id:2},
                {text: 'item3', id:3},
                {text: 'item4', id:4},
                {text: 'item5', id:5},
                {text: 'item6', id:6},
                {text: 'item7', id:7},
                {text: 'item8', id:8},
                {text: 'item9', id:9},
                {text: 'item10', id:10}
            ],
            isRefreshing: false,
            isLoading: false,
            isLoadMore: false,
        }
    },
    methods: {
        onDownRefresh() {
            this.isRefreshing = true;
            setTimeout(() => {
                this.isRefreshing = false;
                uni.stopPullDownRefresh()
            }, 2000)
        },
        loadMore() {
            this.isLoadMore = true;
            setTimeout(() => {
                // 模拟从服务器获取了10个新数据
                for (let i=0; i<10; i++) {
                    const item = {
                        id: this.items.length + i + 1,
                        text: `item${this.items.length + i + 1}`
                    };
                    this.items.push(item);
                }
                this.isLoadMore = false;
            }, 2000)
        }
    }
}
</script>

<style>
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

Seperti yang ditunjukkan dalam kod di atas, kami melaksanakan pemuatan tarik naik melalui acara <uni-scroll-view> dalam komponen @scrolltolower. Apabila kandungan halaman meluncur ke bawah, kami memanggil kaedah this.loadMore(), di mana kami boleh memuatkan lebih banyak data dan mengemas kini halaman.

Akhir sekali, kami menetapkan isLoadMore untuk true dan status "pemuatan" dipaparkan pada halaman. Selepas menunggu selama 2 saat, tambah 10 data baharu pada data items dan tutup status isLoadMore.

4. Ringkasan

Melalui kaedah yang diperkenalkan dalam artikel ini, kami boleh melaksanakan lebih banyak fungsi muat semula tarik-turun dan muat naik dalam uniapp. Jika anda belum mencuba ciri ini lagi, anda boleh mengikuti langkah dalam artikel ini untuk bermula dengan cepat dan menjadikan apl mudah alih anda lebih baik. Jika anda mempunyai sebarang pertanyaan atau pertanyaan, sila tinggalkan di ruangan komen.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi muat semula tarik turun dan muat naik dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!