十分钟教你用vant实现下拉刷新上拉加载

电玩女神 2021-12-21 02:15 3890阅读 0赞

##                                    十分钟教你用vant实现下拉刷新上拉加载 ##

vant是有赞团队推出的基于vue一套移动端小程序UI框架，不写小程序我也用了下，还是很不错的，刚好今天要做一个移动端上拉刷新下拉加载功能，去网上看的例子当中，没有一个是尼玛能用的，我下面贴出的代码，亲测可用。

选择了上班，以为自己没有了梦想，当孤独来临的时候，如果专注于学习，那么你一定会遇上优秀的自己。这就是为什么要路过人间。

一、安装vant使用命令

通过npm安装

npm i vant -S

二、按需引入组件，操作.babelrc文件写入

![20190627213728317.png][]

\["import", \{"libraryName": "vant", "libraryDirectory": "es", "style": true\}\]

三、操作main.js真正导入自己所需要的组件，写入如下两句

import \{ PullRefresh, List, Dialog \} from 'vant'

Vue.use(PullRefresh).use(List).use(Dialog)

四、上拉刷新下拉加载的列表index.vue

<template >
      <div class="roadWrapper">
        <div class="road">
          <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh">
            <van-list
              v-model="isUpLoading"
              :finished="upFinished"
              :immediate-check="false"
              :offset="10"
              finished-text="我是有底线的"
              @load="onLoadList">
              <div v-if="dtWinNumberInfos.length > 0" class="allcontent">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in dtWinNumberInfos"
                    :key="index"
                    :hide-timestamp="true"
                    color="#0bbd87">
                    <div class="timeWrapper" @click="handleRoadDetail(activity)">
                      <div class="titleText">{
       { activity.title }}</div>
                      <div>{
       { activity.createtime.substring(0, 10) }}</div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
        <not-data v-if="dtWinNumberInfos.length == 0" :tip="nullTip"></not-data>
      </div>
    </template>
    <script>
    import NotData from '@/components/not-data/not-data'
    
    export default {
      components: {
        NotData
      },
      data() {
        return {
          nullTip: '空空如也~',
          pageSize: 10, // 每页条数
          pageIndex: 1, // 页码
          dtWinNumberInfos: [], // 请求数据
          isDownLoading: false, // 下拉刷新
          isUpLoading: false, // 上拉加载
          upFinished: false, // 上拉加载完毕
          offset: 100 // 滚动条与底部距离小于 offset 时触发load事件
        }
      },
      created() {
        document.title = '实时路况'
        this.getroadList()
      },
      methods: {
        // 获取资源表单列表
        getroadList() {
          const _self = this
          this.$http.get('/RoadStatus/list?offset=' + (this.pageIndex - 1) * this.pageSize + '&limit=' + this.pageSize).then(response => {
            if (response.data.code === 0) {
              const rows = response.data.data.rows
              if (rows == null || rows.length === 0) {
                // 加载结束
                _self.upFinished = true
                return
              }
              if (rows.length < this.pageSize) {
                // 最后一页不足10条的情况
                _self.upFinished = true
              }
              // 处理数据
              if (_self.pageIndex === 1) {
                _self.dtWinNumberInfos = rows
              } else {
                _self.dtWinNumberInfos = _self.dtWinNumberInfos.concat(rows)
              }
            }
          }).catch(error => {
            this.$message({
              showClose: true,
              message: '获取资源列表异常{' + error + '}',
              type: 'error'
            })
          }).finally(() => {
            _self.isDownLoading = false
            _self.isUpLoading = false
          })
        },
        onDownRefresh() {
          this.pageIndex = 1
          this.upFinished = false // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
          this.getroadList() // 加载数据
        },
        // 上拉加载请求方法
        onLoadList() {
          this.pageIndex++
          this.getroadList()
        },
        // 跳转详情页
        handleRoadDetail(activity) {
          this.$router.push({
            path: 'roaddetail',
            query: {
              id: activity && activity.id
            }
          })
        }
      }
    }
    </script>
    <style rel="stylesheet/scss" lang="scss" scoped>
    @import 'src/styles/variables.scss';
    .roadWrapper {
      .road {
        padding: 20px;
        .allcontent {
          padding: 15px 10px;
          border: 1px solid $color-border-2;
          border-radius: 8px;
          .roadContent {
            padding-top: 10px;
            padding-bottom: 25px;
            padding-left: 15px;
            padding-right: 15px;
            display: flex;
            justify-content: space-between;
            .dataText {
              color: $color-text-3;
              font-size: 14px;
            }
          }
          .timeWrapper {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid $color-border-1;
            padding: 15px 0;
            .titleText {
              font-weight: bolder;
            }
          }
        }
      }
    }
    </style>
    <style>
    .el-timeline-item__tail {
      border-left: 2px solid #1bc375;
      padding: 0px 0;
    }
    </style>

五、关于上拉加载第一次为什么会触发两次网络请求的原因？

上拉加载组件中的一个属性

<table> 
 <tbody> 
  <tr> 
   <td>immediate-check</td> 
   <td>是否在初始化时立即执行滚动位置检查</td> 
  </tr> 
 </tbody> 
</table>

这个不让它自动检查即可。

六、如果发现iphonex下拉刷新之后不能上拉加载，那就是你的数据高度触发不了下拉加载的高度，调整下分页数据或者item的高度就可以了。

[20190627213728317.png]: /images/20211221/c1241f7d07294c3ebee178c9cbe06714.png