uniapp 学习笔记十四 LeanCloud约束查询及触底分页下拉自动加载实现

墨蓝 2024-04-08 13:29 60阅读 0赞

uniapp 学习笔记十四 LeanCloud约束查询及触底分页实现

下拉自动加载数据

![d98777f2ccdf43e89e71b0b3cc842203.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
                            })
                    },
                },
                onLoad() {
                    let url = '/1.1/classes/goods?where{"bcid":1}&limit=8&skip=0'
                    this.$get(url).then(res=>{
                        console.log(res);
                        this.page++
                        this.glist = res.results
                    })
                },
                onReachBottom() {
                    console.log('触底了');
                    let skip = this.page * 8
                    let url = `/1.1/classes/goods?where{"bcid":1}&limit=8&skip=${skip}`
                    this.$get(url).then(res=>{
                        let {results} = res
                        if (results.length) {
                            this.page++
                            this.glist = [
                                ...this.glist,
                                ...res.results
                            ]
                            return
                        }
                        uni.showToast({
                            title:'这回真没了...',
                            icon:'none'
                        })
                        
                    })
                }
            }
        </script>
    
        <style lang="scss">
        .cont{
            display: flex;
            flex-wrap: wrap;
            padding: 15upx;
            justify-content: space-between;
        }
    
        </style>

goods-item.vue

<template>
        <view class="cake-item">
            <image class="poster" :src="gdata.img" mode=""></image>
            <view class="info-cont">
                <view class="info flex align-center justify-between">
                    <view class="">
                        <view class="fs-28">
                            {
       {gdata.name}}
                        </view>
                        <view class="fs-16">
                            {
       {gdata.french}}
                        </view>
                    </view>
                    <view class="cart-btn margin-right-sm">
                        <text class="iconfont icon-caigou"></text>
                    </view>
                    
                </view>
                <view class="fs-18">
                    <text class="fs-14">Y</text>
                    {
       {gdata.price}}
                </view>
                
            </view>
        </view>
        
    </template>
    
    <script>
        export default {
            name:"goods-item",
            props:['gdata'],
            data() {
                return {
                    
                };
            }
        }
    </script>
    
    <style lang="scss">
    .cake-item{
        width: 350upx;
        .poster{
            height: 350upx;
            background-color: #f5f5f5;
        }
        .fs-28{
            font-size: 28upx;
            margin-top: 24upx;
        }
        .fs-16{
            font-size: 16upx;
            margin: 14upx 0;
        }
        .fs-18{
            font-size: 18upx;
            margin-bottom: 22upx;
        }
        .cart-btn{
            width: 60upx;
            height: 60upx;
            border-radius: 50%;
            background-color: #ffe32a;
            text-align: center;
            line-height: 60upx;
        }
    }
    
    </style>

[d98777f2ccdf43e89e71b0b3cc842203.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/076016858ecb49b093120a68079db246.png