<template> <div class="wrapper" ref="wrapper"> <div class="content" > <div class="refresh" :class="{ativeRefresh:refresh}">刷新</div> <div class="ct-row" v-for="(item,index) in formData.list" :key="index"> <div class="ct-row-list">{{item.id}}</div> <div class="ct-row-list">{{item.user}}</div> <div class="ct-row-list">{{item.des}}</div> </div> <div>加载</div> </div> </div> </template>
<script> import Bscroll from "better-scroll"; import axios from "axios"; import { clearTimeout, setTimeout } from ‘timers‘; export default { name: "wrapper", data() { return { formData: {}, refresh:false }; }, methods: { getFormDatas() { return axios.get("api/test/formData", { params: { id: 123456 } }) } }, created() { this.getFormDatas().then(res => { console.log(res.data); this.formData = res.data; this.formData.list.length=10; }); }, mounted() { let count=1; this.scroll = new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true, pullDownRefresh: { threshold: 60,//下拉60px刷新 stop: 20//上弹到20px处，等待刷新完成 }, pullUpLoad:{ threshold: -20 //往下拉20px处时重新加载 } }); //下拉刷新 this.scroll.on("pullingDown", () => { this.refresh=true; this.getFormDatas().then(res => { const _this=this; // const timer=clearTimeout() setTimeout(()=>{ _this.refresh=false; _this.formData = res.data; _this.scroll.finishPullDown() },500) }); }); //上拉加载 this.scroll.on(‘pullingUp‘, () => { const _this=this; this.getFormDatas().then(res => { // const timer=clearTimeout() setTimeout(()=>{ _this.formData = res.data; _this.formData.length=20; _this.scroll.finishPullDown() },500) }); }) }, destroyed(){ this.scroll=null; } }; </script> <style scoped> /* wrapper要设置绝对定位 */ .wrapper { overflow: hidden; position: absolute; top: 0.9rem; left: 0; right: 0; bottom: 0; } .content { padding: 0 0.2rem 0 0.2rem; } .ct-row::after{ content: ""; height: 2px; width: 100%; background: #eee; display: block; } .ct-row-list{ height: .4rem; line-height: .4rem; } .refresh{ display: none; } .ativeRefresh{ display: block; } </style>