3***@qq.com
3***@qq.com
  • 发布:2024-06-13 16:01
  • 更新:2024-06-14 20:41
  • 阅读:136

uni-app x制做购物车问题

分类:uni-app x

用checkbox-group和list-view制做购物车页面,加入checkbox-group后不能上拉分页,去掉正常

<template>  
    <checkbox-group name="" @change="testChange">  
    <list-view style="flex: 1;background-color: #ffffff;" @scrolltolower="loadData">  
        <template v-for="(item, index) in dataList" :key="index">  
            <list-item :type="index" style="flex-direction: row; margin-top: 10px; padding: 10px; height: 100px;">  
                <checkbox :value="String(item.plugin_id)" />  
                <image :src="item.plugin_img_link" style="width: 120px;"></image>  
                <text style="flex: 1;">{{item.plugin_name.substring(0,10)}}</text>  
            </list-item>  
            <list-item key="loading" v-if="index==dataList.length-1">  
                <text style="padding: 10px; text-align: center; background-color: #f8f8f8; margin-bottom: 1px;">{{loadingText}}</text>  
            </list-item>  
        </template>  
    </list-view>  
    </checkbox-group>  
</template>  

<script>  
    type Data = {  
        plugin_id : number;  
        plugin_name : string;  
        plugin_img_link : string;  
        plugin_intro : string;  
        is_paid : number;  
        collection_count : number;  
        support_count : number;  
        buy_count : number;  
        download_count : number;  
        score : number;  
        rater_count : number;  
        tags : string[];  
        category_level1_name : string;  
        category_level2_name : string;  
        update_date : string;  
        author_avatar_link : string;  
        author_name : string;  
    }  

    type IRootType = {  
        code : number;  
        desc : string;  
        data : Data[];  
    }  

    export default {  
        data() {  
            return {  
                dataList: [] as Data[],  
                loading: false,  
                isEnded: false,  
                loadingError: '',  
                $currentPage: 1  
            }  
        },  
        computed: {  
            loadingText() : string {  
                if (this.loading) {  
                    return "加载中..."  
                } else if (this.isEnded) {  
                    return "没有更多了"  
                } else if (this.loadingError.length > 0) {  
                    return this.loadingError  
                } else {  
                    return ""  
                }  
            }  
        },  
        onLoad() {  
            this.loadData()  
        },  
        methods: {  
            testChange: function (e : UniCheckboxGroupChangeEvent) {  
                    console.log(e.detail.value);  
                  },  
            loadData() {  
                if (this.loading || this.isEnded) {  
                    return  
                }  
                this.loading = true  

                uni.request<IRootType>({  
                    url: "https://ext.dcloud.net.cn/plugin/uniappx-plugin-list",  
                    data: {  
                        page: this.$currentPage, //当前页码  
                        page_size: 10 //每页列表项目数量  
                    },  
                    success: (res) => {  
                        const responseData = res.data  
                        if (responseData == null) {  
                            return  
                        }  

                        //...是展开运算符,本句用于把联网获取的数组合并到data数组里。当第一次执行时,dataList为空,push进去了第一页的数据,后续页面也同理  
                        this.dataList.push(...responseData.data)  

                        if (responseData.data.length == 0) {  
                            this.isEnded = true  
                        } else {  
                            this.$currentPage++  
                        }  
                    },  
                    fail: (err) => {  
                        this.loadingError = err.errMsg  
                    },  
                    complete: () => {  
                        this.loading = false  
                    }  
                })  
            },  
        }  
    }  
</script>
2024-06-13 16:01 负责人:无 分享
已邀请:
DCloud_heavensoft

DCloud_heavensoft

哪个平台?最好是在hx帮助菜单里报bug

要回复问题请先登录注册