更新记录
1.0.0(2023-09-25)
创建
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
列表加载
该组件自动处理了上拉加载,分页,loading,下拉刷新,数据加载完毕,返回顶部等功能,用了之后,发现真香,不用过多去做很多重复的工作,为了让任何列表组件通用,该组建没有样式,样式完全自定义,定义一次,相同的列表都能使用。
第一步,引用组件
import dyList from '@/components/dy-list/index'
// 必须给dyList的父组件指定宽高,dyList内容使用的宽高为100%
import item01 from '@/components/dy-list/item01'
// item01为自定义组件,需要多少列表样式就可以自定义多少,定义了之后类似的列表即可复用
第二步,注册组件
components: {
dyList, item01
}
Props
参数 |
类型 |
默认值 |
说明 |
pageOption |
Object |
{current: 1,size: 10,total: 0} |
分页数据 |
list |
Array |
[] |
列表数据 |
options |
Object |
见下方 |
字段配置项 |
Options
字段 |
默认值 |
说明 |
loadingText |
'加载中' |
数据加载文字 |
finishTest |
'没有更多数据了' |
加载完毕文字 |
current |
'current' |
分页页码字段名 |
total |
'total' |
数据总条数字段名 |
Events
事件名称 |
说明 |
回调参数 |
getList |
获取数据事件 |
getList(e,successFn,failFn),e:{scrollTop:滚动距离,direction:bottom/top(上拉加载/下拉刷新)},successFn:请求成功回调,成功回调时,需要把分页总条数传入,failFn:请求失败回调 |
Slot
字段 |
说明 |
dyListItem |
列表内容插槽 |
scrollTop |
返回顶部插槽,使用自定义插槽,需要给dyList组件加上ref属性,然后手动调用该事件:this.$refs.xxx.scrollTopFn() |
示例代码-兼容微信小程序方式
<template>
<view>
<dyList
ref="dyList"
:list.sync="list"
:pageOption.sync="pageOption"
@getList="getList"
>
<!-- #ifdef MP-WEIXIN -->
<!-- 只在微信小程序编译,因小程序不能循环同名插槽,所以只能在外部循环,整体插入进入 -->
<view
class="itemBox"
:slot="'dyListItem'+index"
v-for="(row,index) in list"
:key="index"
>
<item01 :row="row" :index="index" @del="del"></item01>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<!-- 除微信小程序以外编译,如果不需要兼容微信小程序,仅需下列代码 -->
<view
class="itemBox"
slot="dyListItem"
slot-scope="{row,index}"
>
<item01 :row="row" :index="index" @del="del"></item01>
</view>
<view class="scrollTop" slot="scrollTop" @click="scrollTopFn()">返回顶部</view>
<!-- #endif -->
</dyList>
</view>
</template>
<script>
import dyList from '@/components/dy-list/index'
import item01 from '@/components/dy-list/item01'
export default {
components: {dyList, item01},
data() {
return {
options: {
loadingText: '加载中...',
finishTest: '数据加载完毕',
},
pageOption: { // 分页数据
current: 1,
size: 10,
total: 0,
},
list: [],
}
},
methods: {
getList(e, success, fail) {
let _self = this;
// 模拟请求
let timer = setTimeout(() => {
let code = 200;
if (code === 200) {
for (let i = 0; i < _self.pageOption.size; i++) {
_self.list.push({
name: 'item',
index: i,
});
}
_self.pageOption.total = 105;
success && success(_self.pageOption.total);
} else {
fail && fail();
}
}, 150)
},
del(row, index) {
this.list.splice(index, 1);
console.log(this.list);
},
scrollTopFn() {
console.log(this.$refs.dyList);
this.$refs.dyList.scrollTopFn();
}
}
}
</script>
示例代码-无需兼容微信小程序方式
<template>
<view>
<dyList
ref="dyList"
:list.sync="list"
:pageOption.sync="pageOption"
@getList="getList"
>
<view
class="itemBox"
slot="dyListItem"
slot-scope="{row,index}"
>
<item01 :row="row" :index="index" @del="del"></item01>
</view>
</dyList>
</view>
</template>
<script>
// 同 兼容微信小程序方式
</script>