Vue实现腾讯新闻案例⽗组件：
<template>
<div>
<div class="news-top">
<div >
<input type="text"
@="search"
v-model="kw"
@focus="handleFocus"
@blur="handleBlur"
@keydown.down="down"
@keydown.up="up">
<button @click="search">搜索</button>
</div>
<div class="search-list" v-show="isSearch">
<div v-for="(item,index) in searchRecord"
:class="{'active':activeIndex==index}">
{{item}}
</div>
</div>
</div>
<div >
<div v-for="(item,index) in newsList">
<NewsCard1
v-if="item.imageUrls != null && item.imageUrls.length >= 3"
:title="item.title"
:imageUrls="item.imageUrls"
:publishDate="item.publishDate"
:posterScreenName="item.posterScreenName">
</NewsCard1>
<NewsCard2
v-if="item.imageUrls != null && item.imageUrls.length > 0 && item.imageUrls.length < 3"
:title="item.title"
:
imageUrls="item.imageUrls"
:publishDate="item.publishDate"
:posterScreenName="item.posterScreenName">
</NewsCard2>
</div>
<p >
<button v-show="isShow" @click="getMore">加载更多</button>
<span v-show="isHide">{{load}}</span>
</p>
</div>
</div>
</template>
<script>
<script>
import NewsCard1 from'../components/NewsCard1.vue' import NewsCard2 from'../components/NewsCard2.vue' export default{
components:{
NewsCard1,
NewsCard2
},
data(){
return{
kw:'',//搜索关键词
newsList:[],
page:1,//页数
isShow:false,//显⽰或隐藏'加载更多'
isHide:false,//显⽰或隐藏'正在加载...'
load:'正在加载...',
searchRecord:[],//搜索记录
isSearch:false,//显⽰或隐藏'搜索记录'
activeIndex:-1//被选中的记录的下标
}
},
created(){//初始化保存
let list = localStorage.searchRecord
if(list){
this.searchRecord =JSON.parse(list)
}
},
watch:{
kw(val){
if(val.length ==0){
this.activeIndex =-1
}
}
},
methods:{
down(){
if(this.activeIndex ==this.searchRecord.length-1){
return
}
this.activeIndex++
},
up(){
if(this.activeIndex<=0){
return
}
this.activeIndex--
},
handleFocus(){//获取焦点时
if(this.searchRecord !=''){
this.isSearch =true
}else{
this.isSearch =false
}
},
handleBlur(){//失去焦点时
this.isSearch =false
this.activeIndex =-1
},
search(){//搜索
if(this.activeIndex>-1){
this.kw =this.searchRecord[this.activeIndex]
}
this.isSearch =false
this.isHide =true
this.instance()
this.instance()
if(!this.searchRecord.includes(im())){//判断重复搜索记录this.searchRecord.push(this.kw)
this.save()
}
},
instance(){//封装axios
this.$('api.kudesoft/news/list',{
params:{
kw:this.kw,
page:this.page
}
}).then(res=>{
console.log(sult.data)
let list = sult.data
if(list == undefined){
this.load ='没有更多数据了！'
return
}else{
this.load ='正在加载...'
}
if(this.page<=1){
this.isShow =true
this.isHide =false
}else{
this.isShow =true
this.isHide =false
}
})
},
getMore(){//加载更多
this.page++
this.isShow =false
this.isHide =true
this.instance()
},
save(){//本地保存
localStorage.searchRecord =JSON.stringify(this.searchRecord) }
}
}
</script>
<style scoped>
.search-list{
width:163px;
border-bottom:1px solid;
border-left:1px solid;
border-right:1px solid;
background-color: white;
margin-top:-1px;
}
.active{
background-color: lightgray;
}
.news-top{
position: fixed;
top:0;
left:0;
left:0;
}
</style>
⼦组件：
<template>
<div class="news-dbox">
<div>
{{title}}
</div>
<div class="news-img">
<img v-for="(item,index) in imageUrls":src="item" v-show="index<3" width="115px" height="100px"> </div>
<div class="news-bot">
<span>{{posterScreenName}}</span>
<span>评论</span>
<span>{{publishDate | TimeFilter}}</span>
</div>
</div>
</template>
<script>
export default{
props:{
title:String,//标题
imageUrls:Array,//图⽚
publishDate:Number,//发布⽇期时间戳
posterScreenName:String //发布者名称
},
filters:{
TimeFilter(time){
let oldDate =new Date(time*1000)
let newDate =new Date()
var dayNum ="";
var getTime =(Time()- Time())/1000;
if(getTime <60*5){
dayNum ="刚刚";
}else if(getTime >=60*5&& getTime <60*60){
dayNum =parseInt(getTime /60)+"分钟前";
}else if(getTime >=3600&& getTime <3600*24){
dayNum =parseInt(getTime /3600)+"⼩时前";
}else if(getTime >=3600*24&& getTime <3600*24*30){
dayNum =parseInt(getTime /3600/24)+"天前";
}else if(getTime >=3600*24*30&& getTime <3600*24*30*12){
dayNum =parseInt(getTime /3600/24/30)+"个⽉前";
}else if(time >=3600*24*30*12){
dayNum =parseInt(getTime /3600/24/30/12)+"年前";
}
return dayNum;
}
}
}
</script>
<style scoped="scoped">
.news-dbox{
width:100%;
height:175px;
display: flex;
display: flex;
flex-direction: column;
justify-content: space-around;
margin:10px 0;
border-bottom:1px solid lightgray;
}
.news-img{
display: flex;
justify-content: space-around;
htmlborder
}
.news-img img{
border-radius:3px;
}
.news-bot span{
margin:05px;
}
</style>
⼦组件：
<template>
<div class="news-dbox">
<div > <div>{{title}}</div>
<div class="news-bot">
<span>{{posterScreenName}}</span>
<span>评论</span>
<span>{{publishDate | TimeFilter}}</span>
</div>
</div>
<div class="news-img">
<img :src="imageUrls[0]" width="130px" height="110px">
</div>
</div>
</template>
<script>
export default{
props:{
title:String,//标题
imageUrls:Array,//图⽚
publishDate:Number,//发布⽇期时间戳
posterScreenName:String //发布者名称
},
filters:{
TimeFilter(time){
let oldDate =new Date(time*1000)
let newDate =new Date()
var dayNum ="";
var getTime =(Time()- Time())/1000;
if(getTime <60*5){
dayNum ="刚刚";
}else if(getTime >=60*5&& getTime <60*60){
dayNum =parseInt(getTime /60)+"分钟前";
}else if(getTime >=3600&& getTime <3600*24){
dayNum =parseInt(getTime /3600)+"⼩时前";
}else if(getTime >=3600*24&& getTime <3600*24*30){
dayNum =parseInt(getTime /3600/24)+"天前";
}else if(getTime >=3600*24*30&& getTime <3600*24*30*12){
dayNum =parseInt(getTime /3600/24/30)+"个⽉前";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。