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

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

}

原文地址:https://www.cnblogs.com/tian-long/p/8724046.html

时间: 2024-10-06 20:16:49

Vue中使用mescroll.js实现下拉刷新的相关文章

vue之better-scroll的封装,包含下拉刷新,上拉加载功能及UI(核心为借鉴,我仅仅是给轮子套上了外胎...)

先发原文作者.地址等信息.我把内容全部搬过来了,也可以去看原文.内容绝对是满满的干货,给原作者点赞!(我添加的内容在转载过来的后面,内容不多) 作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 来源:慕课网 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开"微信 -> 钱包->滴滴出行"体验效果. 我们在实

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

使用mui.js实现下拉刷新

闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看具体是怎么实现的吧. 目录: 效果图: mui.min.js.mui.min.css和jquery-3.3.1.js 小颖就不粘贴啦,大家在网上百度下载下来就可以啦嘻嘻,小颖就把default.css和index.html文件粘贴出来哦. default.css * { margin: 0; pad

JS实现下拉刷新和上拉加载

<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <style type="text/css"> #slideDown{margin-t

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

实现方式与之前写的jquery weui 下拉刷新和上拉加载功能有点相似,以下是实现过程! 后台返回的数据格式: 页面代码布局: <header id="header" class="mui-bar mui-bar-nav"> <h1 class="mui-title">订单列表</h1> <a class="mui-icon mui-pull-right iconfont icon-tuich

Android v4包中的 SwipeRefreshLayout 官方的下拉刷新组件

SwipeRefreshLayout在v4包下,对应的v4Demo中也有相应的例子.如果没有请下载最新support-v4 SwipeRefreshLayout 只能有一个直接子View,可能是一个ListView或一个Layout或其他需要刷新的组件. setOnRefreshListener 用于监听刷新的动作.SwipeRefreshLayout 下拉,就会有刷新的效果出来,触发该监听. 如果需要一个刷新的动画,setRefreshing(true), 停: setRefreshing(f

flutter中的网络请求和下拉刷新上拉加载,toast的案例

添加依赖 pull_to_refresh: ^1.5.6 dio: ^2.1.0 fluttertoast: ^3.0.1 DioUtil import 'package:dio/dio.dart'; class DioUtil { static DioUtil _instance; final Dio _mDio = Dio(BaseOptions(baseUrl: "http://192.168.0.60:8080")); Dio get mDio => _mDio; Dio

iscroll4实现下拉刷新和下拉加载更多

开发项目中,需要用到下拉刷新,开始本来打算自己写这个效果的.但是,自己写的效果不流畅,显得死板.通过查询相关资料,发现了iscroll插件. iScroll是一种高性能,小体积,无依赖性,跨平台的JS滚动,下拉刷新插件,可以动态加载分页内容.它适用于台式机,手机和智能电视.它的性能和尺寸大力优化等提供的一致好评现代老设备的平滑效果. 版本:iscroll4 代码如下: html代码 <!DOCTYPE html> <html> <head> <title>下

Javascript下拉刷新

今天想说的是如何自己操刀做一个js的下拉刷新(js + h5 + css3).既然是下拉,那么应用场景当然就是在手持设备上.在JavaScript的世界里,总是跟很多实用又华丽丽的效果接轨,这是一门很有色彩的编程语言.目前网络上也有很多非常优秀的js滑动插件,比如iscroll(最开始我们就是用这款插件,真心很好用,而且解决了很多html的问题).当然,我要讲的完全没办法和iscroll媲美,仅仅是简简单单的一角而已,主要目的在于对这点小知识的总结和分享. 之前也有讲过,移动设备上对CSS3和H