Vue中使用mescroll.js实现下拉刷新

第一步：引入js和css文件

<link rel="stylesheet" href="static/mescroll/mescroll.min.css">
<script src="static/mescroll/mescroll.m.js"></script>

第二步：编写布局

<template>
    <div id="homeWrapper">
        <div id="mescroll" class="mescroll">
            <div class="content">
                <Index-home ref="indexhome"></Index-home>
                <Water-forecast ref="waterforecast"></Water-forecast>
                <Rainfall-forecast ref="rainfallforecast"></Rainfall-forecast>
                <Rainfall-live ref="rainfalllive"></Rainfall-live>
                <Station-details ref="stationdetails"></Station-details>
            </div>
        </div>

        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

第三步: 初始化Mescroll

methods: {
                _initMescroll() {
                        this.mescroll = new MeScroll("mescroll", { 
 4                         up: {
 5                             use: false 
 6                         },
 7                         down: {
 8                             auto: false,
 9                             callback: this.downCallback 
10                         }
11                     });
                },
                downCallback() {
                    this.$refs.indexhome._getStation();
                    this.$refs.indexhome._getRainRemind();
                    this.$refs.indexhome._getWarningMsg();
                    this.$refs.indexhome._hydroLiveWeatherData();
                    this.$refs.indexhome._WeatherTo7dayData();
                    this.$refs.indexhome.getwarningNumber();
                    this.$refs.indexhome._newspaperTime();
                    this.$refs.waterforecast.getpredictMore();
                    this.$refs.rainfallforecast.ForecastAddupAreaRain();
                    this.$refs.rainfallforecast.rainTo72HBy3Hdata();
                    this.$refs.rainfallforecast.rainTo7DayBy6H();
                    this.$refs.rainfalllive.get3DayRealrain();
                    this.$refs.stationdetails.getStationData();    
                    if(this.mescroll.endSuccess) {
                        setTimeout(() => {
                            this.mescroll.endSuccess();
                        }, 1000)
                        
                    }else {
                        setTimeout(() => {
                            this.mescroll.endErr();
                        }, 1000)
                    }
                }
        },

样式：外层用固定定位，内层用绝对定位

<style lang="stylus" rel="stylesheet/stylus" scoped>
    #homeWrapper
        position: fixed
        top: 0;
        bottom: 0
        left: 0
         100%
        background: url("bg_55.png");
        .mescroll
            position: absolute
            top: 0
            left: 0
            bottom: 2rem
            height: auto          
</style>

第四步：遇到的问题：修改滚动条样式，可以在mescroll.min.css 中修改，

隐藏下拉出现的滚动条：

在reset.css中，

::-webkit-scrollbar {/*隐藏滚轮*/

　　display: none;

}