更新记录

1.0.1（2024-08-11） 下载此版本

• 调整为uni_modules目录规范

平台兼容性

hj-scroll-right-load

<view style="padding: 20px;box-sizing: border-box;">
    <view class="title">
        单选
    </view>
    <hj-scroll-right-load :showlLoading="showlLoading2" :list="list2" v-model="checkValue2" @load="load2"
        @click="itemClick2" />
    <view class="title">
        多选
    </view>
    <hj-scroll-right-load :showlLoading="showlLoading" multiple :list="list" v-model="checkValue" @load="load"
        @click="itemClick" label-key="name" />
    <view class="title">
    插槽
    </view>
    <hj-scroll-right-load :list="list3" v-model="checkValue3" customBox >
        <template v-slot="{ item }">
            <view style="background-color: aquamarine;border-radius: 50%;margin-right: 10px;padding: 10px;box-sizing: border-box;">
                {{item.label}}
            </view>
        </template>
    </hj-scroll-right-load>
</view>

    export default {
        data() {
            return {
                list: [],
                checkValue: [],
                queryForm: {
                    pageNum: 1,
                    pageSize: 6
                },
                total: 0,
                showlLoading: false,
                //---------------------
                list2: [{
                    value: 0,
                    label: "数据1"
                }, {
                    value: 1,
                    label: "数据2"
                }, {
                    value: 2,
                    label: "数据3"
                }, {
                    value: 3,
                    label: "数据4"
                }, {
                    value: 4,
                    label: "数据5"
                }, {
                    value: 5,
                    label: "数据6"
                }],
                checkValue2: 2,
                showlLoading2: false,
                //---------------------
                list3: [{
                    value: 0,
                    label: "数据1"
                }, {
                    value: 1,
                    label: "数据2"
                }, {
                    value: 2,
                    label: "数据3"
                }, {
                    value: 3,
                    label: "数据4"
                }, {
                    value: 4,
                    label: "数据5"
                }, {
                    value: 5,
                    label: "数据6"
                }],
                checkValue3: 3,
            }
        },
        onLoad() {
            this.fetchData()
        },
        methods: {
            // 请求api
            async fetchData(params) {
                const res = await this.apiMock(params)
                setTimeout(() => { // 模拟加载效果
                    this.showlLoading = false // 关闭加载动画
                    this.list = this.list.concat(res.rows)
                    this.total = res.total
                }, 1000)
            },
            // 右滚动加载
            load(e) {
                // 判断页数
                let size = Math.ceil(this.total / this.queryForm.pageSize)
                if (this.queryForm.pageNum <= size && this.total > this.queryForm.pageSize) {
                    // 开启加载动画
                    this.showlLoading = true
                    this.queryForm.pageNum++
                    this.fetchData()
                }
            },
            load2(e) {
                // console.log("load2---", e)
                // 开启加载动画
                this.showlLoading2 = true
                setTimeout(() => {
                    this.showlLoading2 = false
                },1000)
            },
            // 点击事件
            itemClick(item, index) {
                console.log('itemClick', item.name, index, this.checkValue);
            },
            itemClick2(item, index) {
                console.log('itemClick2', item.label, index, this.checkValue2);
            },
            // 模拟接口返回
            apiMock() {
                return new Promise((resolve) => {
                    if (this.queryForm.pageNum === 1) {
                        let arr = [{
                            name: "测试数据1",
                            value: 1,
                        }, {
                            name: "测试数据2",
                            value: 2,
                        }, {
                            name: "测试数据3",
                            value: 3,
                        }, {
                            name: "测试数据4",
                            value: 4,
                        }, {
                            name: "测试数据5",
                            value: 5,
                        }, {
                            name: "测试数据6",
                            value: 6,
                        }]
                        resolve({
                            rows: arr,
                            total: 8
                        })
                    } else if (this.queryForm.pageNum === 2) {
                        let arr = [{
                            name: "测试数据7",
                            value: 7,
                        }, {
                            name: "测试数据8",
                            value: 8,
                        }]
                        resolve({
                            rows: arr,
                            total: 8
                        })
                    } else if (this.queryForm.pageNum === 3) {
                        resolve({
                            rows: [],
                            total: 8
                        })
                    }
                })
            }
        }
    }

Props

list 数组对象属性

点击事件