官网地址：
mescroll.js
效果图：
安装引入：
1. 执行npm命令安装mescroll : npm install --save mescroll.js2. 引入mescroll组件 : import MescrollVue from 'mescroll.js/mescroll.vue'
代码：
基本赋值官网代码，其实上拉加载，下拉刷新，难点在于丝滑的下下拉，拼接数据
<template><div><!--标题--><p class="header"><router-link class="btn-left" to="/">main</router-link><span>新闻列表</span><router-link class="btn-right" to="listProducts">list-products</router-link></p><!--滑动区域--><div ref="mescroll" class="mescroll"><div><p class="notice">本Demo的下拉刷新: 添加新数据到列表顶部</p><ul id="newsList" class="news-list"><li v-for="news in newArr" :key="news.id"><p>{{news.title}}</p><p class="new-content">{{news.content}}</p></li></ul></div></div></div></template><script>import MeScroll from 'mescroll.js'import 'mescroll.js/mescroll.min.css'export default {name: 'listNews',data () {return {mescroll: null,newArr: [] // 数据列表}},mounted () {// 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescrollthis.mescroll = new MeScroll(this.$refs.mescroll, {// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.down: {auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认truecallback: this.downCallback // 下拉刷新的回调},up: {auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认falsecallback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) {upCallback(page); }page: {num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始size: 10 // 每页数据的数量},noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看toTop: {// 配置回到顶部按钮src: './static/mescroll/mescroll-totop.png'}}})},methods: {/* 下拉刷新的回调 */downCallback () {console.log('自动下拉刷新 ')console.log('this.mescroll.version=' + this.mescroll.version);// 联网加载数据this.getListDataFromNet(0, 1, (data) => {// 添加新数据到列表顶部this.newArr.unshift(data)// 数据渲染成功后,隐藏下拉刷新的状态this.$nextTick(() => {this.mescroll.endSuccess()// 结束下拉刷新,无参})}, () => {// 联网失败的回调,隐藏下拉刷新的状态this.mescroll.endErr()})},// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10upCallback (page) {console.log('自动上拉记载')// 联网加载数据this.getListDataFromNet(page.num, page.size, (curPageData) => {// 添加列表数据this.newArr = this.newArr.concat(curPageData)// 数据渲染成功后,隐藏下拉刷新的状态this.$nextTick(() => {this.mescroll.endSuccess(curPageData.length)})}, () => {// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;this.mescroll.endErr()})},/* 联网加载列表数据在您的实际项目中,请参考官方写法: /api.html#tagUpCallback请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用实际项目以您服务器接口返回的数据为准,无需本地处理分页.* */getListDataFromNet (pageNum, pageSize, successCallback, errorCallback) {// 延时一秒,模拟联网setTimeout(function () {try {if (pageNum === 0) {// 此处模拟下拉刷新返回的数据var id = new Date().getTime()var newObj = {title: '【新增新闻】 标题' + id, content: '新增新闻的内容', id: id}successCallback && successCallback(newObj)} else {// 此处模拟上拉加载返回的数据var newArr = []for (var i = 0; i < pageSize; i++) {var upIndex = (pageNum - 1) * pageSize + i + 1newArr.push({title: '【新闻' + upIndex + '】 标题标题标题标题标题标题', content: '内容内容内容内容内容内容内容内容内容内容', id: upIndex})}successCallback && successCallback(newArr)}} catch (e) {// 联网失败的回调errorCallback && errorCallback()}}, 1000)}}}</script><style scoped>/*以fixed的方式固定mescroll的高度*/.mescroll {position: fixed;top: 44px;bottom: 0;height: auto;}.header {z-index: 9990;position: fixed;top: 0;left: 0;width: 100%;height: 44px;line-height: 44px;text-align: center;border-bottom: 1px solid #eee;background-color: white;}.header .btn-left {position: absolute;top: 0;left: 0;padding: 12px;line-height: 22px;}.header .btn-right {position: absolute;top: 0;right: 0;padding: 0 12px;}.mescroll .notice {font-size: 14px;padding: 20px 0;border-bottom: 1px solid #eee;text-align: center;color: #555;}.news-list li {padding: 16px;border-bottom: 1px solid #eee;}.news-list .new-content {font-size: 14px;margin-top: 6px;margin-left: 10px;color: #666;}</style>
