vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

2020/04/15 09:27
阅读数 6.9K

vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载、下拉刷新和返回顶部也是移动端最基础最常见的功能。下面就用vant-ui来实现在三个功能。

首先,你需要安装好了vant,做好了相关配置 ,如果没有,请参考vant的官方文档 https://youzan.github.io/vant/#/zh-CN/quickstart
这里使用的自动按需加载的方式 。做好这些之后,你需要引入组件 ,自动按需加载的只是css和js。

import Vue from 'vue' //引入vue
import { Icon, List, PullRefresh } from 'vant'    //引入字体图标,列表, 下拉刷新

Vue.use(List);
Vue.use(PullRefresh);  

下面的组件的使用和官方文档中也是一样的

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh(-1)">
。。。  //列表内容,需要加载和刷新的部分 
</van-pull-refresh>
  <van-cell
    v-for="item in list"
    :key="item"
    :title="item"
  />
</van-list>
export default {
  data() {
    return {
      flag_scroll: false,
      loading: false,
      finished: false,
      isLoading: false,
      page:1,
    };
  },

  methods: {
   //上拉加载
//异步请求数据 ,我们的项目时封装好的方法,此处只是调用
    onLoad(code){
      let body = {}
      body.page = this.page
      body.lifecycleStatus = code  //传递的参数 
      this.getMaintenanceMoreList({
        body,
        failure: (resData) => {
        },
        //上面的这些都不需要理会,只要记得在数据请求成功的回调里做以下操作:
        success: (resData) => {
          this.loading = false;   //数据请成功后
          this.page++   //页码要增加1
          if(resData.data.rows.length == 0){//如果返回数据为空,则显示没有数据了。。。
            this.finished = true;
          }
        }
      })
    },
}

需要注意的点:

  • 请求成功后this.loading = false
  • 页码自增this.page++
  • 判断是否还有数据,如果已经全部请求出来了,this.finished = true
  • 拼接数组 state.MAIMTENANCE_LIST = [... state.MAIMTENANCE_LIST, ...resData.data.rows]

因为项目中用的状态管理器,所以数据的处理是在store里进行操作的,只需要讲请求回的列表的数据进行拼接即可state.MAIMTENANCE_LIST = [... state.MAIMTENANCE_LIST, ...resData.data.rows]

下拉刷新:

onRefresh() {
      this.finished = false;
      this.page = 1
        this.getList()//正常的请求数据的方法,数组重新赋值
    },
//列表请求会在多处使用,所以放在了一个方法里
getList () {
      let body = {}
      body.page = this.page
      this.getMaintenanceList({
        body,
        failure: (resData) => {
        },
        success: (resData) => {
          this.isLoading = false;
          this.page++  
        }
      })
    }

注意事项:

  • this.finished = false; 上拉加载完数据之后 this.finished = false,如果不设置为false,下拉刷新之后上拉加载将不会执行
  • this.page = 1 上拉加载时this.page的值已经发生变化,下拉刷新之后页面显示的首屏的数据 ,上拉时要重新加载分页。
  • this.isLoading = false; this.isLoading = true的情况下数据请求成功但是不会继续往下执行,为false之后才会继续执行
  • this.page++ 是为了上拉加载做准备,首屏已经加载,继续上拉需要加载的是第二页的内容

返回顶部是最容易实现的了,请看:

<van-button type="default" class="backTop" @click="backTop" v-show="flag_scroll">
      <van-icon name="arrow-up" size="20" />
</van-button>
//在methods里定义方法
backTop(){
      document.getElementsByClassName('equi_container')[0].scrollTop = 0
   },

这就可以啦。。。点击按钮,让滚动条高度为0.

注意:是给滚动的父元素设置,也就是设置了overflow:auto的元素
如果不想让按钮在一开始的时候存在,而是在滚动了一定的距离的时候再出现,那设置 一个滚动条的监听就搞定啦,

mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },

//methods中定义事件
handleScroll(env){
      let scrollTop = document.getElementsByClassName('equi_container')[0].scrollTop
      if(scrollTop > 100){
        this.flag_scroll = true
      }else {
        this.flag_scroll = false
      }
    },

前提是,你要在data中定义属性flag_scroll,并设置按钮的v-if或者v-show,建议使用v-show

注意:按钮要设置固定定位,按钮最好设置边框,会好看。

写的有点乱,望大神指点,希望能给予需要的人一点点的帮助,有不明白的欢迎留言,谢谢!

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部