uniapp 学习笔记十五开启下拉刷新加载和封装请求方法

川长思鸟来 2024-04-08 13:31 66阅读 0赞

uniapp 学习笔记十五 开启下拉刷新加载和封装请求方法

![faae3cbff9ff4fdd84f63c696728cd0b.png][]

cake.vue

<template>
            <view>
                <view class="flex justify-between padding">
                    <view class="">
                        猫屎咖啡
                    </view>
                    <view class="">
                        牛奶拿铁
                    </view>
                </view>
                
                <view class="cont">
                    <good-item v-for="(item,index) in glist" :gdata="item"></good-item>
                </view>
                
            </view>
        </template>
    
        <script>
            export default {
                data() {
                    return {
                        glist:[],
                        page:0
                    }
                },
                methods: {
                    handleDetail(idx){
                        console.log(idx);
                            uni.navigateTo({
                                url:'../detail/detail?idx='+idx
                            })
                    },
                    loadData(){
                        let skip = this.page * 8
                        let url = `/1.1/classes/goods?where{"bcid":1}&limit=8&skip=${skip}`
                        this.$get(url).then(res=>{
                            uni.stopPullDownRefresh()
                            let {results} = res
                            if (results.length) {
                                this.page++
                                this.glist = [
                                    ...this.glist,
                                    ...res.results
                                ]
                                return
                            }
                            uni.showToast({
                                title:'这回真没了...',
                                icon:'none'
                            })
                        })
                    }
                },
                onLoad() {
                    this.loadData()
                },
                onReachBottom() {
                    console.log('触底了');
                    this.loadData()
                },
                onPullDownRefresh() {
                    this.glist = []
                    this.page = 0
                    this.loadData()
                }
            }
        </script>
    
        <style lang="scss">
        .cont{
            display: flex;
            flex-wrap: wrap;
            padding: 15upx;
            justify-content: space-between;
        }
    
        </style>

page.json

{
                "path" : "pages/cake/cake",
                "style" :                                                                                    
                {
                    "navigationBarTitleText": "",
                    "enablePullDownRefresh": true //开启
                }
                
            },

[faae3cbff9ff4fdd84f63c696728cd0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ee82302ff7614e75a0a75167070a773a.png