码迷,mamicode.com
首页 > 其他好文 > 详细

mint-ui VUE 下拉刷新

时间:2020-03-14 14:42:17      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:message   reac   src   UNC   head   detail   mint   ret   disabled   

第一步 引用官网的步骤

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里面定义,就可以实现下拉刷新了

mint-ui VUE 下拉刷新

标签:message   reac   src   UNC   head   detail   mint   ret   disabled   

原文地址:https://www.cnblogs.com/wangrong-0823/p/12492010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!