Bagaimana untuk melaksanakan pemuatan gelongsor dalam vuejs

Kaedah Vuejs untuk melaksanakan pemuatan gelongsor: 1. Mulakan pemuatan data dalam fungsi cangkuk yang dibuat oleh Vue.js 2. Isytiharkan pendengar acara tatal 3. Apabila gelongsor mencapai bahagian bawah skrin, pergi ke latar belakang untuk meminta Data data baharu 4. Isytihar medan pageNum 5. Simpan data baharu dalam tatasusunan.

Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer DELL G3.

Bagaimana untuk melaksanakan pemuatan gelongsor dalam vuejs?

vue.js melaksanakan pemuatan tarik naik

Memandangkan milik saya dibangunkan semata-mata dengan vue, saya membuat beberapa pengoptimuman dan pengubahsuaian, mari kita ambil lihat dahulu Kesan berikut

Prinsip: Mulakan pemuatan data dalam fungsi cangkuk yang dicipta oleh Vue.js, isytiharkan pendengar acara tatal dalam fungsi cangkuk yang dipasang , dan pantau ketinggian skrin Tukar, setelah slaid mencapai bahagian bawah skrin, kami pergi ke latar belakang untuk meminta data baharu Pada masa yang sama, kami mengisytiharkan medan pageNum dalam data untuk merekodkan jumlah halaman pada masa ini dimuatkan, pageSize memaparkan bilangan halaman setiap halaman, dan pageNum ialah nombor halaman semasa Setiap kali kami pergi ke latar belakang untuk meminta Tingkatkan pageSize dengan nombor tertentu, dan selepas memuatkan, senaraikan data baharu ke dalam tatasusunan yang menyimpan data dalam data. .

Kod:

   created(){
            loading = showLoading('加载中…')//这是我引用的vant可以不写
            this.custid = localStorage.getItem('cust_id')
            //初始化加载数据
            this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
        },
        mounted(){
            //监听如果页面发生滚动时
            this.$nextTick(() => {
                this.$refs.homeUl.addEventListener('scroll',this.handleScroll,true);
            })
        },
        methods:{
            //初始化加载数据
            methodsGetMessage(custid,pageNum,pageSize){
                loading = showLoading('加载中…')
                getMessage(custid,pageNum,pageSize).then((res)=>{
                    loading.clear()
                    if(res.code == 200){
                        this.pagNum += 1;
                        if(res.data.list == []){
                            this.list = []
                            showToast('暂无消息')
                        }else{
                            this.totalnum = Math.ceil(res.data.total/8)
                            var list=res.data.list
                            for(var i in list){
                                list[i].addtime = this.dateToString(list[i].addtime)
                            }
                            this.list.push(list)
                            this.listLength = list.length
                        }
                        loading.clear()
                        //隐藏
                    }else{
                        showToast('获取消息失败')
                        loading.clear()
                    }
                })
            },
            //页面滑到底部需要调用的方法
            handleScroll(){ //下面这部分兼容手机端和PC端
                var scrollTop = this.$refs.homeUl.scrollTop; //滚动条的位置
                var windowHeitht = this.$refs.homeUl.clientHeight; //在页面上返回内容的可视高度
                var scrollHeight = this.$refs.homeUl.scrollHeight; //返回整个元素的高度（包括带滚动条的隐蔽的地方）
                //是否滚动到底部的判断
                if(Math.round(scrollTop) + windowHeitht == scrollHeight){
                    console.log(this.pagNum+'=='+this.totalnum)
                    if(this.pagNum <= this.totalnum){
                        this.methodsGetMessage(this.custid,this.pageNum,this.pageSize)
                    }else{
                        this.notList = true
                        return;
                    }
                }
            },
  }

1 Untuk memantau addEventListener dalam fungsi cangkuk yang dipasang, anda perlu menambah ini.$nextTick(() => {}), yang mana ialah Panggilan balik ditangguhkan sehingga kitaran kemas kini DOM seterusnya.
2. Gunakan addEventListener('scroll', this.handleScroll, true) dalam vue.
3. Untuk mendapatkan fokus elemen dalam vue, tambahkan ref='definition name' dalam teg, dan kemudian tentukan nama dalam kaedah

ini.$refs untuk mencapai fungsi yang anda inginkan.
4. Adalah salah untuk menggunakan penghakiman kedudukan bar skrol skrin penuh Oleh itu, senarai mesej saya ialah ul Bar skrol senarai mesej ul boleh dinilai dengan ketinggian, ketinggian keseluruhan elemen , dan sama ada ia telah mencapai bahagian bawah dan diberikan kepada bar skrol Gunakan Math.round() untuk membulatkan kedudukan, kerana terdapat ralat beberapa persepuluh, jadi tidak mengapa. .

Akhir sekali: Jika apa-apa berlaku, ingat untuk datang kepada saya! !

Pembelajaran yang disyorkan: "tutorial vue"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemuatan gelongsor dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!