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

最新推荐文章于 2024-02-27 11:30:30 发布

ggome

最新推荐文章于 2024-02-27 11:30:30 发布

阅读量330

点赞数

分类专栏： uni-app 文章标签： uni-app 学习 javascript

本文链接：https://blog.csdn.net/gixome/article/details/126580035

版权

uni-app 专栏收录该内容

109 篇文章 40 订阅

订阅专栏

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

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 //开启
            }
            
        },