首页图片预览及滑动
现在先把前面的时间也改掉
<uni-dateformat :date="item.publish_date" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
对文章进行倒序展示，新发布的展示在前面
// 联表查询
db.collection(artTemp, userTemp).orderBy("publish_date desc").get().then(res=>{
console.log(res);
this.dataList = res.result.data
})
点击标题、摘要和评论进入详情页
点击图片进入图片预览 在子组件blog_item中，给图片部分写点击事件，在点击事件中调用图片预览方法
文档位置 uniapp.dcloud.net.cn/api/media/i…
<image @click="clickPic" :src="pic != null ? pic :'../../static/images/pic2.jpg'" mode="aspectFill"></image>
</view>
// 点击图片,进入图片预览
clickPic(){
uni.previewImage({
// 这里的item就是props从父组件引用的值
urls:this.item.picurls
})
}
现在由于跨域问题，看不到图，但方法是成功的
现在没有传图片的索引，没法控制显示哪一张图，所以要用图片的索引来控制点哪一张图，就从那一张开始预览 不传index就是默认从第一张图开始的
<!-- 如果只有一张图就给图片上下左右都加圆角 -->
<view class="pic" :class="item.picurls.length==1 ? 'only':''" v-for="(pic, index) in item.picurls" :key="pic">
<!-- <image :src="pic" mode="aspectFill"></image> -->
<!-- 图片显示直接照上面这样写会报错，因为可能有一些没有图，得用三元表达式判断没有图的话这里显示一张默认图 -->
<image @click="clickPic(index)" :src="pic != null ? pic :'../../static/images/pic2.jpg'" mode="aspectFill"></image>
</view>
// 点击图片,进入图片预览
clickPic(index){
uni.previewImage({
// 这里的item就是props从父组件引用的值
urls:this.item.picurls,
current:index
})
}
点击最新是根据最新发布时间排序，点击热门是根据浏览量排序
两个都是倒序排列
在首页中给navlist定义type
navlist: [{
name: "最新",
type:"publish_date"
}, {
name: "热门",
type:"view_count"
}],
这样就能知道是点了两项中的某一项了
<view class="topnav">
<u-tabs
:list="navlist"
:activeStyle="{
color: '#333',
fontWeight: 'bold',
transform: 'scale(1.08)'
}"
:inactiveStyle="{
color: '#888',
transform: 'scale(1)'
}"
@click="clickNav">
</u-tabs>
</view>
data() {
return {
navlist: [{
name: "最新",
type:"publish_date"
}, {
name: "热门",
type:"view_count"
}],
// 内容部分
dataList:[],
// 骨架屏状态
loadingState:false
}
},
clickNav(e) {
console.log(e);
},
接下来就是在首页联表查询这里，把排序写法重新改过
// 联表查询
db.collection(artTemp, userTemp).orderBy("publish_date desc").get().then(res=>{
console.log(res);
this.dataList = res.result.data
})
上面的是原本的写法 下面，通过给排序重新写
return {
navlist: [{
name: "最新",
type:"publish_date"
}, {
name: "热门",
type:"view_count"
}],
// 最新和热门的切换状态
navAction:0,
// 内容部分
dataList:[],
// 骨架屏状态
loadingState:false
}
},
联表查询字段用变量来写，方括号里就是默认显示最新这一栏
// 联表查询
db.collection(artTemp, userTemp).orderBy(this.navlist[this.navAction].type, "desc").get().then(res=>{
console.log(res);
this.dataList = res.result.data
})
点击后切换 实现逻辑是在导航栏的点击事件里重置这个值
// 点击切换导航栏
clickNav(e) {
this.navAction=e.index;
// 点击之后,要重新获取网络请求
this.getData()
},
骨架屏
之前写了骨架屏的结构，但没有做效果
<!-- 骨架屏 -->
<view class="loadingState" v-show="loadState">
<u-skeleton
rows="3"
title
loading
avatar
></u-skeleton>
</view>
// 骨架屏状态
loadState:true
把骨架屏默认开启，在网络请求方法获取到数据后，改变骨架屏的状态
getData(){
// 联表查询 主表quanzi_article 副表uun-id-users
// 通过主表中保存的_id去副表中把对应的三个字段值查出来
let artTemp = db.collection("quanzi_article").field("title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();
let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
// 联表查询
db.collection(artTemp, userTemp).orderBy(this.navlist[this.navAction].type, "desc").get().then(res=>{
console.log(res);
this.dataList = res.result.data
// 获取到数据,将骨架屏关闭
this.loadState = false
})
},
然后在点击导航栏时，要先初始化骨架屏的状态为true，否则就永远是false了
// 点击切换导航栏
clickNav(e) {
// 重置骨架屏状态为打开
this.loadState = true;
// 切换最新和热门的值
this.navAction=e.index;
// 点击之后,要重新获取网络请求
this.getData()
},
同时，在点击时，要将datalist清空，否则上面显示骨架屏，下面还有在没刷新出新数据来之前，留存的数据
下面这样，还在显示的数据就是之前的数据，同时，因为此时在刷新，骨架屏也显示出来了
如果有分页功能，需要把分页功能也清空
// 点击切换导航栏
clickNav(e) {
// 重置骨架屏状态为打开
this.loadState = true;
// 清空之前获取到的数据
this.dataList = [];
// 切换最新和热门的值
this.navAction=e.index;
// 点击之后,要重新获取网络请求
this.getData()
},
