第一步：引入js和css文件
1 <link rel="stylesheet" href="static/mescroll/mescroll.min.css">2 <script src="static/mescroll/mescroll.m.js"></script>
第二步：编写布局
1 <template> 2 ????<div id="homeWrapper"> 3 ????????<div id="mescroll" class="mescroll"> 4 ????????????<div class="content"> 5 ????????????????<Index-home ref="indexhome"></Index-home> 6 ????????????????<Water-forecast ref="waterforecast"></Water-forecast> 7 ????????????????<Rainfall-forecast ref="rainfallforecast"></Rainfall-forecast> 8 ????????????????<Rainfall-live ref="rainfalllive"></Rainfall-live> 9 ????????????????<Station-details ref="stationdetails"></Station-details>10 ????????????</div>11 ????????</div>12 13 ????????<keep-alive>14 ????????????<router-view></router-view>15 ????????</keep-alive>16 ????</div>17 </template>
第三步: 初始化Mescroll
1 methods: { 2 ????????????????_initMescroll() { 3 ????????????????????????this.mescroll = new MeScroll("mescroll", { ?4 ????????????????????????up: { 5 ????????????????????????????use: false ?6 ????????????????????????}, 7 ????????????????????????down: { 8 ????????????????????????????auto: false, 9 ????????????????????????????callback: this.downCallback 10 ????????????????????????}11 ????????????????????});12 ????????????????},13 ????????????????downCallback() {14 ????????????????????this.$refs.indexhome._getStation();15 ????????????????????this.$refs.indexhome._getRainRemind();16 ????????????????????this.$refs.indexhome._getWarningMsg();17 ????????????????????this.$refs.indexhome._hydroLiveWeatherData();18 ????????????????????this.$refs.indexhome._WeatherTo7dayData();19 ????????????????????this.$refs.indexhome.getwarningNumber();20 ????????????????????this.$refs.indexhome._newspaperTime();21 ????????????????????this.$refs.waterforecast.getpredictMore();22 ????????????????????this.$refs.rainfallforecast.ForecastAddupAreaRain();23 ????????????????????this.$refs.rainfallforecast.rainTo72HBy3Hdata();24 ????????????????????this.$refs.rainfallforecast.rainTo7DayBy6H();25 ????????????????????this.$refs.rainfalllive.get3DayRealrain();26 ????????????????????this.$refs.stationdetails.getStationData(); ???27 ????????????????????if(this.mescroll.endSuccess) {28 ????????????????????????setTimeout(() => {29 ????????????????????????????this.mescroll.endSuccess();30 ????????????????????????}, 1000)31 ????????????????????????32 ????????????????????}else {33 ????????????????????????setTimeout(() => {34 ????????????????????????????this.mescroll.endErr();35 ????????????????????????}, 1000)36 ????????????????????}37 ????????????????}38 ????????},样式：外层用固定定位，内层用绝对定位
1 <style lang="stylus" rel="stylesheet/stylus" scoped> 2 ????#homeWrapper 3 ????????position: fixed 4 ????????top: 0; 5 ????????bottom: 0 6 ????????left: 0 7 ????????width: 100% 8 ????????background: url("bg_55.png"); 9 ????????.mescroll10 ????????????position: absolute11 ????????????top: 012 ????????????left: 013 ????????????bottom: 2rem14 ????????????height: auto ?????????15 </style>第四步：遇到的问题：修改滚动条样式，可以在mescroll.min.css 中修改，
隐藏下拉出现的滚动条：
在reset.css中，
::-webkit-scrollbar {/*隐藏滚轮*/
display: none;
}
Vue中使用mescroll.js实现下拉刷新
原文地址：https://www.cnblogs.com/tian-long/p/8724046.html