在vue项目中使用vantUI中的组件实现上拉加载，下拉刷新（在手机端实现）

水深无声 2023-06-18 11:55 32阅读 0赞

1，在项目中安装vantUI :  npm i vant -S

2, 在main.js 文件中引入组件：

import '../node_modules/vant/lib/vant-css/index.css';
    import { PullRefresh, List , Loading, Toast} from 'vant';
    
    Vue.use(PullRefresh).use(List).use(Loading).use(Toast);

注意：在引入index.css文件的时候，可能由于老旧版本的差异，路径有所差异，比如在新版本中是有 vant-css这层目录的，在老版本中时没有这层目录的；

3，页面代码如下：

<template>
      <div class="allDiscuss">
        
        <div class="discuss" v-if="evaluateList.length">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="refresh">
            <van-list class="van_list" v-model="loading" :finished="finished" @load="onLoad" :offset="10" :immediate-check="false">
              <div id="list-content">
                <div v-for="(item,index) in evaluateList" class="newsContent" :key="index">
                  <div class="info">
                    <div class="person">
                      <img :src="item.headImgUrl" alt />
                      <div>
                        <span>{
       {item.userName}}</span>
                      </div>
                    </div>
                    <div class="time">{
       {item.createDateStr}}</div>
                  </div>
                  <p class="content">{
       {item.content}}</p>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
        <div class="noMore" v-if="noMore">{
       {message.meiyougengduoshujule}}</div>
      </div>
    </template>
    <script>
    import { language, message } from "../config/common"; // message，language用于切换语言的
    import { translate } from "../lang/translate";
    import {Toast} from 'vant'
    export default {
      data() {
        return {
          toast1:null,  // 是否显示loading图的标志
          noMore: false,
          language: language,
          message: message,
          evaluateList: [], // 存放数据的数组
          isLoading: false,
          loading: false,
          finished: false,
          current_page: 1, // 当前页码
          obj: {
            shopId: null, // 店铺id
            start: 0, // 当前数据的下标
            length: 10 // 每页数据条数
          }
        };
      }, 
      mounted() {
        this.obj.shopId = this.$route.query.shopID; // 获取从上一个页面传递过来的参数
        this.getList(); 
      },
      methods: {
        //下拉刷新
        onRefresh() {
          this.current_page = 1;
          this.obj.start = 0;
          this.finished = false;
          this.noMore = false;
          this.getList();
        },
        //上拉加载
        onLoad() {
          this.toast1 = Toast.loading({
              message: '努力加载中...',
              forbidClick: true,
              loadingType: 'spinner',
              duration:0
          });
          // 异步更新数据
          this.obj.start = this.current_page * 10;
          this.current_page++;
          //   用户评价数据分页查询
          this.$ajax.UserEvaluate2(this.obj).then(res => {
            this.toast1.clear(); // 隐藏加载提示框
            this.evaluateList = this.evaluateList.concat(res.data.list);
            this.total = res.data.total; // total 数据总条数
            // 加载状态结束
            this.loading = false;
            // 数据全部加载完成
            if (this.evaluateList.length >= this.total) {
              this.finished = true;
              this.noMore = true;
            }
          });
        },
        getList() {
          this.toast1 = Toast.loading({
              message: '努力加载中...',
              forbidClick: true,
              loadingType: 'spinner',
              duration:0
          });
          //   用户评价数据分页查询
          this.$ajax.UserEvaluate2(this.obj).then(res => {
            this.toast1.clear();// 隐藏加载提示框
            this.evaluateList = []; // 初次加载页面或者下拉刷新的时候清空数组
            this.evaluateList = this.evaluateList.concat(res.data.list);
            this.total = res.data.total; // total 数据总条数
            this.isLoading = false;
            if (this.evaluateList.length >= this.total) {
              this.finished = true;
              this.noMore = true;
            }
          });
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .allDiscuss {
      width: 100%;
      position:relative;
      .loading{
          position:absolute;
          top:50%;
          left:50%;
          margin: -25px 0 0 -25px;
      }
      // 用户评论
      .discuss {
        margin-top: 15px;
        background: #fff;
        // padding-bottom: 20px;
        margin: 15px 15px 0;
        .title {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 345px;
          margin: 0 15px;
          span:first-child {
            color: #000;
            font-weight: 900;
            font-size: 16px;
          }
          span:last-child {
            color: #666;
            font-size: 14px;
          }
          img {
            width: 5px;
            height: 10px;
          }
        }
        .refresh {
          .van_list {
            #list-content {
              .newsContent {
                width: 100%;
                border-top: 1px solid #ccc;
    
                .info {
                  width: 100%;
                  height: 60px;
                  display: flex;
                  // margin:0 15px;
                  justify-content: space-between;
                  align-items: flex-start;
                  padding-top: 12px;
                  .time {
                    color: #666;
                    font-size: 14px;
                    text-align: right;
                  }
                  img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-right: 15px;
                  }
                  .person {
                    display: flex;
                    flex-direction: row;
                    overflow: hidden;
                    width: 150px;
                    div {
                      display: flex;
                      flex-direction: column;
                      div {
                        display: flex;
                        flex-direction: row;
                        margin-top: 5px;
                        .star {
                          width: 15px;
                          height: 15px;
                          margin: 0;
                        }
                      }
                      span {
                        color: #333;
                        font-weight: 900;
                      }
                    }
                  }
                }
                .content {
                  margin: 0 15px;
                  color: #767885;
                  word-wrap: break-word;
                  word-break: break-all;
                  font-size: 14px;
                  margin-bottom: 15px;
                }
              }
            }
          }
        }
      }
      .noMore {
        font-size: 12px;
        color:#ccc;
        text-align: center;
        border-top: 1px solid #ccc;
        padding: 10px 0;
        margin: 0 15px;
      }
    }
    </style>