使用mui.js实现下拉刷新

最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看具体是怎么实现的吧.

目录:

使用mui.js实现下拉刷新

效果图:

使用mui.js实现下拉刷新

mui.min.js、mui.min.css和jquery-3.3.1.js 小颖就不粘贴啦,大家在网上百度下载下来就可以啦嘻嘻,小颖就把default.css和index.html文件粘贴出来哦。

default.css

* { margin: 0; padding: 0; border: 0; } html, body, .view-container { height: 100%; font-family: PingFangSC-Medium; } .bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; display: none; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .bg .loading { width: 40px; height: 40px; border-radius: 50%; border: 5px solid #BEBEBE; border-left: 5px solid #498aca; animation: load 1s linear infinite; -moz-animation: load 1s linear infinite; -webkit-animation: load 1s linear infinite; -o-animation: load 1s linear infinite; } @-webkit-keyframes load { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes load { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-o-keyframes load { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } .top-title { background: url(../images/2.jpg) no-repeat center; background-size: cover; width: 100%; height: 350px; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdjjx.html