247 lines
5.9 KiB
Vue
247 lines
5.9 KiB
Vue
<template>
|
||
<view>
|
||
<helang-waterfall-list
|
||
:status="waterfall.status"
|
||
:list="waterfall.list"
|
||
:reset="waterfall.reset"
|
||
@click="onClick"
|
||
@done="onDone"
|
||
>
|
||
<template>
|
||
<view v-if="waterfall.status == 'await'">
|
||
<view class="load-txt">上拉加载更多</view>
|
||
</view>
|
||
<view v-else-if="waterfall.status == 'loading'">
|
||
<view class="load-txt">加载中</view>
|
||
</view>
|
||
<view v-else-if="waterfall.status == 'success'">
|
||
<view class="load-txt">加载中</view>
|
||
</view>
|
||
<view v-else-if="waterfall.status == 'finish'">
|
||
<view class="load-txt">没有更多了</view>
|
||
</view>
|
||
<view v-else-if="waterfall.status == 'fail'">
|
||
<image class="load-icon" src="../../static/waterfall/fail.png"></image>
|
||
<view class="load-txt">出错了，请刷新重试</view>
|
||
</view>
|
||
<view v-else-if="waterfall.status == 'empty'">
|
||
<image class="load-icon" src="../../static/waterfall/empty.png"></image>
|
||
<view class="load-txt">暂无数据</view>
|
||
</view>
|
||
<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
|
||
</template>
|
||
</helang-waterfall-list>
|
||
|
||
<view class="status-change" @tap="onStatusChange">
|
||
<view>切换<br />状态</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"
|
||
|
||
// 列表接口模拟数据
|
||
import mockData from '../../mock-data/waterfall-list.js'
|
||
|
||
export default {
|
||
components: {
|
||
"helang-waterfall-list": helangWaterfallList
|
||
},
|
||
data() {
|
||
return {
|
||
// 异步请求相关
|
||
ajax: {
|
||
// 是否可以加载
|
||
load: true,
|
||
// 每页的请求条件
|
||
rows:10,
|
||
// 页码
|
||
page:1,
|
||
// 数据列表
|
||
dataList:[]
|
||
},
|
||
// 瀑布流组件相关
|
||
waterfall:{
|
||
status:"",
|
||
reset:false,
|
||
list:[]
|
||
}
|
||
|
||
}
|
||
},
|
||
onReady() {
|
||
this.getList();
|
||
},
|
||
// 触底触发
|
||
onReachBottom() {
|
||
this.getList();
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh(){
|
||
// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
|
||
setTimeout(()=>{
|
||
this.ajax.page = 1;
|
||
this.ajax.load = true;
|
||
this.getList();
|
||
},800);
|
||
},
|
||
methods: {
|
||
// 瀑布流组件点击事件
|
||
onClick(data,index, tag){
|
||
console.log(data);
|
||
let direction = {
|
||
"left":'左',
|
||
"right":'右'
|
||
}
|
||
uni.showToast({
|
||
title:`${direction[tag]}侧列表第${index+1}个被点击`,
|
||
icon:'none'
|
||
})
|
||
},
|
||
// 瀑布流组件渲染完成
|
||
onDone(){
|
||
// 设置组件为 非重置，这行代码保留不删即可
|
||
this.waterfall.reset = false;
|
||
|
||
// 恢复 getList 方法的调用
|
||
this.ajax.load = true;
|
||
this.ajax.page++;
|
||
|
||
// 设置组件状态为 等待加载
|
||
this.waterfall.status = 'await';
|
||
|
||
/**
|
||
* 如果你是一个追求完美的开发者，可以通过判断当前数据的长度和请求的数据长度来优化前端请求，减少不必要请求
|
||
* 不需要则删除
|
||
* */
|
||
/**
|
||
if(this.ajax.dataCount >= this.ajax.rows){
|
||
this.ajax.load = true;
|
||
this.ajax.page++;
|
||
}
|
||
*/
|
||
},
|
||
// 获取数据
|
||
getList() {
|
||
if (!this.ajax.load) {
|
||
return;
|
||
}
|
||
this.ajax.load = false;
|
||
|
||
// 设置状态为加载中
|
||
this.waterfall.status = 'loading';
|
||
|
||
// 请求数据， mockData.getList 示例一个 ajax 请求
|
||
mockData.getList({
|
||
pageNum:this.ajax.page,
|
||
pageSize:this.ajax.rows
|
||
}).then(res=>{
|
||
// 获取到的数据，请注意数据结构
|
||
console.log(res);
|
||
|
||
// 第一页数据执行以下代码
|
||
if(this.ajax.page == 1){
|
||
// 关闭下拉
|
||
uni.stopPullDownRefresh();
|
||
|
||
// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
|
||
this.waterfall.reset = true;
|
||
}
|
||
|
||
// 数据无效时处理
|
||
if(!res || res.length < 1){
|
||
// 设置组件为 加载结束 状态
|
||
this.waterfall.status = 'finish';
|
||
return;
|
||
}
|
||
|
||
// 将数据赋值给瀑布流 list 属性
|
||
this.waterfall.list = res;
|
||
// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
|
||
this.waterfall.status = 'success';
|
||
|
||
/**
|
||
* 下方的代码为扩展其他功能的示例代码 可做参考，不需要可删除
|
||
* */
|
||
|
||
// 缓存当前数据给其他需要该数据的功能使用
|
||
if(this.ajax.page == 1){
|
||
this.ajax.dataList = res;
|
||
}else{
|
||
this.ajax.dataList = [...this.ajax.dataList,...res];
|
||
}
|
||
// 记录本次数据长度，意义请看 done 事件的回调
|
||
this.ajax.dataCount = res.length || 0;
|
||
|
||
// 。。。下面不需要写代码了，等待组件渲染完成
|
||
})
|
||
},
|
||
// 导航状态切换演示监听
|
||
onStatusChange(){
|
||
uni.showActionSheet({
|
||
itemList: ['常规', '加载异常', '加载错误'],
|
||
success: (res)=> {
|
||
switch(res.tapIndex){
|
||
case 0:
|
||
this.ajax.page = 1;
|
||
this.ajax.load = true;
|
||
this.getList();
|
||
break;
|
||
case 1:
|
||
// alert(111)
|
||
this.waterfall.status = 'fail';
|
||
break;
|
||
case 2:
|
||
this.waterfall.status = 'empty';
|
||
break;
|
||
default:
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f3f3f3;
|
||
}
|
||
|
||
.load-txt{
|
||
padding: 0 0 20rpx 0;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.load-icon{
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
margin: 0 auto 20rpx auto;
|
||
display: block;
|
||
}
|
||
|
||
.status-change{
|
||
position: fixed;
|
||
right: 10rpx;
|
||
top: 60%;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
z-index: 100;
|
||
font-size: 24rpx;
|
||
border-radius: 50%;
|
||
background-color: #0089ff;
|
||
color: #fff;
|
||
line-height: 1;
|
||
opacity: .33;
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
align-content: center;
|
||
}
|
||
</style> |