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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
jQuery中extend函数详解
Feb 13 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jQuery知识点整理
2015/01/30 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
jquery mobile开发常见问题分析
2016/01/21 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
原生js轮播特效
2017/05/18 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python with语句和过程抽取思想
2019/12/23 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
办理居住证介绍信
2014/01/15 职场文书
银行奉献演讲稿
2014/09/16 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书