270 lines
7.3 KiB
Vue
270 lines
7.3 KiB
Vue
<template>
|
||
<view class="classlist">
|
||
<!--
|
||
有图片的情况：图片加载出来之后，我们就要取消这个动画
|
||
没有图片的话：我们也不能要这个加载动画，然后还要显示“没有更多了
|
||
刚进入页面时，noData是false
|
||
classList.length也是0（转换传给你false）
|
||
然后请求完之后，根据请求的内容当中有没有数据，才改变noData的值
|
||
|
||
重点是页面执行的顺序问题。有疑惑就思考这个
|
||
|
||
noData原本是false，有数据之后就变成了true'”
|
||
|
||
|
||
-->
|
||
<view class="loadingLayout" v-if="!classList.length && !noData">
|
||
<uni-load-more status="loading"></uni-load-more>
|
||
</view>
|
||
|
||
<view class="content">
|
||
|
||
<navigator :url="'/pages/preview/preview?id=' + item._id" class="item"
|
||
v-for="item in classList"
|
||
:key="item._id">
|
||
<image :src="item.smallPicurl" mode="aspectFill"></image>
|
||
</navigator>
|
||
</view>
|
||
|
||
|
||
<!-- 避免出现两个加载框的情况，需要考虑这个v-if的条件
|
||
classList有值 或者 没有更多数据了（noData变成true） 之后，这个框 才可以出现
|
||
所以是或者关系 用 ||(或) -->
|
||
|
||
|
||
<!--
|
||
刚进入页面时，noData是false
|
||
classList.length也是0（转换传给你false）
|
||
然后请求完之后，根据请求的内容当中有没有数据，才改变noData的值
|
||
|
||
重点是页面执行的顺序问题。有疑惑就思考这个
|
||
|
||
没有数据noData就变成了true显示“noMore”，
|
||
有数据noDatashi false显示“loading” -->
|
||
<!-- <view class="loadingLayout" v-if="classList.length || noData">
|
||
<uni-load-more :status="noData?'noMore':'loading'"> </uni-load-more>
|
||
</view> -->
|
||
|
||
<!-- 或 表示 现在的页面有数据，但是点击的另一个标签没有数据 -->
|
||
<view class="loadingLayout bottom" v-if="classList.length || noData">
|
||
<uni-load-more :status="noData?'noMore':'loading'"> </uni-load-more>
|
||
<!-- <zero-loading type="sword" position="absolute"></zero-loading> -->
|
||
|
||
</view>
|
||
|
||
|
||
<!-- 程序使用时增加安全高度，防止被home键挡住，提高用户使用 -->
|
||
<view class="safe-area-inset-bottom"></view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref} from "vue"
|
||
import {apiGetClassList,apiGetHistoryList} from "@/api/apis.js"
|
||
import {onLoad,onUnload,onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app"
|
||
// import {zero-loading} from "@/uni_modeules"
|
||
|
||
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
|
||
import { gotoHome } from "../../utils/common"
|
||
|
||
const classList = ref([])
|
||
const noData = ref(false)
|
||
//为了方便后期传入参数，将queryParams方面外面，要加属性的话直接一个 点方法（.） 就可以了
|
||
|
||
//定义data参数
|
||
const queryParams = {
|
||
pageNum:1,
|
||
pageSize:12
|
||
}
|
||
|
||
let pageName;
|
||
|
||
//onLoad可以接收上个页面传入的参数
|
||
onLoad((e)=>{
|
||
// console.log(e);
|
||
//这里的type联系的是user页面的"我的下载""我的评分"这两个页面
|
||
let {id=null,name=null,type=null} =e;
|
||
// id是必定有的,但是这里的type是只有user页面的"我的下载""我的评分"传进来的
|
||
|
||
//如果页面没有传入id的话，让让其返回主页面去
|
||
// if(!id){
|
||
// return gotoHome();
|
||
// }
|
||
|
||
// 如果上个页面传入的东西包含id的话,就给queryParams加一个id属性,另其等于上个页面传入的id
|
||
// 除了这两个判断外,其他东西都是不需要改变的
|
||
|
||
if(id){
|
||
//给queryParams加一个id属性
|
||
queryParams.id = id
|
||
}
|
||
if(type){
|
||
// 给查询参数queryParams添加一个type属性,令其等于这个其他页面传入的type(就是 download 或者 score )
|
||
queryParams.type = type
|
||
}
|
||
|
||
|
||
pageName = name
|
||
|
||
// console.log(id,name);
|
||
|
||
// 传入名字是为了动态改变导航栏标题
|
||
uni.setNavigationBarTitle({
|
||
title:name
|
||
})
|
||
getClassList();
|
||
})
|
||
|
||
//onUnload表示的是撤销页面时需要做的事情。撤销当前看的页面，就remove掉缓存。提高性能
|
||
onUnload(() =>{
|
||
uni.removeStorageSync("storgClassList")
|
||
})
|
||
|
||
|
||
//下拉刷新
|
||
// onPullDownRefresh(()=>{
|
||
// queryParams.pageNum++;
|
||
// // getClassList();
|
||
// apiGetClassList({
|
||
// classid:queryParams.id,
|
||
// pageNum:queryParams.pageNum,
|
||
// pageSize:queryParams.pageSize
|
||
// // classid:"6524ace7213929cbcee72e4d"
|
||
// }).then(res =>{
|
||
// if (res.data.errCode === 0) {
|
||
// // 将新数据放在原有数据的前面（最新的内容在顶部）
|
||
// //这里res就是res，图片是存在res.data.data里面，与下面的用res接收Promise对象是不一样的
|
||
// classList.value = [...res.data.data, ...classList.value]
|
||
|
||
// // 显示成功提示
|
||
// uni.showToast({
|
||
// title: "刷新成功",
|
||
// icon: "success"
|
||
// })
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: res.data.errMsg,
|
||
// icon: "none"
|
||
// })
|
||
// }
|
||
// }).catch(err => {
|
||
// uni.showToast({
|
||
// title: "刷新失败",
|
||
// icon: "none"
|
||
// })
|
||
// }).finally(() => {
|
||
// // 停止下拉刷新动画
|
||
// uni.stopPullDownRefresh()
|
||
// })
|
||
// })
|
||
|
||
//触底刷新的时候需要加载新的图片出来，因此需要传入一个新的参数pageNum
|
||
onReachBottom(()=>{
|
||
//如果后面没有数据了，再触底就不发送网络请求了
|
||
if(noData.value){
|
||
return
|
||
}
|
||
queryParams.pageNum++;
|
||
getClassList();
|
||
// console.log(res);
|
||
// <uni-load-more :status="more"/>
|
||
|
||
})
|
||
|
||
const getClassList = async ()=>{
|
||
//需要先在外面声明一个res
|
||
let res;
|
||
//id参数由上面的queryParams.id提供,如果有id就进行有id的操作
|
||
if(queryParams.id){
|
||
res = await apiGetClassList({
|
||
// queryParams
|
||
classid:queryParams.id,
|
||
pageNum:queryParams.pageNum,
|
||
pageSize:queryParams.pageSize
|
||
// classid:"6524ace7213929cbcee72e4d"
|
||
});
|
||
}
|
||
|
||
|
||
|
||
//type参数由上面的queryParams.type提供,如果有type,就进行有type的操作
|
||
if(queryParams.type){
|
||
res = await apiGetHistoryList({
|
||
// queryParams
|
||
type:queryParams.type,
|
||
pageNum:queryParams.pageNum,
|
||
pageSize:queryParams.pageSize
|
||
});
|
||
}
|
||
|
||
classList.value = [...classList.value,...res.data]
|
||
|
||
//比较发送的长度 和 返回数据的长度。如果原来的大于发送来的，说明后面没数据了，所以将
|
||
if(queryParams.pageSize > res.data.length){
|
||
noData.value = true
|
||
}
|
||
|
||
//将数据保存到缓存里面
|
||
uni.setStorageSync("storgClassList",classList.value)
|
||
|
||
// console.log(res);
|
||
|
||
}
|
||
|
||
|
||
//分享给好友
|
||
onShareAppMessage((e)=>{
|
||
//分享这里是需要有一个 “return” 的
|
||
|
||
//在上面的onLoad中，已经将列表的id赋给了queryParams的id属性
|
||
return{
|
||
title:"hzb壁纸-"+pageName,
|
||
// 必须传递id进去，否则进不去内部页面
|
||
path:"/pages/classlist/classlist?id="+queryParams.id+"&name="+pageName
|
||
}
|
||
})
|
||
|
||
//分享到朋友圈
|
||
onShareTimeline(()=>{
|
||
return{
|
||
// 标题
|
||
title:"hzb壁纸~~~",
|
||
// 分享时候的图片地址。可以本地也可以网络图
|
||
// imageUrl:"/static/images/logo2.jpg"
|
||
//要想看朋友圈这个，需要带的query参数
|
||
query:"id="+queryParams.id+"&name="+pageName
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.classlist{
|
||
.content{
|
||
display: grid;
|
||
// position: relative;
|
||
grid-template-columns: repeat(3,1fr);
|
||
gap: 5rpx;
|
||
padding: 5rpx;
|
||
.item{
|
||
// 没有加高度的话没有效果
|
||
height:440rpx ;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
//保证图片之间的空格是一致的。不然你行级块元素有空格
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</style>
|