更新记录

V3.0（2025-03-11） 下载此版本

2025.3

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
√ √ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ × √ √ √ √ √ √ √ 

<!-- 滚动分页非自定义导航栏 -->
<template>
    <view>
        <zl-scroll  :loadOptionReqApi="mockAxiosFn" :loadOptionReqParams.sync="params">     
        </zl-scroll>    
    </view>
</template>
<script>
    // 真实场景需引用
    // import {mockAxiosFn} from'@/apis/index.js'
    export default{
        data(){
            return{
            params:{
                status:-2,
                id:123

            },

            }
        },
        computed:{

        },

        methods:{
            // 模拟请求接口，真实场景换成后端请求方法传递参数
        mockAxiosFn(params) {  
            console.log(params,'params')
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  // 模拟请求成功
                  if (params) {
                    resolve({
                        message: '请求成功',
                        requestParams: params, // 返回请求参数
                        rows:new Array(20).fill(null).map(() => ({
                    'name': '模拟数据'
                })),
                     total:120,
                // 模拟返回的数据
                      });
                  } else {
                    // 模拟请求失败
                    reject({
                      status: 404,
                      statusText: 'Not Found',
                      data: { message: '请求失败，接口不存在' }
                    });
                  }
                }, 20);
              });
            }

        },
        onShow(){

        },
    }
</script>
<style>
    page{
        background: #f5f5f5;
    }
    .padding-10{
        padding:10px;
        box-sizing: border-box;
    }
</style>
<!-- 滚动分页非自定义导航栏自定义列表样式自定义加载样式自定义空数据样式 -->
<template>
    <view>
        <zl-scroll :loadOptionReqApi="mockAxiosFn" :loadOptionReqParams.sync="params">
            <template v-slot:list="{list}">
                <view class="list-card-item" v-for="(item,index) in list" :key="index">
                    <view class="list-card-item-left">
                        <!-- 可放图片，便于演示，现直接用的背景色代替 -->

                    </view>
                    <view class="list-card-item-right">
                        <view style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; ">{{item.name}}{{index+1}}-演示标题内容演示标题内容演示标题内容演示标题内容</view>
                        <view style="font-size: 24rpx;color: #666;">其他描述性文字</view>
                        <view style="color: red;">
                            <text style="font-size: 24rpx;">￥</text>
                            <text>20.00</text>
                        </view>
                    </view>
                </view>
            </template>
            <template v-slot:loadText="{loadText}">

            </template>
            <template v-slot:empty>

            </template>
        </zl-scroll>
    </view>
</template>
<script>
    // 真实场景需引用
    // import {mockAxiosFn} from'@/apis/index.js'
    export default {
        data() {
            return {
                params: {
                    status: -2,
                    id: 123

                },

            }
        },
        computed: {

        },

        methods: {
            // 模拟请求接口，真实场景换成后端请求方法传递参数
            mockAxiosFn(params) {
                console.log(params, 'params')
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        // 模拟请求成功
                        if (params) {
                            resolve({
                                message: '请求成功',
                                requestParams: params, // 返回请求参数
                                rows: new Array(20).fill(null).map(() => ({
                                    'name': '模拟数据'
                                })),
                                total: 120,
                                // 模拟返回的数据
                            });
                        } else {
                            // 模拟请求失败
                            reject({
                                status: 404,
                                statusText: 'Not Found',
                                data: {
                                    message: '请求失败，接口不存在'
                                }
                            });
                        }
                    }, 20);
                });
            }

        },
        onShow() {

        },
    }
</script>
<style lang="scss">
    page {
        background: #fff;
    }

    .padding-10 {
        padding: 10px;
        box-sizing: border-box;
    }

    .list-card-item {
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #fff;
        display: grid;
        grid-template-columns: 280rpx 1fr;
        grid-gap: 30rpx;
        border-radius: 8rpx;
        height: 120px;

        &-left {
            border-radius: 8rpx;
            background-color: #f5f5f5;
            height: 100%;
        }

        &-right {
            display: grid;

            grid-template-rows: 80rpx 40rpx 1fr;
            grid-gap: 20rpx;
            height: 100%;

        }
    }
</style>

<!-- 滚动分页自定义导航栏，自定义列表结构，自动获取高度 -->
<template>
    <view>
        <view :style="{height:searchHeight+'px'}" class="search-ele">
            <input style="border-radius: 60rpx;background-color: #f5f5f5;width: 100%;height: 38px;padding-left: 20rpx;padding-right: 20rpx;" type="text" v-model="search" placeholder="请输入关键字进行搜索" />
        </view>
        <zl-scroll :loadOptionReqApi="mockAxiosFn" :isCustomize="true" :otherEleHeight="searchHeight" :loadOptionReqParams.sync="params">
            <template v-slot:list="{list}">
                <view class="list-card-item" v-for="(item,index) in list" :key="index">
                    <view class="list-card-item-left">
                        <!-- 可放图片，便于演示，现直接用的背景色代替 -->

                    </view>
                    <view class="list-card-item-right">
                        <view style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis; ">{{item.name}}{{index+1}}-演示标题内容演示标题内容演示标题内容演示标题内容</view>
                        <view style="font-size: 24rpx;color: #666;">其他描述性文字</view>
                        <view style="color: red;">
                            <text style="font-size: 24rpx;">￥</text>
                            <text>20.00</text>
                        </view>
                    </view>
                </view>
            </template>
            <template v-slot:loadText="{loadText}">

            </template>
            <template v-slot:empty>

            </template>
        </zl-scroll>
    </view>
</template>
<script>
    // 真实场景需引用
    // import {mockAxiosFn} from'@/apis/index.js'
    export default {
        data() {
            return {
                params: {
                    status: -2,
                    id: 123

                },
                search:'',
                searchHeight:110

            }
        },
        computed: {

        },

        methods: {
            // 模拟请求接口，真实场景换成后端请求方法传递参数
            mockAxiosFn(params) {
                console.log(params, 'params')
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        // 模拟请求成功
                        if (params) {
                            resolve({
                                message: '请求成功',
                                requestParams: params, // 返回请求参数
                                rows: new Array(20).fill(null).map(() => ({
                                    'name': '模拟数据'
                                })),
                                total: 120,
                                // 模拟返回的数据
                            });
                        } else {
                            // 模拟请求失败
                            reject({
                                status: 404,
                                statusText: 'Not Found',
                                data: {
                                    message: '请求失败，接口不存在'
                                }
                            });
                        }
                    }, 20);
                });
            }

        },
        onShow() {

        },
    }
</script>
<style lang="scss">
    page {
        background: #fff;
    }

    .padding-10 {
        padding: 10px;
        box-sizing: border-box;
    }
    .search-ele{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        padding-top: 70px;
        box-sizing: border-box;
    }

    .list-card-item {
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #fff;
        display: grid;
        grid-template-columns: 280rpx 1fr;
        grid-gap: 30rpx;
        border-radius: 8rpx;
        height: 120px;

        &-left {
            border-radius: 8rpx;
            background-color: #f5f5f5;
            height: 100%;
        }

        &-right {
            display: grid;

            grid-template-rows: 80rpx 40rpx 1fr;
            grid-gap: 20rpx;
            height: 100%;

        }
    }
</style>

mockAxiosFn：请求接口函数，params：自定义请求参数 对应图片示例，直接复制粘贴即可

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...