first commit
This commit is contained in:
247
uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
Normal file
247
uni_modules/helang-waterfall/pages/waterfall/waterfall.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user