<form enctype="multipart/form-data" method="post" action="" id="myForm" target="frame1">

</form> 

<iframe name="frame1" frameborder="0" id="frame"></iframe>


1.使用vant中的list和PullRefresh组件


import { PullRefresh,List  } from 'vant';

 

Vue.use(PullRefresh).use(List);

 


2.代码demo


  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                <van-list v-model="loading" :finished="finished" @load="onLoad">

                   <!-- 加载的内容-->

                </van-list>

  </van-pull-refresh>

 

 

export default {

    data() {

        return {

            deviceList: [],//用于存放加载的数据

            totalPage: 0,

            pageNumber: 0,

            loading: false,//控制上拉加载的加载动画

            finished: false,//控制在页面往下移动到底部时是否调用接口获取数据

            isLoading: false,//控制下拉刷新的加载动画

        };

    },

    created() {

 

    },

    methods: {

        init() {

            let data = {

                pageNumber: this.pageNumber + 1

            };

            let self = this;

            this.$.Post("/project/deviceShow", data, re => {

                self.deviceList = re.info.list;

                self.totalPage = re.info.totalPage;

                self.isLoading = false; //关闭下拉刷新效果

            });

        },

        //下拉刷新

        onRefresh() {

            let self = this;

            setTimeout(() => {

                self.totalPage = 0;

                self.pageNumber = 0;

                self.init(); //加载数据

            }, 500);

        },

        //页面初始化之后会触发一次,在页面往下加载的过程中会多次调用【上拉加载】

        onLoad() {

            let self = this;

            setTimeout(() => {

                let data = {

                    pageNumber: self.pageNumber + 1

                };

                self.$.Get("/project/deviceShow", data, re => {

                    self.totalPage = re.info.totalPage;

                    self.deviceList = self.deviceList.concat(re.info.list);

                    self.loading = false;

                    self.pageNumber++;

                    if (self.pageNumber >= self.totalPage) {

                        self.finished = true;

                    }

                });

            }, 500);

        }

    }

};