移动端上拉加载下拉刷新

Posted 2022-04-13 wly-laowang

 

<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>