第一步：引入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 100% 8 background: url("bg_55.png"); 9 .mescroll 10 position: absolute 11 top: 0 12 left: 0 13 bottom: 2rem 14 height: auto 15 </style>
第四步：遇到的问题：修改滚动条样式，可以在mescroll.min.css 中修改，
隐藏下拉出现的滚动条：
在reset.css中，
::-webkit-scrollbar {/*隐藏滚轮*/
display: none;
}