mescroll-uni.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. /* mescroll-uni
  2. * version 1.1.8
  3. * 2019-11-01 wenju
  4. * http://www.mescroll.com
  5. */
  6. page {
  7. height: 100%;
  8. box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
  9. -webkit-overflow-scrolling: touch; /*使iOS列表滑动流畅*/
  10. }
  11. .mescroll-uni-warp{
  12. height: 100%;
  13. }
  14. .mescroll-uni {
  15. position: relative;
  16. width: 100%;
  17. height: 100%;
  18. min-height: 200upx;
  19. overflow-y: auto;
  20. box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
  21. }
  22. /* 定位的方式固定高度 */
  23. .mescroll-uni-fixed{
  24. z-index: 1;
  25. position: fixed;
  26. top: 0;
  27. left: 0;
  28. right: 0;
  29. bottom: 0;
  30. width: auto; /* 使right生效 */
  31. height: auto; /* 使bottom生效 */
  32. }
  33. /* 下拉刷新区域 */
  34. .mescroll-downwarp {
  35. position: absolute;
  36. top: -100%;
  37. left: 0;
  38. width: 100%;
  39. height: 100%;
  40. text-align: center;
  41. }
  42. /* 下拉刷新--内容区,定位于区域底部 */
  43. .mescroll-downwarp .downwarp-content {
  44. position: absolute;
  45. left: 0;
  46. bottom: 0;
  47. width: 100%;
  48. min-height: 60upx;
  49. padding: 20upx 0;
  50. text-align: center;
  51. }
  52. /* 上拉加载区域 */
  53. .mescroll-upwarp {
  54. min-height: 60upx;
  55. text-align: center;
  56. clear: both;
  57. }
  58. /* 下拉刷新,上拉加载--提示文本 */
  59. .mescroll-downwarp .downwarp-tip,
  60. .mescroll-upwarp .upwarp-tip,
  61. .mescroll-upwarp .upwarp-nodata {
  62. display: inline-block;
  63. font-size: 28upx;
  64. color: gray;
  65. vertical-align: middle;
  66. }
  67. .mescroll-downwarp .downwarp-tip,
  68. .mescroll-upwarp .upwarp-tip {
  69. margin-left: 16upx;
  70. }
  71. /* 下拉刷新,上拉加载--旋转进度条 */
  72. .mescroll-downwarp .downwarp-progress,
  73. .mescroll-upwarp .upwarp-progress {
  74. display: inline-block;
  75. width: 32upx;
  76. height: 32upx;
  77. border-radius: 50%;
  78. border: 2upx solid gray;
  79. border-bottom-color: transparent;
  80. vertical-align: middle;
  81. }
  82. /* 旋转动画 */
  83. .mescroll-rotate {
  84. -webkit-animation: mescrollRotate 0.6s linear infinite;
  85. animation: mescrollRotate 0.6s linear infinite;
  86. }
  87. @-webkit-keyframes mescrollRotate {
  88. 0% {
  89. -webkit-transform: rotate(0deg);
  90. }
  91. 100% {
  92. -webkit-transform: rotate(360deg);
  93. }
  94. }
  95. @keyframes mescrollRotate {
  96. 0% {
  97. transform: rotate(0deg);
  98. }
  99. 100% {
  100. transform: rotate(360deg);
  101. }
  102. }
  103. /* 无任何数据的空布局 */
  104. .mescroll-empty {
  105. box-sizing: border-box;
  106. width: 100%;
  107. padding: 40upx;
  108. text-align: center;
  109. }
  110. .mescroll-empty.empty-fixed {
  111. z-index: 99;
  112. position: fixed; /*transform会使fixed失效,最终会降级为absolute */
  113. top: 20%;
  114. left: 0;
  115. }
  116. .mescroll-empty .empty-icon {
  117. width: 45%;
  118. }
  119. .mescroll-empty .empty-tip {
  120. margin-top: 20upx;
  121. font-size: 24upx;
  122. color: gray;
  123. }
  124. .mescroll-empty .empty-btn {
  125. display: inline-block;
  126. margin-top: 40upx;
  127. min-width: 200upx;
  128. padding: 18upx;
  129. font-size: 28upx;
  130. border: 1upx solid #E04B28;
  131. border-radius: 60upx;
  132. color: #E04B28;
  133. }
  134. .mescroll-empty .empty-btn:active {
  135. opacity: .75;
  136. }
  137. /* 回到顶部的按钮 */
  138. .mescroll-totop {
  139. z-index: 9990;
  140. position: fixed !important; /* 避免编译到H5,在多mescroll中定位失效 */
  141. right: 20upx;
  142. bottom: 120upx;
  143. width: 72upx;
  144. height: 72upx;
  145. border-radius: 50%;
  146. opacity: 0;
  147. }
  148. /* 显示动画--淡入 */
  149. .mescroll-lazy-in,
  150. .mescroll-fade-in {
  151. -webkit-animation: mescrollFadeIn .3s linear forwards;
  152. animation: mescrollFadeIn .3s linear forwards;
  153. }
  154. @-webkit-keyframes mescrollFadeIn {
  155. 0% {
  156. opacity: 0;
  157. }
  158. 100% {
  159. opacity: 1;
  160. }
  161. }
  162. @keyframes mescrollFadeIn {
  163. 0% {
  164. opacity: 0;
  165. }
  166. 100% {
  167. opacity: 1;
  168. }
  169. }
  170. /* 隐藏动画--淡出 */
  171. .mescroll-fade-out {
  172. pointer-events: none;
  173. -webkit-animation: mescrollFadeOut .5s linear forwards;
  174. animation: mescrollFadeOut .5s linear forwards;
  175. }
  176. @-webkit-keyframes mescrollFadeOut {
  177. 0% {
  178. opacity: 1;
  179. }
  180. 100% {
  181. opacity: 0;
  182. }
  183. }
  184. @keyframes mescrollFadeOut {
  185. 0% {
  186. opacity: 1;
  187. }
  188. 100% {
  189. opacity: 0;
  190. }
  191. }