更新记录
1.0.4(2021-06-22)
下载此版本
新增兼容vue页面上下拉刷新,加载样式同nvue
提示:vue页面不包含瀑布流列表,要用瀑布流请在nvue页面内使用
1.0.3(2021-04-22)
下载此版本
1.修复连续超快速下拉刷新导致下拉区域不收起的问题
2.新增下拉区域颜色配置属性
3.偷个懒~下拉刷新icon图标自行在插件内修改图标库class
1.0.2(2021-04-20)
下载此版本
修复ios端上下拉刷新问题
查看更多
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
- |
- |
√ |
√ |
√ |
√ |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
√ |
√ |
√ |
- |
- |
- |
√ |
- |
√ |
√ |
其他
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 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;}
let promise = new Promise((resolve, reject) => {setTimeout(() => resolve('仿接口请求'), 1000)})
let res = await promise;
console.log(refresh,res,this.fromData);
if (refresh) {
this.list = [];
}
for (let i=0,len=39;i<len;i++) {this.list.push({name:i});}
let isMore = this.list.length <= 100;
if (isMore) {
this.fromData.pageNum++;
}
this.$refs.lsjNlist.endLoad(refresh,isMore);
}
}
该项目nvue实现瀑布流关键代码: