【html+Vue】使用cdn引入的mescroll插件，解决无法触发上拉下滑效果的问题

最近因为手头项目与vuecli3存在兼容性问题，于是迫不得已，把每个vue page页面用html + vue的传统模板进行重构（就像官网示例那样，通过<script> cdn引入vue ，使用new Vue({})的方式 ) 。

但是在重构mescroll列表加载插件时遇到了问题。因为不是在vuecli中，mescroll-vue组件就不能在html里直接通过import来使用了。经过研究和测试，有如下两种解决办法

一、使用vue-http-loader强制引入vue组件

首先，引入vue-http-loader的js和mescroll的js css：

<!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>

<!-- 引入mescroll jsdelivr的CDN:-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>

然后，在vue当中注册组件：

const vm = new Vue({
    el: "#app",
    components: {
      MescrollVue: httpVueLoader('../js/resource/mescroll/mescroll.vue')
    },
})

然后<template>里的组件使用代码就原样照搬啦

这里忘交代了，mescroll.vue这个是我事先从旧代码的node-modules里拷贝过来的，偷点小懒233~~

接下来是重点！

因为是在html中使用，由于环境的改变，import和export default语句会存在问题，因此我们需要对mescroll.vue进行一个小改动。把其中的import语句注释掉(js和css我们已经提前引入)，export default改为Module.exports, 大功告成！ ~~这个实在是搞不明白个中缘由，node webpack和es6模块这方面还得多多学习~~

二、使用cdn引入mescroll

使用方式没啥好说的了 (如果是重构的话，把vue data的mescrollDown和mescrollUp对象内容，对应放入new MeScroll({})构造方法参数中的down和up即可，但要注意downCallback、upcallback回调方法的调用方式，如果都在vue中要加this)，，完全可以参考官网：

mescroll官网http://www.mescroll.com/api.html

在这里要说的是html+vue食用它要注意的问题。因为我按照官网的示例改了以后，发现上拉下载无法触发！！按照作者提供的解决思路（参考

mescroll食用的常见问题http://www.mescroll.com/qa.html

排除掉可能的各种样式问题（css引入顺序等等）后，直到最后我把创建mescroll对象的那块代码，即

	var mescroll = new MeScroll("mescroll", {
				down: {
					callback: this.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法
				},
				up: {
					callback: this.upCallback, //上拉加载的回调
					//以下是一些常用的配置,当然不写也可以的.
					page: {
						num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
						size: 10 //每页数据条数,默认10
					},
					htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
							//避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
							//这就是为什么无更多数据有时候不显示的原因.
					toTop: {
						//回到顶部按钮
						src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图
						offset: 1000 //列表滚动1000px才显示回到顶部按钮	
					},
					empty: {
						//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
						warpId:	"xxid", //父布局的id (1.3.5版本支持传入dom元素)
						icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
						tip: "暂无相关数据~" //提示
					}
				}
			});

这块代码从created()中移动到mounted()钩子中，页面正常！

PS：其实这块代码本来想放到全局的，但是无奈牵扯太多业务逻辑，都在vue methods里头了，只能在vue生命周期调用了