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知识点收藏
Feb 22 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
node.js实现带进度条的多文件上传
Mar 27 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
ThinkPHP安装和设置
2015/07/27 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JS功能代码集锦
2016/05/04 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python实现感知器模型、两层神经网络
2017/12/19 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
儿童学习python的一些小技巧
2018/05/27 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python gevent协程切换实现详解
2020/09/14 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
如何清空Session
2015/02/23 面试题
采购经理岗位职责
2014/02/16 职场文书
党员公开承诺书范文
2014/03/25 职场文书
房产公证书样本
2015/01/23 职场文书
个人自荐书范文
2015/03/09 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Redis RDB技术底层原理详解
2021/09/04 Redis
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android