vue 点击加载更多

然后按照需求一步步来，先写基本页面

如果不想看过程，直接去后面完整代码那就可以

<template><div><div><div class="Journalism" ref="div"><div v-for="item in todos" :key="item.id" ref="show"><span>{{item.title}}</span><span>{{item.time}}</span></div></div><div class="JournalismShow">显示更多<i class="el-icon-arrow-down"></i></div></div></div>
</template>
<script>
export default {data(){return{todos:[{id:"1",title:"31省区市新增本土确诊80例、无症状21例",time:'2021-08-06'},{id:"2",title:"江苏新增本土确诊病例61例 其中扬州58例",time:'2021-08-06'},{id:"3",title:"因为这件事 美国又打脸谭德塞！",time:'2021-08-06'},{id:"4",title:"恶劣！拜登签署一份干涉港备忘录",time:'2021-08-06'},{id:"5",title:"巴萨官宣梅西正式离队",time:'2021-08-06'},{id:"6",title:"深圳甩出“王炸” 学区房炒作能否彻底“熄火”？",time:'2021-08-06'},{id:"7",title:"伊朗新总统刚就职 美国就喊话了",time:'2021-08-06'},{id:"8",title:"“全省最差场地” 全红婵儿时就在这里训练",time:'2021-08-06'},{id:"9",title:"湖北新增6例本土确诊、12例本土无症状",time:'2021-08-06'},{id:"10",title:"河南新增1例本土确诊、8例本土无症状",time:'2021-08-06'}],}},
}
</script><style scoped lang="scss">
.Journalism{width: 500px;div{display: flex;justify-content: space-between;span{height: 50px;font-size: 18px;color: #666;line-height: 50px;}}
}.JournalismShow{position: absolute;width: 500px;text-align: center;cursor:pointer;
}
</style>

效果：

后面只贴变化的代码

需求：默认显示5条其余点击显示更多后显示

<template><div><div><div class="Journalism" :class="{active:flag}" ref="div"><!-- 动态判断是否显示隐藏部分 --><div v-for="item in todos" :key="item.id" ref="show"><span>{{item.title}}</span><span>{{item.time}}</span></div></div><div class="JournalismShow" @click="showTag">显示更多<i :class="flag ? 'el-icon-arrow-down' :'el-icon-arrow-up'"></i></div><!-- 动态判断显示的图标 --></div></div>
</template>
<script>
export default {data(){return{flag:true}},methods:{//点击后切换状态showTag(){this.flag=!this.flag}}
}
</script><style scoped lang="scss">
//默认隐藏
.active{overflow: hidden;height: 250px;
}
</style>

页面效果：

写到现在我们可以发现css中高度是写死的，上边代码中的div高度都是一样的。

还有一种就是超出宽度换行显示，这种情况写死高度就会出现有可能某一行高度显示不完整

解决：

<template><div><div><!-- scss使用js变量 --><div :style="{'--divHeight':divHeight,'--showHeight':showHeight}" class="Journalism" :class="{active:flag}" ref="div"></div></div></div>
</template>
<script>
export default {data(){return{divHeight:"",showHeight:"",}},methods:{// 获取高度getHeight(){this.divHeight=this.$refs['div'].clientHeight+"px"let numb=0let arr=this.$refs['show']arr.forEach((item,index)=>{if(index<5){numb+=item.clientHeight}})this.showHeight=numb+'px'},},mounted(){this.getHeight()}
}
</script><style scoped lang="scss">
//默认隐藏
.active{overflow: hidden;height: var(--showHeight);
}
</style>

到现在页面基本完成，再设置下css样式就可了。本来是想用过渡的，但是过渡效果需要伪类激活，所以我们选择css动画

<style scoped lang="scss">
.Journalism{width: 500px;overflow: hidden;animation-name: examp;animation-duration: 1s;div{display: flex;justify-content: space-between;span{height: 50px;font-size: 18px;color: #666;line-height: 50px;}}
}
//默认隐藏
.active{overflow: hidden;height: var(--showHeight);animation-name: example;animation-duration: 1s;
}@keyframes example {from {height: var(--divHeight);}to {height: var(--showHeight);}
}
@keyframes examp {from {height: var(--showHeight);}to {height: var(--divHeight);}
}
</style>

页面效果

页面写到这里本来以为结束了，但是实验的时候就又发现了问题，刷新页面或者从其他页面跳到此页面后就会先执行了一次的动画，并且页面会闪烁一下。

我想要的是点击后才出现动画，解决的方式也是简单粗暴到让人窒息

<template><div><div class="top"><div :style="{'--divHeight':divHeight,'--showHeight':showHeight}" class="Journalism" :class="flag==0 ?  '' : (flag==1 ?  'active2' : 'active')" ref="div"><!-- 使用三目运算判断是否执行或执行某一个 --><div v-for="item in todos" :key="item.id" ref="show"><span>{{item.title}}</span><span>{{item.time}}</span></div></div><div class="JournalismShow" @click="showTag">显示更多<i :class="flag==1 ?  'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></div><!-- 使用三目运算判断图标的方向 --></div></div>
</template>
<script>
export default {data(){return{// 开始的默认值flag:0,}},methods:{showTag(){// 使用if判断flag的值if(this.flag==0){this.flag=1}else if(this.flag==1){this.flag=2}else{this.flag=1}}}
}
</script><style scoped lang="scss">
.Journalism{width: 500px;overflow: hidden;height: var(--showHeight);div{display: flex;justify-content: space-between;span{height: 50px;font-size: 18px;color: #666;line-height: 50px;}}
}
.JournalismShow{position: absolute;width: 500px;text-align: center;cursor:pointer;
}
.active{overflow: hidden;height: var(--showHeight);animation-name: example;animation-duration: 1s;
}
.active2{height: var(--divHeight);animation-name: examp;animation-duration: 1s;
}@keyframes example {from {height: var(--divHeight);}to {height: var(--showHeight);}
}
@keyframes examp {from {height: var(--showHeight);}to {height: var(--divHeight);}
}
</style>

完整代码：

<template><div><div class="top"><div :style="{'--divHeight':divHeight,'--showHeight':showHeight}" class="Journalism" :class="flag==0 ?  '' : (flag==1 ?  'active2' : 'active')" ref="div"><div v-for="item in todos" :key="item.id" ref="show"><span>{{item.title}}</span><span>{{item.time}}</span></div></div><div class="JournalismShow" @click="showTag">显示更多<i :class="flag==1 ?  'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></div></div></div>
</template>
<script>
export default {data(){return{todos:[{id:"1",title:"31省区市新增本土确诊80例、无症状21例",time:'2021-08-06'},{id:"2",title:"江苏新增本土确诊病例61例 其中扬州58例",time:'2021-08-06'},{id:"3",title:"因为这件事 美国又打脸谭德塞！",time:'2021-08-06'},{id:"4",title:"恶劣！拜登签署一份干涉港备忘录",time:'2021-08-06'},{id:"5",title:"巴萨官宣梅西正式离队",time:'2021-08-06'},{id:"6",title:"深圳甩出“王炸” 学区房炒作能否彻底“熄火”？",time:'2021-08-06'},{id:"7",title:"伊朗新总统刚就职 美国就喊话了",time:'2021-08-06'},{id:"8",title:"“全省最差场地” 全红婵儿时就在这里训练",time:'2021-08-06'},{id:"9",title:"湖北新增6例本土确诊、12例本土无症状",time:'2021-08-06'},{id:"10",title:"河南新增1例本土确诊、8例本土无症状",time:'2021-08-06'}],divHeight:'',showHeight:"250",flag:0,}},methods:{showTag(){if(this.flag==0){this.flag=1}else if(this.flag==1){this.flag=2}else{this.flag=1}},getHeight(){this.divHeight=this.$refs['div'].clientHeight+"px"let numb=0let arr=this.$refs['show']arr.forEach((item,index)=>{if(index<5){numb+=item.clientHeight}})this.showHeight=numb+'px'},},mounted(){this.getHeight()},
}
</script><style scoped lang="scss">
.Journalism{width: 500px;overflow: hidden;height: var(--showHeight);div{display: flex;justify-content: space-between;span{height: 50px;font-size: 18px;color: #666;line-height: 50px;}}
}
.JournalismShow{position: absolute;width: 500px;text-align: center;cursor:pointer;
}
.active{overflow: hidden;height: var(--showHeight);animation-name: example;animation-duration: 1s;
}
.active2{height: var(--divHeight);animation-name: examp;animation-duration: 1s;
}@keyframes example {from {height: var(--divHeight);}to {height: var(--showHeight);}
}
@keyframes examp {from {height: var(--showHeight);}to {height: var(--divHeight);}
}
</style>

如果大家有更好的方法，欢迎告知！！！

vue 点击加载更多相关推荐

前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
PHP+Ajax点击加载更多列表数据实例
PHP+Ajax点击加载更多列表数据实例一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过"更多"按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的 ...
底部点击加载更多功能的简单实现
底部点击加载更多功能的简单实现主要思路是:后台将数据按10个一页进行处理,前端请求的时候传递的分页参数就是页数.从主页选择一个类型去到列表页,会先从后端请求10条数据渲染到页面上.点击加载更多的 ...
html加载更多实现代码,如何实现点击“加载更多”？
看你的样子用的应该是java写的后端(, ...).为了实现加载更多,其实就是点击按钮后在不刷新页面的情况下添加更多的内容显示到当前页面中.用ajax拉取数据,前提是后端能够根据条件(例如:页号.分类 ...
php ajax 上拉显示更多,PHP+Ajax点击加载更多内容－这个效果好，速度快，只能点击更多加载，不能滚动自动加载...
这个效果好,速度快,只能点击更多加载,不能滚动自动加载一.HTML部分 ::点击加载更多内容:: 引入jQuery插件和jquery.more.js加载更多插件 jQuery $(function( ...
vue 2 滚动条加载更多数据实现
vue 2 滚动条加载更多数据实现解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上 ...
前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
vux loadmore + axios 实现点击加载更多
在微信项目中有应用过几个上拉加载更多的组件,但总会出现一些兼容性方面的bug,需要各种补漏(注:组件都是基于iscroll实现的, iscroll原本就有些坑).Vux也有提供Scroller组件实现 ...

vue 点击加载更多

vue 点击加载更多相关推荐

最新文章

热门文章