scroll-view.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. uni-scroll-view {
  2. display: block;
  3. width: 100%;
  4. }
  5. uni-scroll-view[hidden] {
  6. display: none;
  7. }
  8. .uni-scroll-view {
  9. position: relative;
  10. -webkit-overflow-scrolling: touch;
  11. width: 100%;
  12. /* display: flex; 时在安卓下会导致scrollWidth和offsetWidth一样 */
  13. height: 100%;
  14. max-height: inherit;
  15. }
  16. .uni-scroll-view-scrollbar-hidden::-webkit-scrollbar {
  17. display: none;
  18. }
  19. .uni-scroll-view-scrollbar-hidden {
  20. -moz-scrollbars: none;
  21. scrollbar-width: none;
  22. }
  23. .uni-scroll-view-content {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .uni-scroll-view-refresher {
  28. position: relative;
  29. overflow: hidden;
  30. }
  31. .uni-scroll-view-refresh {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. right: 0;
  36. bottom: 0;
  37. display: flex;
  38. flex-direction: row;
  39. justify-content: center;
  40. align-items: center;
  41. }
  42. .uni-scroll-view-refresh-inner {
  43. display: flex;
  44. align-items: center;
  45. justify-content: center;
  46. line-height: 0;
  47. width: 40px;
  48. height: 40px;
  49. border-radius: 50%;
  50. background-color: #fff;
  51. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
  52. 0 1px 4px rgba(0, 0, 0, 0.117647);
  53. }
  54. .uni-scroll-view-refresh__spinner {
  55. transform-origin: center center;
  56. animation: uni-scroll-view-refresh-rotate 2s linear infinite;
  57. }
  58. .uni-scroll-view-refresh__spinner > circle {
  59. stroke: currentColor;
  60. stroke-linecap: round;
  61. animation: uni-scroll-view-refresh-dash 2s linear infinite;
  62. }
  63. @keyframes uni-scroll-view-refresh-rotate {
  64. 0% {
  65. transform: rotate(0deg);
  66. }
  67. 100% {
  68. transform: rotate(360deg);
  69. }
  70. }
  71. @keyframes uni-scroll-view-refresh-dash {
  72. 0% {
  73. stroke-dasharray: 1, 200;
  74. stroke-dashoffset: 0;
  75. }
  76. 50% {
  77. stroke-dasharray: 89, 200;
  78. stroke-dashoffset: -35px;
  79. }
  80. 100% {
  81. stroke-dasharray: 89, 200;
  82. stroke-dashoffset: -124px;
  83. }
  84. }