更新记录

1.0.4(2021-06-22)

新增兼容vue页面上下拉刷新,加载样式同nvue

提示:vue页面不包含瀑布流列表,要用瀑布流请在nvue页面内使用

1.0.3(2021-04-22)

1.修复连续超快速下拉刷新导致下拉区域不收起的问题 2.新增下拉区域颜色配置属性 3.偷个懒~下拉刷新icon图标自行在插件内修改图标库class

查看更多

平台兼容性

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

lsj-nlist

可导入示例项目查看完整demo

若有疑问可进QQ讨论群:701468256

使用说明

选填项

属性 是否必填 值类型 默认值 说明
type String 'list' 瀑布流列表传 waterfall
isRefresh Boolean true 是否允许下拉刷新,默认允许
refreshBackgroundColor String 下拉刷新区域背景色
refreshColor String '#999999' 下拉刷新区域字体色
init Boolean true 初始化时执行一次刷新,为false时
需手动执行this.$refs.lsjNlist.create()
downText Object 下拉刷新提示 downText说明
upText Object 上拉加载提示 upText说明
position String 'fixed' 组件定位模式,默认fixed
unit String 上下左右布局单位,可选rpx、px,设置后上下左右不能单独设置
topUnit String 'rpx' 上方的单位
bottomUnit String 'rpx' 下方的单位
aboutUnit String 'rpx' 左右的单位
top、bottom
left、right
Number 0 上下左右布局
columnCount Number 2 仅瀑布流有效:描述瀑布流的列数
columnWidth [Number,String] 'auto' 仅瀑布流有效:描述瀑布流每一列的列宽
columnGap Number 0 仅瀑布流有效:列与列之间的间隙
leftGap Number 0 仅瀑布流有效:列与左边cell的间隙
rightGap Number 0 仅瀑布流有效:列与右边cell的间隙

必填项

回调函数 是否必填 值类型 默认值 说明
loadData Function - 功能触发回调执行函数

downText说明

属性 默认值 说明
contentdown 下拉可以刷新 手指下拉开始时顶部显示
contentover 释放立即刷新 手指下拉到指定位置时顶部显示
contentrefresh 正在刷新... 数据请求中
contentnomore 刷新完成 下拉刷新执行完毕时显示

upText说明

属性 默认值 说明
contentdown 上拉加载更多 isMore为true时显示(触底时自动执行下次请求)
contentrefresh 正在加载... 数据请求中
contentnomore 没有更多数据了 isMore为false时显示(触底时不再执行请求)

示例

vue:

<lsj-nlist ref="lsjNlist" type="list" init @loadData="loadData">
    <!-- 此处可写cell、header -->
    <cell v-for="(item,index) in list" :key="index">
        <!-- 此处写一列的内容 -->

    </cell>
</lsj-nlist>

js:

data() {
    return {
        top: 0,
        list: [],
        fromData: {
            pageNum: 1,
            pageSize: 20
        }
    }
}
methods: {
    async loadData(refresh) {
        // 下拉刷新重置请求参数
        if (refresh) {this.fromData.pageNum = 1;}

        // start:----模拟接口请求-----
        let promise = new Promise((resolve, reject) => {setTimeout(() => resolve('仿接口请求'), 1000)})
        let res = await promise;
        console.log(refresh,res,this.fromData);
        // end:----模拟部分需删除-----

        // 下拉刷新请求到数据再置空之前的数据,避免出现空白页
        if (refresh) {
            this.list = [];
        }

        // start:----模拟加载列表-----
        for (let i=0,len=39;i<len;i++) {this.list.push({name:i});}
        // end:----模拟部分需删除-----

        let isMore = this.list.length <= 100;
        // 如果还有下一页,则下次请求page+1;
        if (isMore) {
            this.fromData.pageNum++;
        }
        // 结束刷新效果
        // isMore决定是否还可以继续上拉加载更多数据
        this.$refs.lsjNlist.endLoad(refresh,isMore);
    }
}

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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