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

Posted 2020-10-29 你比太阳还耀眼

第一步：引入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         .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;

}