我是在html页面引入vue的写法
div内容根据自己修改
<link rel="stylesheet" href="css/mescroll.min.css?q=1"/>div id="app" class="mescroll-touch"><div ref="mescroll" class="mescroll"><div class="follow-item" :class="{'follw-item2 ' : messages != ''}"><ul><li><div class="follow-list" v-for="(list,index) in messages" :key="index" ><div class="overhide" @click="dianji(list)"><div class="head-portrait"><img class="head-port" :src="Logo" /><img v-show="list.state == 1" class="renzhengtu" src="./images/enterprisev.png" /></div><div class="folle-new"><div id="qfr">{{Name | ellipsis}}</div><div class="orlo"><span v-show="screenWidth > 320">{{list.tradeName }}</span><span v-show="screenWidth == 320">{{list.tradeName | ellipsis}}</span><span> | </span><span>{{list.relCount}}在招职位</span></div></div></div><div class="follow-button" :class="{'active':list.gzState==0}" @click="guanzhu(list)">{{list.gzState == 0 ? '关注' : '已关注'}}</div></div></li></ul></div></div></div><script src="js/axios.min.js?v=1"></script><script type="text/javascript" src="./js/vue@2.6.12.js?v=2"></script><script src="./js/mescroll.min.js?v=3" type="text/javascript"></script>data: function () {return {mescroll: null,newArr: [],messages: [],}mounted() {// 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescrollthis.mescroll = new MeScroll(this.$refs.mescroll, {// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.down: {auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认truecallback: this.downCallback // 下拉刷新的回调},up: {auto: false, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认falsecallback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }page: {num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始size: 10 // 每页数据的数量},htmlNodata: '<p class="upwarp-nodata">加载完毕</p>',noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看toTop: { // 配置回到顶部按钮图片src: './images/dd.png'}}})}，beforeRouteEnter(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写next(vm => {if (vm.mescroll) {// 恢复到之前设置的isBounce状态if (vm.mescroll.lastBounce != null) vm.mescroll.setBounce(vm.mescroll.lastBounce)// 滚动到之前列表的位置(注意:路由使用keep-alive才生效)if (vm.mescroll.lastScrollTop) {vm.mescroll.setScrollTop(vm.mescroll.lastScrollTop)setTimeout(() => { // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮vm.mescroll.setTopBtnFadeDuration(0)// 设置回到顶部按钮显示时无渐显动画}, 16)}}})},beforeRouteEnter(to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写next(vm => {if (vm.mescroll) {// 恢复到之前设置的isBounce状态if (vm.mescroll.lastBounce != null) vm.mescroll.setBounce(vm.mescroll.lastBounce)// 滚动到之前列表的位置(注意:路由使用keep-alive才生效)if (vm.mescroll.lastScrollTop) {vm.mescroll.setScrollTop(vm.mescroll.lastScrollTop)setTimeout(() => { // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮vm.mescroll.setTopBtnFadeDuration(0)// 设置回到顶部按钮显示时无渐显动画}, 16)}}})},methods:{downCallback() {console.log('this.mescroll.version=' + this.mescroll.version);var that = thisaxios.get('数据节后', {params: {action: 'GetShowListByPage',paras: that.paras,type: '1',name: that.input,pageIndex: '1'}}).then(function (res) {that.messages = res.data.data;that.mescroll.endSuccess(); //必有that.shuju = '';//这个做的是一个延迟的刷新 不过体验不好， 没有找到js的无闪烁刷新的方法，如果是webpack创建的vue项目倒是有一种无闪烁刷新的方法setTimeout(function () {location.reload();}, 280)console.log(that.messages)}).catch(function (err) {that.mescroll.endErr();});},//上拉加载更多数据upCallback(page) {var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?var pageSize = page.size; // 页长, 默认每页10条var that = this;setTimeout(function () {axios.get('数据接口', {params: {action: 'GetShowListByPage',paras: that.paras,type: '1',name: '',pageIndex: pageNum//页码}}).then(function (res) {//请求的数据var curPageData = res.data.data;//数据总条数，要替换成后端给的var totalPage = 100;//这里对刚进入页面请求的数据和和下拉刷新请求的数据 进行合并，用来渲染数据that.messd = that.messages.push.apply(that.messages, curPageData)console.log(that.messages)//官方 方法必有that.mescroll.endByPage(curPageData.length, totalPage)that.mescroll.endSuccess();}).catch(function (err) {that.mescroll.endErr();});}, 1000)},}
