123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- /* mescroll-uni
- * version 1.1.8
- * 2019-11-01 wenju
- * http://www.mescroll.com
- */
- page {
- height: 100%;
- box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
- -webkit-overflow-scrolling: touch; /*使iOS列表滑动流畅*/
- }
- .mescroll-uni-warp{
- height: 100%;
- }
- .mescroll-uni {
- position: relative;
- width: 100%;
- height: 100%;
- min-height: 200upx;
- overflow-y: auto;
- box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
- }
- /* 定位的方式固定高度 */
- .mescroll-uni-fixed{
- z-index: 1;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: auto; /* 使right生效 */
- height: auto; /* 使bottom生效 */
- }
- /* 下拉刷新区域 */
- .mescroll-downwarp {
- position: absolute;
- top: -100%;
- left: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- }
- /* 下拉刷新--内容区,定位于区域底部 */
- .mescroll-downwarp .downwarp-content {
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- min-height: 60upx;
- padding: 20upx 0;
- text-align: center;
- }
- /* 上拉加载区域 */
- .mescroll-upwarp {
- min-height: 60upx;
- padding: 30upx 0;
- text-align: center;
- clear: both;
- }
- /* 下拉刷新,上拉加载--提示文本 */
- .mescroll-downwarp .downwarp-tip,
- .mescroll-upwarp .upwarp-tip,
- .mescroll-upwarp .upwarp-nodata {
- display: inline-block;
- font-size: 28upx;
- color: gray;
- vertical-align: middle;
- }
- .mescroll-downwarp .downwarp-tip,
- .mescroll-upwarp .upwarp-tip {
- margin-left: 16upx;
- }
- /* 下拉刷新,上拉加载--旋转进度条 */
- .mescroll-downwarp .downwarp-progress,
- .mescroll-upwarp .upwarp-progress {
- display: inline-block;
- width: 32upx;
- height: 32upx;
- border-radius: 50%;
- border: 2upx solid gray;
- border-bottom-color: transparent;
- vertical-align: middle;
- }
- /* 旋转动画 */
- .mescroll-rotate {
- -webkit-animation: mescrollRotate 0.6s linear infinite;
- animation: mescrollRotate 0.6s linear infinite;
- }
- @-webkit-keyframes mescrollRotate {
- 0% {
- -webkit-transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- }
- }
- @keyframes mescrollRotate {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- /* 无任何数据的空布局 */
- .mescroll-empty {
- box-sizing: border-box;
- width: 100%;
- padding: 40upx;
- text-align: center;
- }
- .mescroll-empty.empty-fixed {
- z-index: 99;
- position: fixed; /*transform会使fixed失效,最终会降级为absolute */
- top: 20%;
- left: 0;
- }
- .mescroll-empty .empty-icon {
- width: 45%;
- }
- .mescroll-empty .empty-tip {
- margin-top: 20upx;
- font-size: 24upx;
- color: gray;
- }
- .mescroll-empty .empty-btn {
- display: inline-block;
- margin-top: 40upx;
- min-width: 200upx;
- padding: 18upx;
- font-size: 28upx;
- border: 1upx solid #E04B28;
- border-radius: 60upx;
- color: #E04B28;
- }
- .mescroll-empty .empty-btn:active {
- opacity: .75;
- }
- /* 回到顶部的按钮 */
- .mescroll-totop {
- z-index: 9990;
- position: fixed !important; /* 避免编译到H5,在多mescroll中定位失效 */
- right: 20upx;
- bottom: 120upx;
- width: 72upx;
- height: 72upx;
- border-radius: 50%;
- opacity: 0;
- }
- /* 显示动画--淡入 */
- .mescroll-lazy-in,
- .mescroll-fade-in {
- -webkit-animation: mescrollFadeIn .3s linear forwards;
- animation: mescrollFadeIn .3s linear forwards;
- }
- @-webkit-keyframes mescrollFadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes mescrollFadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- /* 隐藏动画--淡出 */
- .mescroll-fade-out {
- pointer-events: none;
- -webkit-animation: mescrollFadeOut .5s linear forwards;
- animation: mescrollFadeOut .5s linear forwards;
- }
- @-webkit-keyframes mescrollFadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes mescrollFadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
|