vue实现滑动到底部加载更多效果


Posted in Javascript onOctober 27, 2020

本文实例为大家分享了vue实现滑动到底部加载更多的具体代码,供大家参考,具体内容如下

思路:

如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了

template:

<template>
 <div class="content">
 <div class="logo">
  <div>
  <img v-if="server[0].thUintroduceLogo" :src="setIp + server[0].thUintroduceLogo" alt="">
  <img v-if="!server[0].thUintroduceLogo" src="../../../assets/images/shooping/u538.png" alt="">
  </div>
  <div>
  <span>{{server[0].companyName}}</span>
  </div>
  <div @click="callCustomer()">
  <img src="../../../assets/images/shooping/u37.png" alt=""> 致电客服
  </div>
 </div>
 <div class="info">
  <div class="swipe">
  <mt-swipe ref="swipe" :auto="0" :showIndicators="false" @change="swipeChange">
   <mt-swipe-item v-for="(item,index) in server[0].thUintroduceImg.split(',')" :key="index">
   <div class="jcc">
    <img :src="setIp + item" alt="">
   </div>
   </mt-swipe-item>
  </mt-swipe>
  <span class="index">{{activeIndex}}/{{server[0].thUintroduceImg.split(',').length}}</span>
  </div>
  <div class="info1">
  <p>{{server[0].thUintroduceText}}</p>
  <span @click="hidden()" v-if="show"> <i>......</i> 展开</span>
  </div>
 </div>
 <div class="shopping">
  <h4>
  <img src="../../../assets/images/shooping/u19.png" alt="">
  <span>全部商品</span>
  </h4>
  <img src="../../../assets/images/shooping/split.jpg" alt="">
 </div>
 <div>
  <div ref="my_pull" class="listUl">
  <div v-for="item in server" :key="item.pId" class="itemLIST" @click="pushInfo(item)">
   <div>
   <img :src="setIp + item.pImgeOne" alt="">
   </div>
   <div>
   <h3>{{item.pTitle}}</h3>
   <p>
    <span>已售{{item.pSaleNums}}件</span>
    <span v-if="!isMemberId">价格登录可见</span>
    <span v-if="isMemberId">¥{{item.uPrice}}</span>
   </p>
   </div>
  </div>
  <!-- <div v-for="item in 10" :key="item" style="height:100px">{{item}}</div> -->
  </div>
 </div>
 <div v-if="isbottom == -1" class="isbottom">
  <i class="iconfont icon-jiazai1"></i>
  <span>加载中,请稍后</span>
 </div>
 <div v-if="isbottom == 1" class="isbottom">
  <span>没有更多数据了</span>
 </div>
 </div>
</template>

script:

<script>
 import {
 Swipe,
 SwipeItem,
 Popup
 } from 'mint-ui'
 export default {
 data: () => ({
  server: [],
  page: 1,
  clientHeight: 0,
  el: {},
  isbottom: 0,
  show: true,
  activeIndex: 1
 }),
 created() {
  this.getServer()
 },
 beforeDestroy() {
  let title = document.querySelector("#title")
  title.style.background = "#6a7d8f";
  let arr = document.querySelector(".is-left")
  arr.style.color = "#fff"
 },
 computed: {
  isMemberId() {
  return this.$store.state.isMemberId
  }
 },
 mounted() {
  this.clientHeight = document.documentElement.clientHeight
  this.$nextTick(() => {
  let title = document.querySelector("#title")
  title.style.background = "#fff";
  let arr = document.querySelector(".is-left")
  arr.style.color = "#333"
  this.el = this.$refs.my_pull;
  window.addEventListener('scroll', this.handleScroll)
  })
 },
 methods: {
  callCustomer() {
  let msg = this.server[0].thServicePhone;
  $App.callCustomer(msg);
  },
  swipeChange() {
  this.activeIndex = this.$refs.swipe.index + 1
  },
  hidden() {
  let el = document.querySelector(".info1")
  el.style.height = "auto"
  this.show = false
  },
  pushInfo(item) {
  this.$store.dispatch("newshoppingInfo", item)
  console.log(this.$store.state.shoppingInfo);
  this.$router.push({
   path: "/shooping/shoopingInfo",
  })
  },
  handleScroll() {
  let a = this.el.getBoundingClientRect().bottom;
  a = Math.ceil(a);
  if (a == this.clientHeight) {
   this.isbottom = -1
   this.page++
   this.getServer()
  }
  },
  // 获取后台数据
  getServer() {
  $App.showWebActivity();
  this.$http.post(this.root + 'agriculture/xxxxxxxxx', {
   key: this.zkey,
   code: this.zcode,
   page: this.page,
   rows: 4,
   townsid: sessionStorage.getItem("villageId"),
   pUid: sessionStorage.getItem("shoppingUid")
  }, {
   emulateJSON: true
  }).then((res) => {
   $App.dismissWebActivity()
   if (res.body.code == 100) {
   if (this.page == 1) {
    this.server = res.body.list.rows;
   } else {
    this.server = this.server.concat(res.body.list.rows)
   }
   if (res.body.list.rows.length >= 4) {
    this.isLast = false
   } else {
    this.isLast = true;
    this.isbottom = 1
    window.removeEventListener('scroll', this.handleScroll)
   }
   } else {
   $App.toastWebActivity(res.body.message)
   console.log(res)
   }
  }, (err) => {
   $App.dismissWebActivity()
  })
  },
 },
 }
