mint-ui VUE 下拉刷新

Posted 2021-03-05 wangrong-0823

第一步 引用官网的步骤

import { InfiniteScroll } from ‘mint-ui‘;

Vue.use(InfiniteScroll);

第二步 在页面中使用  （为 html 元素添加 v-infinite-scroll 指令即可使用无限滚动）

<div
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
              <div class="mui-card" v-for="item in jieMess" @click="toDetail(item)">
                    <div class="mui-card-header">
                        <p class="tou">接班信息 </p>
                        <img class="huang" src="../../../img/huang.png" />
                    </div>
                    <div class="mui-card-content">
                        <p>交班人：{{item.nickname}}</p>
                        <p>交班时间：{{item.addtime}}</p>
                        <p>接班状态：{{item.enter}}</p>
                        <img class="status" :src=" item.img1 " />
                    </div>
        
                </div>
        </div>
        
        <!-- 无数据时显示 -->
        <p class="none"  v-show="none">没有更多公告信息</p>

第三步 在methods中写一个方法获取到数据，再用loadMore（）再一次调用

methods: {
            //获取未确认接班信息数据
            getJieban() {
                this.user = JSON.parse(localStorage.getItem("user"))
                this.jieMess.token = this.user.token
                this.$http
                    .post("api/v1/getjieban"+"/page/"+this.page + "/num/" +this.num,{
                        token:this.jieMess.token,
                    })
                    .then(function(result) {
                        if(result.body.status === 200) {
                            //如果接口数据的长度等于0，那么提示用户没有数据
                            if(result.body.data.length === 0) {
                                this.none = true
                                return
                            } else if(result.body.data.length<this.num){
                                //当接口数据的长度小于this.num（显示的条数），设置 none等于true，提示用户没有数据了
                                this.none = true
                                result.body.data.forEach((ele) => {
                                    //初始化data的enter 和 img1  把enter img1属性加入到数组对象中
                                    this.$set(ele, ‘enter‘, ‘‘)
                                    this.$set(ele, ‘img1‘, ‘‘)
                                    if(ele.state == 0) {
                                        this.$set(ele, ‘enter‘, ‘未接班‘)
                                        this.$set(ele, ‘img1‘, require(‘../../../img/error.png‘))
                                    } else if(ele.state == 1) {
                                        this.$set(ele, ‘enter‘, ‘已接班‘)
                                        this.$set(ele, ‘img1‘, require(‘../../../img/enter.png‘))
                                    } else if(ele.state == 2) {
                                        this.$set(ele, ‘enter‘, ‘接班超时‘)
                                        this.$set(ele, ‘img1‘, require(‘../../../img/error.png‘))
                                    }
                                })
                                this.jieMess = this.jieMess.concat(result.body.data) 
                            }else{
                                result.body.data.forEach((ele) => {
                                    this.$set(ele, ‘enter‘, ‘‘)
                                    this.$set(ele, ‘img1‘, ‘‘)
                                    if(ele.state == 0) {
                                        this.$set(ele, ‘enter‘, ‘未接班‘)
                                        this.$set(ele, ‘img1‘, require(‘../../../img/error.png‘))
                                    } else if(ele.state == 1) {
                                        this.$set(ele, ‘enter‘, ‘已接班‘)
                                        this.$set(ele, ‘img1‘, require(‘../../../img/enter.png‘))
                                    } else if(ele.state == 2) {
                                        this.$set(ele, ‘enter‘, ‘接班超时‘)
                                        this.$set(ele, ‘img1‘, require(‘../../../img/error.png‘))
                                    }
                                    
                                })
                                this.jieMess = this.jieMess.concat(result.body.data) 
                            }
                            Indicator.close();
                        } else if(result.body.status === 201) {
                            Indicator.close();
                            Toast({
                                message: result.body.message,
                                duration: 2000
                            });
                        }
                    }, function(result) {
                        Indicator.close();
                        Toast({
                            message: "服务器异常",
                            duration: 2000
                        })
                    })
            },
            //为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动  
            //使接口的page++ 再调用一次获取接口的函数
            loadMore(){
                this.page++
                this.getJieban()
            },
        },

前面的一些定义需要自己在data里面定义，就可以实现下拉刷新了