vue 点击加载更多

最新推荐文章于 2024-04-18 00:51:06 发布
最新推荐文章于 2024-04-18 00:51:06 发布
阅读量2.4k 收藏 18
点赞数 5
分类专栏： vue点击显示更多 文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjingsuo/article/details/119534224
版权

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

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

<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=0
      let 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=0
      let 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>

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

彳亍而无所趋
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 点击加载更多vue 点击加载更多
04-26
vue 点击加载更多vue 点击加载更多
vue实现点击加载更多
2302_76386121的博客
12-06 304
2.v-if条件渲染，如果值为true，就会编译，如果为false,那么页面将不会生成html元素/标签。1.定义两个布尔型的变量，一个是默认显示的数，一个是默认加载的数loading和finished。数据库的数据全都加载完后，在底部显示没有更多了。点击加载更多，新显示6个图。
如何用Vue + Mint UI实现上拉加载更多_mintui公众号上拉,每次都从第一页开始
最新发布
2401_84411718的博客
04-18 358
(1)上拉加载是根据 page 的不断自增长，在调接口的时候获取新的数据的，如果加载出来的数据小于每页显示的数据，那么说明加载结束。需要通过 vue 数据双向绑定隐藏加载中字样(2)如果加载完数据，还需要显示没有更多数据的提示(3)使用 mint-ui 之
Vue中实现特效下拉加载更多数据
qq_51130780的博客
12-26 4596
根据vue框架实现滚动条下拉，加载更多数据。其实也包含了下面有元素和上面有元素的相关处理方法。
vue中点击查看更多实现
mrqi122的博客
09-20 4652
vue2.6.11 中，通过v-for循环list，只想显示前五条，后面的几条要通过查看更多按钮来展示。
Vant2+Vue2实现点击加载更多数据~
欢迎来到长风沛雨的博客
03-11 1653
然后要根据需求去实现对应的：当数组的长度>10个的时候，就先展示十个，然后点击下面的加载更多就可以把后面的渲染出来，而且是指定的个数。在data上声明一个变量：length，值指定，我这里给10，这里我默认展示0-10条数据。我这里的HTML结构是用了vant2的自定义宫格，然后对宫格做循环才渲染的列表。分隔从0开始，不包含10嘛，就一共是10条，这个length是前面定义的变量。前提：这个时候已经做了一个分隔，length的值我这里改为2，方便观察。打开页面一看，欸，没有保存，还成功了。
通过原生vue添加滚动加载更多功能
10-15
主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue底部加载更多的实例代码
08-27
Vue 底部加载更多实例代码详解 在本文中，我们将通过实例代码介绍 Vue 底部加载更多的实现方式，这对于需要实现类似功能的开发者具有重要的参考价值。 标题解析 本文的标题“Vue 底部加载更多的实例代码”表明了...
vue中实现滚动加载更多的示例
08-28
vue中实现滚动加载更多的示例 在本篇文章中，我们将讨论如何在Vue中实现滚动加载更多的功能。滚动加载更多是一种常见的交互式功能，用户可以通过滚动浏览器窗口来加载更多的数据。下面我们将一步步地讲解如何实现这...
vue制作加载更多功能的正确打开方式
10-21
是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，以及编写过程中自己的错误写法，分享给大家，帮助读者更好的理解Vue.js中的一些设计思想。
加载更多---vue
m0_46512929的博客
01-26 1864
可直接拿来用 <template> <div class="container"> <div class="list"> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
VUE 实现上拉加载更多数据(l两种方式)
lx6091543wwwcctv的博客
10-12 1737
注： vue中一定要设置height: 100vh;否则scroll方法不管用。一. 利用vue-infinite-loading。
vue中如何实现点击按钮后加载更多数据
浮生离梦的博客
04-09 5393
一、点击按钮后加载更多的数据显示 在 data 中，定义 pageIndex，默认为 1 ，默认展示第一页数据。定义 comments，默认为空数组，里面保存所有的评论数据，代码如下所示： data() { return { pageIndex: 1, comments: [] } } 在 created() 生命周期函数中，调用 get...
vue实现上拉加载更多
YingUser的博客
11-07 3609
细节 ：条数记得每次加载都要加等于。1、在页面底部添加元素。
【Vue】实现上拉加载更多数据（利用vue-infinite-loading）
Pulse的博客
04-23 6399
Vue-实现上拉加载更多数据（利用vue-infinite-loading）
Vue3 实现滚动加载更多
油墨香^-^的博客
08-08 2627
随着移动设备的普及，滚动加载更多已经成为了一个常见的交互方式，用户可以在滚动页面时自动加载更多的数据，这种方式避免了翻页和点击“加载更多”按钮的繁琐操作，提高了用户体验。本文将介绍如何使用 Vue3 实现滚动加载更多功能，同时提供 mock 数据，方便读者在本地调试。本文介绍了如何使用 Vue3 实现滚动加载更多功能，包括创建组件、加载数据和监听滚动事件等。希望本文能够帮助读者更好地理解 Vue3 中的setup语法糖，并在实际项目中应用。
vue 默认显示三条数据，点击加载更多按钮加载三条
孙少的博客
11-23 840
vue 默认显示三条数据，点击加载更多按钮加载三条
vue 上拉加载更多，点击加载更多、实现页面滑动到底部自动加载更多的效果
夜阑珊妖妖
08-09 1757
文章很长的时候又不使用翻页，可以考虑下拉加载。。 data () { return { scroll: true, //设置一个开关避免重复请求数据 pagenum: 1, //当前页数 totalnum: 3, //总页数 articleList: [], //页面数据数组 nomore: false } }, ...
vue 点击更多展开功能
m0_67841039的博客
01-16 804
vue 点击更多展开功能
vue滑动到底部加载更多
08-30
Vue滑动到底部加载更多的实现可以通过监听滚动事件来判断滚动条是否已经滑动到底部，从而触发加载更多的操作。 首先，在Vue组件的mounted函数中，给文档绑定滚动事件的监听器： ```javascript mounted() { window...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值