哔哩哔哩对应的视频：
1.1.课程知识点介绍及项目展示_哔哩哔哩_bilibili
1.自己写了对代码的理解：希望对各位有帮助
pages\index\index.vue：主页面
- 先使用onLoad获取数据，在显示数据到页面，在实现点击事件的操作
index.vue代码：
<template>
<view class="home">
<!-- 是在x轴进行滑动， -->
<scroll-view scroll-x class="navscroll">
<!-- 实现导航栏点击部分高亮 -->
<view class="item"
:class="index==navIndex ? 'active' : ''" v-for="(item,index) in navArr"
@click="clickNav(index,item.id)"
:key="item.id"
>{{item.classname}}</view>
</scroll-view>
<view class="content" >
<div class="row" v-for="item in newsArr" :key="item.id">
<!-- 当点击组件时→实现跳转到详情页 -->
<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
</div>
</view>
<!-- 当没有数据时，展示的图片 -->
<view class="nodata" v-if="!newsArr.length">
<image src="../../static/images/nodata.png" mode="widthFix"></image>
</view>
<!-- 加载显示→如果没有数据就不显示了 -->
<!-- 0默认 1加载中 2没有更多了 -->
<view class="loading" v-if="newsArr.length">
<view v-if="loading==1">数据加载中...</view>
<view v-if="loading==2">没有更多了~~</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navIndex:0,
navArr:[],
newsArr:[],
currentPage:1, // 默认先加载第一页的数据
currentId:50,
loading:0 //0默认 1加载中 2没有更多了
}
},
onLoad() {
this.getNavData(); // 加载导航的数据
this.getNewsData();
},
// 是触底的一个方法（子啊）
onReachBottom(){
console.log("到底部了")
// 在loading=2时，是触底没有数据了→就不用在发送一次请求了
if(this.loading==2){
return;
}
// debug：在加载数据时，到了最后面的数据后，页面是的→因为新老数据没有进行拼接
this.currentPage++; // 对应又加载一页的数据
this.loading=1;
this.getNewsData();
},
methods: {
//点击导航切换
clickNav(index,id){
this.navIndex=index; // 来说控制导航栏高亮的部分
this.currentPage=1; // 重新点击导航栏时要从第一页开始进行加载
this.currentId=id; // 对应id是获取导航栏对应的id
// debug：在第一个导航栏，最后一页的数据拼接完成了，但是页面没有进行清零，导致点击其他的导航栏时，里面的数据都在里面→并没有加载对应导航栏的数据
// 所有数组要进行清空
this.newsArr=[] // 重新点击导航栏时要清空数据→然后重新getNewsData获取对应的数据
// debug：在加载currentId:50的页面，到了没有更多数据时，然后loading=2
// 所有在触底时，不再加载更多的数据→所有loading=0的，来进行初始化
this.loading=0; // 回到默认的效果
this.getNewsData(id);
},
//跳转到详情页
goDetail(item){
uni.navigateTo({
url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
})
},
//获取导航列表数据
getNavData(){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
success:res=>{
console.log(res)
this.navArr=res.data
}
})
},
//获取新闻列表数据
getNewsData(){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
data:{
cid:this.currentId, // id是区分加载不同id对应的数据
page:this.currentPage ,// 加载第几页的数据
},
success:res=>{
console.log(res)
// 在加载数据时没有数据了→就显示2没有更多了
if(res.data.length==0){
this.loading=2
}
// 新加载一页后：新、旧数据进行了拼接
this.newsArr=[...this.newsArr,...res.data]
}
})
}
}
}
</script>
<style lang="scss" scoped>
.navscroll{
height: 100rpx;
background: #F7F8FA;
white-space: nowrap; // 不换行，在一行进行显示，有滚动条
position: fixed;
top:var(--window-top); // 在h5里面top是相对于顶部的位置→而window-top就让布局不是很乱
left:0;
z-index: 12; // 让下面的图片不占用导航栏的位置
// 去除滚动条
/deep/ ::-webkit-scrollbar {
width: 4px !important;
height: 1px !important;
overflow: auto !important;
background: transparent !important;
-webkit-appearance: auto !important;
display: block;
}
.item{
font-size: 40rpx;
display: inline-block;
line-height: 100rpx;
padding:0 30rpx;
color:#333;
&.active{
color:#31C27C;
}
}
}
.content{
padding:30rpx;
padding-top:130rpx;
.row{
border-bottom:1px dotted #efefef;
padding:20rpx 0;
}
}
.nodata{
display: flex;
justify-content: center;
image{
width: 360rpx;
}
}
</style>pages\user\user.vue：个人中心
- 先是加载了缓存：然后把数据传到组件里面实现浏览历史的去重的操作
user.vue代码：
<template>
<view class="user">
<view class="top">
<image src="../../static/images/history.png" mode=""></image>
<view class="text">浏览历史</view>
</view>
<view class="content">
<view class="row" v-for="item in listArr">
<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
</view>
</view>
<view class="nohistory" v-if="!listArr.length">
<image src="../../static/images/nohis.png" mode="widthFix"></image>
<view class="text">暂无浏览记录</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
listArr:[]
};
},
// 本来是onLoad，但是每次都要进行刷新
onShow(){
this.getData()
},
methods:{
//跳转到详情页
goDetail(item){
uni.navigateTo({
url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
})
},
//获取缓存浏览记录
getData(){
let hisArr=uni.getStorageSync("historyArr") || []
this.listArr=hisArr
console.log(this.listArr)
}
}
}
</script>
<style lang="scss">
.user{
.top{
padding:50rpx 0;
background: #F8F8F8;
color:#666;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 150rpx;
height: 150rpx;
}
.text{
font-size: 38rpx;
padding-top: 20rpx;
}
}
.content{
padding:30rpx;
.row{
border-bottom:1px dotted #efefef;
padding:20rpx 0;
}
}
.nohistory{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image{
width: 450rpx;
}
.text{
font-size: 26rpx;
color:#888;
}
}
}
</style>components\newsbox：组件
<template>
<view class="newsbox">
<view class="pic">
<image :src="item.picurl" mode="aspectFill"></image>
</view>
<view class="text">
<view class="title">
{{item.title}}
</view>
<!--首页要显示的内容 -->
<view class="info" v-if="!item.looktime">
<text>{{item.author}}</text>
<text>{{item.hits}}浏览</text>
</view>
<!-- 个人页面要显示的内容 -->
<view class="info" v-else>
<!-- 在个人页面存入缓存时，item里面的时间就是looktime-->
<!-- 在个人页面里面加载的数据只需要：标题、浏览时间、标题id、文章对应的id-->
<text>浏览时间：{{item.looktime}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name:"newsbox",
props:{
item:{
type:Object,
default(){
return {
title:"组件内默认的标题",
author:"张三",
hits:668,
picurl:"../../static/images/nopic.jpg"
}
}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.newsbox{
display: flex;
.pic{
width: 230rpx;
height: 160rpx;
image{
width: 100%;
height: 100%;
}
}
.text{
flex:1;
padding-left:20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title{
font-size: 36rpx;
color:#333;
// 网上的代码：标题溢出使用省略号来进行代替
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.info{
font-size: 26rpx;
color:#999;
text{
padding-right: 30rpx;
}
}
}
}
</style>pages\detail\detail.vue：详情页
detail.vue：代码
<template>
<view class="detail">
<view class="title">{{detail.title}}</view>
<view class="info">
<view class="author">编辑：{{detail.author}}</view>
<view class="time">发布日期：{{detail.posttime}}</view>
</view>
<!-- rich-text是来解析富文本的→组件/内置组件-->
<!-- node是节点列表 -->
<view class="content">
<rich-text :nodes="detail.content"></rich-text>
</view>
<view class="description">
声明：本站的内容均采集与腾讯新闻，如果侵权请联系管理（513894357@qq.com）进行整改删除，本站进行了内容采集不代表本站及作者观点，若有侵犯请及时联系管理员，谢谢您的支持。
</view>
</view>
</template>
<script>
import {parseTime} from "@/utils/tool.js"
export default {
data() {
return {
options:null,
detail:{}
};
},
// 获取对应路径的参数
onLoad(e){
this.options=e;
this.getDetail();
},
methods:{
getDetail(){
uni.request({
url:"https://ku.qingnian8.com/dataApi/news/detail.php",
data:this.options,
success:res=>{
console.log(res)
// 时间戳的转换
res.data.posttime=parseTime(res.data.posttime)
// 图片格式的转换→让图片显示完整
res.data.content=res.data.content.replace(/<img/gi,'<img style="max-width:100%"')
this.detail=res.data
this.saveHistory()
// 在跳转详情页时→进行替换标题
uni.setNavigationBarTitle({
title:this.detail.title
})
}
})
},
// 存储到缓存→在个人页面进行加载查看自己的浏览的历史
saveHistory(){
// 先看缓存是否有数据
let historyArr=uni.getStorageSync("historyArr") || []
// 在展示历史时，只需要下面的数据
let item={
id:this.detail.id, // 对应加载文章详情的标识
classid:this.detail.classid, // classid是对应的 cid=50→导航栏的id
picurl:this.detail.picurl,
title:this.detail.title,
looktime:parseTime(Date.now())
}
// 是浏览历史去重→去重对应index的id数据
let index=historyArr.findIndex(i=>{
return i.id==this.detail.id
})
// 删除对应重复index的浏览历史
// 没有重复的index=-1，有重复的index=0
if(index>=0){
historyArr.splice(index,1)
}
// 进行追加到historyArr数值里面
historyArr.unshift(item)
// 最多加载10条数据→截取前10条数据
historyArr=historyArr.slice(0,10)
uni.setStorageSync("historyArr",historyArr)
}
}
}
</script>
<style lang="scss">
.detail{
padding:30rpx;
.title{
font-size: 46rpx;
color:#333;
}
.info{
background: #F6F6F6;
padding:20rpx;
font-size: 25rpx;
color:#666;
display: flex;
justify-content: space-between;
margin:40rpx 0;
}
.content{
padding-bottom:50rpx;
}
.description{
background: #FEF0F0;
font-size: 26rpx;
padding:20rpx;
color:#F89898;
line-height: 1.8em;
}
}
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
