标签: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里面定义,就可以实现下拉刷新了
标签:message reac src UNC head detail mint ret disabled
原文地址:https://www.cnblogs.com/wangrong-0823/p/12492010.html