测试
This commit is contained in:
269
my-uniapp-cli/pages/classlist/classlist.vue
Normal file
269
my-uniapp-cli/pages/classlist/classlist.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user