</script>

style:

<style lang="less" scoped>
 .content {
 .isbottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  color: #999;
  i {
  font-size: 30px;
  animation: rotate 1s infinite;
  }
  span {
  color: #ccc;
  padding-left: 15px;
  }
 }
 .logo {
  background: #fff;
  padding-bottom: 15px;
  div {
  &:nth-child(1) {
   display: flex;
   justify-content: center;
   img {
   width: 60px;
   height: 60px;
   }
  }
  &:nth-child(2) {
   text-align: center;
   padding: 15px 15px;
   color: #609bf0;
  }
  &:nth-child(3) {
   display: flex;
   justify-content: center;
   align-items: center;
   color: #1296db;
   border: #1296db 1PX solid;
   width: 50%;
   margin: 0 auto;
   padding: 5px 0;
   font-size: 15px;
   img {
   width: 20px;
   height: 20px;
   margin-right: 8px;
   }
  }
  }
 }
 .info {
  background: #fff;
  margin-bottom: 10px;
  padding-bottom: 15px;
  .swipe {
  height: 300px;
  background: #eee;
  position: relative;
  .jcc {
   display: flex;
   justify-content: center;
   height: 300px;
  }
  img {
   // width: 100%;
   height: 100%;
  }
  .index {
   position: absolute;
   background: rgba(243, 244, 245, .8);
   padding: 5px 15px;
   bottom: 10px;
   right: 10px;
   border-radius: 50px;
  }
  }
 }
 .info1 {
  background: #fff;
  position: relative;
  padding: 15px 9px 0;
  height: 79px;
  overflow: hidden;
  p {
  line-height: 22px;
  text-indent: 2em;
  letter-spacing: 1.2px;
  }
  span {
  width: 75px;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 9px;
  color: #39c;
  background: #fff;
  i {
   color: #333;
  }
  }
 }
 .shopping {
  background: #fff;
  padding-top: 15px;
  h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
  >img {
   width: 30px;
   height: 30px;
   margin-right: 10px;
  }
  span {
   color: #0f589e;
   font-weight: normal;
  }
  }
  img {
  display: block;
  width: 100%;
  height: 2px;
  }
 }
 .listUl {
  // display: flex;
  // flex-wrap: wrap;
  padding: 0 15px;
  top: 60px;
  height: calc(100% - 100px) !important;
  background: #fff;
  overflow: hidden;
  .itemLIST {
  // float: left;
  width: 50%;
  display: inline-block;
  padding-top: 15px;
  padding-bottom: 15px;
  &:nth-child(2n) {
   padding-right: 5px;
  }
  &:nth-child(2n -1) {
   padding-left: 5px;
  }
  img {
   // width: 100%;
   height: 100%;
   /* prettier-ignore */
   // border: 1PX solid #eee;
  }
  div {
   &:first-child {
   overflow: hidden;
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   &:last-child {
   h3 {
    font-weight: normal;
    font-size: 16px;
    margin-top: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
   }
   p {
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between; // padding: 0 15px;
    padding-right: 10px;
    span {
    display: block;
    &:first-child {
     color: #888;
    }
    &:last-child {
     color: red;
     font-size: 16px;
    }
    }
   }
   }
  }
  }
 }
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js实现tab切换效果实例
Sep 16 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 #Javascript
jQuery zTree树插件的使用教程
Aug 16 #jQuery
Vue 权限控制的两种方法(路由验证)
Aug 16 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
文字幻灯片
2006/06/26 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JS中数组重排序方法
2016/11/11 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
react-redux中connect()方法详细解析
2017/05/27 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python函数和模块的使用总结
2019/05/20 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
SQL数据库笔试题
2016/03/08 面试题
计算机专业自我鉴定
2013/10/15 职场文书
2014年底个人工作总结
2015/03/10 职场文书
go xorm框架的使用
2021/05/22 Golang