├── README.md ├── app.js ├── app.json ├── app.wxss ├── components ├── footer │ └── default-footer │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss ├── header │ └── default-header │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss └── refresh │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── example ├── content-empty │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── cross-boundary-rebound-sticky-2 │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── cross-boundary-rebound-sticky-3 │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── cross-boundary-rebound-sticky │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── cross-boundary-rebound │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── index.js ├── index.json ├── index.wxml ├── index.wxss ├── load │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── refresh-load-sticky-2 │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── refresh-load-sticky-3 │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── refresh-load-sticky │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── refresh-load │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── refresh │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── project.config.json ├── sitemap.json └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # wxRefresh 2 | 微信小程序上拉刷新、下拉加载组件，支持自定义刷新和加载动画，越界回弹，粘性布局。 3 | ## 特点 4 | * 自定义刷新和加载 5 | * 越界回弹 6 | * 粘性布局(Sticky) 7 | * 空内容默认显示 8 | 9 | ## 概述 10 | wxRefresh能够满足大多数微信小程序列表的需求，减免了繁琐且重复的开发，提高了开发效率。同时wxRefresh提供了多种事件和属性，给开发提供做够多的扩展能力。 11 | 12 | ### 属性 13 | |属性|类型|默认值|必填|功能|备注| 14 | |:------:|:------:|:------:|:------:|:------:|:------:| 15 | |refresh|boolean|true|否|刷新标识|100:强制刷新;0:正常刷新完成;1:刷新完成且没有数据了;-1:刷新失败| 16 | |load|boolean|true|否|加载标识|100:未超过一页加载;0:正常加载完成;1:加载完成且没有数据了;-1:加载失败| 17 | |duration|number|1800|否|动画展示时长|结束刷新或者加载时，动画展示时长| 18 | |refresh-enable|boolean|true|否|刷新是否启动|默认启用、若无刷新头，则自动禁用，event.detail={space,percent}| 19 | |load-enable|boolean|true|否|加载是否启动|默认启用、若无加载头，则自动禁用，event.detail={space,percent}| 20 | |refresh-success-height|number|0|否|刷新成功高度|若有刷新头，填写，单位rpx| 21 | |load-success-height|number|0|否|加载成功高度|若有加载头，填写，单位rpx| 22 | |space-color|string|rgba(255, 255, 255, 0)|否|页面不超过一页填充颜色| 23 | |top-size|number|0|否|距离顶部的距离|若存在遮盖问题，请添加z-index，单位rpx| 24 | |bottom-size|number|0|否|距离底部的距离|若存在遮盖问题，请添加z-index，单位rpx| 25 | |cross-boundary-rebound-height|number|0|否|越界回弹拖拽距离|单位rpx| 26 | |scroll-space|string|0px|否|页面滚动的距离|若填写纯数字默认为px| 27 | |rebuild|boolean|false|否|是否重新测量各组件|非slot='content'，高度发生改变时，设置为true| 28 | |no-data-to-load-more-enable|boolean|false|否|加载控制|load=1，即没有更多数据，是否能够上拉加载| 29 | 30 | ### 事件 31 | 32 | |事件|类型|默认值|必填|功能|备注| 33 | |:------:|:------:|:------:|:------:|:------:|:------:| 34 | |bind:refresh|eventhandle||否|刷新|刷新时被触发，此时属性refresh自动置为100| 35 | |bind:load|eventhandle||否|加载|加载时被触发，此时属性load自动置为100| 36 | |bind:refresh-status|eventhandle||否|下拉|下拉时被触发| 37 | |bind:refresh-state|eventhandle||否|下拉|下拉时被触发| 38 | |bind:load-status|eventhandle||否|上拉|上拉时被触发| 39 | |bind:load-state|eventhandle||否|上拉|上拉时被触发| 40 | |bind:info|eventhandle||否|高度集合|组件加载完成时触发，各个组件的高度| 41 | |bind:scroll|eventhandle||否|滚动距离|页面滚动时触发，event.detail={space}| 42 | |bind:drag|eventhandle||否|拖拽距离|页面拖拽时触发，event.detail={space}| 43 | |bind:scroll-drag|eventhandle||否|距离|页面滚动或拖拽时触发，event.detail={space}| 44 | |bind:drag-end|eventhandle||否|结束触发|页面滚动或拖拽结束时触发| 45 | |bind:sticky|eventhandle||否|滚动|粘性布局滚动时触发,event.detail={id,percent}| 46 | |bind:top|eventhandle||否|滚动|滚动到顶部触发| 47 | |bind:bottom|eventhandle||否|滚动|滚动到底部触发| 48 | 49 | ### refresh-status/load-status/refresh-state/load-state 返回的detail表示刷新状态 50 | |字段|值|说明| 51 | |:------:|:------:|:------:| 52 | |percent|0%|当前状态的百分比、refresh-state/load-state无此状态| 53 | |state|1|默认状态，下拉刷新、上拉加载| 54 | |state|2|松手刷新/松手加载| 55 | |state|3|刷新中/加载中| 56 | |state|4|刷新完成/加载完成| 57 | |state|5|刷新完成，且没有加载到数据/加载完成，且没有加载到数据| 58 | |state|6|刷新失败/加载失败| 59 | 60 | ## slot name 61 | |name|必填|说明| 62 | |:------:|:------:|:------:| 63 | |header|否|刷新头，缺失时请添加属性cross-boundary-rebound-height| 64 | |footer|否|加载头，缺失时请添加属性cross-boundary-rebound-height| 65 | |interval|否|粘性布局以上可滚动出屏幕的Slot| 66 | |sticky|否|粘性布局| 67 | |interval_2|否|粘性布局以上可滚动出屏幕的Slot| 68 | |sticky_2|否|粘性布局| 69 | |interval_3|否|粘性布局以上可滚动出屏幕的Slot| 70 | |sticky_3|否|粘性布局| 71 | |content|否|通常用于列表| 72 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | 4 | data: { 5 | articles: [ 6 | 7 | { 8 | cover: '', 9 | title: '微信小程序', 10 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 11 | }, 12 | { 13 | cover: '', 14 | title: '微信小程序', 15 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 16 | }, 17 | { 18 | cover: '', 19 | title: '微信小程序', 20 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 21 | }, 22 | { 23 | cover: '', 24 | title: '微信小程序', 25 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 26 | }, 27 | { 28 | cover: '', 29 | title: '微信小程序', 30 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 31 | }, 32 | { 33 | cover: '', 34 | title: '微信小程序', 35 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 36 | }, 37 | { 38 | cover: '', 39 | title: '微信小程序', 40 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 41 | }, 42 | { 43 | cover: '', 44 | title: '微信小程序', 45 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 46 | }, 47 | { 48 | cover: '', 49 | title: '微信小程序', 50 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 51 | }, 52 | { 53 | cover: '', 54 | title: '微信小程序', 55 | description: '小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。' 56 | }, 57 | ] 58 | }, 59 | loadArticle(count) { 60 | var results = [] 61 | for (var i = 0; i < count; i++) 62 | results.push(this.data.articles[Math.floor(Math.random() * 10)]) 63 | return results 64 | }, 65 | 66 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "example/index", 4 | "example/content-empty/index", 5 | "example/cross-boundary-rebound/index", 6 | "example/cross-boundary-rebound-sticky/index", 7 | "example/cross-boundary-rebound-sticky-2/index", 8 | "example/cross-boundary-rebound-sticky-3/index", 9 | "example/load/index", 10 | "example/refresh/index", 11 | "example/refresh-load/index", 12 | "example/refresh-load-sticky/index", 13 | "example/refresh-load-sticky-2/index", 14 | "example/refresh-load-sticky-3/index" 15 | ], 16 | "window": { 17 | "backgroundTextStyle": "light", 18 | "navigationBarBackgroundColor": "#fff", 19 | "navigationBarTitleText": "微信小程序刷新组件", 20 | "navigationBarTextStyle": "black" 21 | }, 22 | "style": "v2", 23 | "sitemapLocation": "sitemap.json" 24 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page { 3 | height: 100% 4 | } 5 | 6 | ::-webkit-scrollbar { 7 | width: 0; 8 | height: 0; 9 | color: transparent; 10 | } 11 | 12 | .container { 13 | height: 100%; 14 | width: 100%; 15 | } 16 | .content{ 17 | background: rgb(235, 235, 235); 18 | } 19 | .center { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | width: auto; 24 | height: auto; 25 | } 26 | 27 | .vertical { 28 | width: 100%; 29 | height: 100; 30 | flex-direction: column; 31 | display: flex; 32 | } 33 | 34 | .book { 35 | width: 710rpx; 36 | margin: 20rpx; 37 | height: 160rpx; 38 | flex-direction: row; 39 | display: flex; 40 | border-radius: 15rpx; 41 | background: white; 42 | } 43 | 44 | .book-cover { 45 | width: 130rpx; 46 | height: 130rpx; 47 | margin: 15rpx; 48 | margin-right: 20rpx; 49 | border-radius: 15rpx; 50 | background: #dedede; 51 | } 52 | 53 | .book-title { 54 | margin-top: 5rpx; 55 | font-size: 33rpx; 56 | height: 30rpx; 57 | color: #585858; 58 | } 59 | 60 | .book-description { 61 | margin-top: 18rpx; 62 | font-size: 28rpx; 63 | height: 89rpx; 64 | width: 540rpx; 65 | line-height: 30rpx; 66 | max-lines: 3; 67 | color: #999; 68 | display: -webkit-box; 69 | word-break: break-all; 70 | text-overflow: ellipsis; 71 | overflow: hidden; 72 | -webkit-box-orient: vertical; 73 | -webkit-line-clamp: 2; 74 | } -------------------------------------------------------------------------------- /components/footer/default-footer/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | /** 3 | * 组件的属性列表 4 | */ 5 | properties: { 6 | status: { 7 | type: Object, 8 | value: null, 9 | observer: 'statusObserver' 10 | } 11 | }, 12 | 13 | data: { 14 | loadStatus: 1, 15 | }, 16 | 17 | methods: { 18 | statusObserver() { 19 | // console.log('load statusObserver---', this.properties.status); 20 | this.setData({ 21 | loadStatus: this.properties.status.state, 22 | }) 23 | }, 24 | } 25 | }) -------------------------------------------------------------------------------- /components/footer/default-footer/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/footer/default-footer/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 上拉加载 19 | 松开加载 20 | 加载中... 21 | 22 | 23 | 24 | {{loadStatus == 4 ? '加载成功':(loadStatus == 5 ? '没有数据': '加载失败') }} 25 | 26 | -------------------------------------------------------------------------------- /components/footer/default-footer/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll__refresh { 2 | height: 90rpx; 3 | position: relative; 4 | } 5 | 6 | .scroll__refresh--hidden { 7 | visibility: hidden; 8 | } 9 | 10 | .scroll__bottom { 11 | position: relative; 12 | height: 40rpx; 13 | padding: 40rpx 0; 14 | } 15 | 16 | .scroll__loading { 17 | position: absolute; 18 | top: 50%; 19 | left: 0; 20 | right: 0; 21 | transform: translateY(-50%); 22 | text-align: center; 23 | color: #999999; 24 | } 25 | 26 | .scroll__loading .text { 27 | display: inline-block; 28 | vertical-align: middle; 29 | margin-left: 40rpx; 30 | } 31 | 32 | .success { 33 | position: absolute; 34 | z-index: 9; 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 70rpx; 39 | line-height: 70rpx; 40 | font-size: 24rpx; 41 | text-align: center; 42 | opacity: 0; 43 | transform: scale(0); 44 | color: #3F82FD; 45 | } 46 | 47 | .success:after { 48 | content: " "; 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 100%; 54 | background-color: currentColor; 55 | opacity: 0.7; 56 | transform: scaleX(0); 57 | transition: transform 0.3s ease-in-out; 58 | z-index: 0; 59 | } 60 | 61 | .success>.info { 62 | position: absolute; 63 | bottom: 0px; 64 | left: 0px; 65 | width: 100%; 66 | height: 100%; 67 | z-index: 1; 68 | color: #ffffff; 69 | } 70 | 71 | .success--show { 72 | opacity: 1; 73 | transform: scale(1); 74 | } 75 | 76 | .success--show:after { 77 | transform: scaleX(1); 78 | } 79 | 80 | .success--tran { 81 | opacity: 0; 82 | transform: translateY(-100%); 83 | transition: opacity 0.35s linear, transform 0.35s linear; 84 | } 85 | 86 | .empty { 87 | padding: 30rpx; 88 | text-align: center; 89 | } 90 | 91 | .empty__image { 92 | width: 200rpx; 93 | height: 200rpx; 94 | margin: 160rpx auto 60rpx; 95 | } 96 | 97 | .empty__text { 98 | color: #999999; 99 | } 100 | 101 | .arrow { 102 | position: relative; 103 | border-radius: 4rpx; 104 | width: 4rpx; 105 | height: 30rpx; 106 | background: #a5a5a5; 107 | transition: transform 0.15s ease-in-out; 108 | display: inline-block; 109 | vertical-align: middle; 110 | } 111 | 112 | .arrow:before { 113 | position: absolute; 114 | content: ""; 115 | bottom: -4rpx; 116 | right: 50%; 117 | width: 4rpx; 118 | height: 16rpx; 119 | transform: rotate(45deg); 120 | transform-origin: 100% 100%; 121 | background: #a5a5a5; 122 | border-radius: 4rpx; 123 | } 124 | 125 | .arrow:after { 126 | position: absolute; 127 | content: ""; 128 | bottom: -4rpx; 129 | left: 50%; 130 | width: 4rpx; 131 | height: 16rpx; 132 | transform: rotate(-45deg); 133 | transform-origin: 0% 100%; 134 | background: #a5a5a5; 135 | border-radius: 4rpx; 136 | } 137 | 138 | .arrow.rotate { 139 | transform: rotate(-180deg); 140 | } 141 | 142 | .loading { 143 | position: relative; 144 | display: inline-block; 145 | vertical-align: middle; 146 | width: 36rpx; 147 | height: 36rpx; 148 | margin-right: -14rpx; 149 | } 150 | 151 | .loading__item { 152 | position: absolute; 153 | top: 0; 154 | left: 0; 155 | width: 36rpx; 156 | height: 36rpx; 157 | } 158 | 159 | .loading__item:before { 160 | content: ""; 161 | display: block; 162 | margin: 0 auto; 163 | width: 4rpx; 164 | height: 8rpx; 165 | background-color: #a5a5a5; 166 | border-radius: 4rpx; 167 | animation: fadeDelay 1.2s infinite ease-in-out both; 168 | } 169 | 170 | .loading__item:nth-child(2) { 171 | transform: rotate(30deg); 172 | } 173 | 174 | .loading__item:nth-child(2):before { 175 | animation-delay: -1.1s; 176 | } 177 | 178 | .loading__item:nth-child(3) { 179 | transform: rotate(60deg); 180 | } 181 | 182 | .loading__item:nth-child(3):before { 183 | animation-delay: -1s; 184 | } 185 | 186 | .loading__item:nth-child(4) { 187 | transform: rotate(90deg); 188 | } 189 | 190 | .loading__item:nth-child(4):before { 191 | animation-delay: -0.9s; 192 | } 193 | 194 | .loading__item:nth-child(5) { 195 | transform: rotate(120deg); 196 | } 197 | 198 | .loading__item:nth-child(5):before { 199 | animation-delay: -0.8s; 200 | } 201 | 202 | .loading__item:nth-child(6) { 203 | transform: rotate(150deg); 204 | } 205 | 206 | .loading__item:nth-child(6):before { 207 | animation-delay: -0.7s; 208 | } 209 | 210 | .loading__item:nth-child(7) { 211 | transform: rotate(180deg); 212 | } 213 | 214 | .loading__item:nth-child(7):before { 215 | animation-delay: -0.6s; 216 | } 217 | 218 | .loading__item:nth-child(8) { 219 | transform: rotate(210deg); 220 | } 221 | 222 | .loading__item:nth-child(8):before { 223 | animation-delay: -0.5s; 224 | } 225 | 226 | .loading__item:nth-child(9) { 227 | transform: rotate(240deg); 228 | } 229 | 230 | .loading__item:nth-child(9):before { 231 | animation-delay: -0.4s; 232 | } 233 | 234 | .loading__item:nth-child(10) { 235 | transform: rotate(270deg); 236 | } 237 | 238 | .loading__item:nth-child(10):before { 239 | animation-delay: -0.3s; 240 | } 241 | 242 | .loading__item:nth-child(11) { 243 | transform: rotate(300deg); 244 | } 245 | 246 | .loading__item:nth-child(11):before { 247 | animation-delay: -0.2s; 248 | } 249 | 250 | .loading__item:nth-child(12) { 251 | transform: rotate(330deg); 252 | } 253 | 254 | .loading__item:nth-child(12):before { 255 | animation-delay: -0.1s; 256 | } 257 | 258 | @keyframes fadeDelay { 259 | 260 | 0%, 261 | 39%, 262 | 100% { 263 | opacity: 0.2; 264 | } 265 | 266 | 40% { 267 | opacity: 1; 268 | } 269 | } 270 | 271 | @-webkit-keyframes fadeDelay { 272 | 273 | 0%, 274 | 39%, 275 | 100% { 276 | opacity: 0.2; 277 | } 278 | 279 | 40% { 280 | opacity: 1; 281 | } 282 | } -------------------------------------------------------------------------------- /components/header/default-header/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | /** 3 | * 组件的属性列表 4 | */ 5 | properties: { 6 | status: { 7 | type: Object, 8 | value: null, 9 | observer: 'statusObserver' 10 | } 11 | }, 12 | 13 | data: { 14 | refreshStatus: 1, 15 | }, 16 | 17 | methods: { 18 | statusObserver() { 19 | // console.log('refresh statusObserver---', this.properties.status); 20 | this.setData({ 21 | refreshStatus: this.properties.status.state, 22 | }) 23 | }, 24 | } 25 | }) -------------------------------------------------------------------------------- /components/header/default-header/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /components/header/default-header/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 下拉刷新 19 | 松开更新 20 | 刷新中... 21 | 22 | 23 | 24 | {{refreshStatus == 4 ? '刷新成功':(refreshStatus == 5 ? '没有数据': '刷新失败') }} 25 | 26 | 27 | -------------------------------------------------------------------------------- /components/header/default-header/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll__refresh { 2 | height: 90rpx; 3 | position: relative; 4 | } 5 | 6 | .scroll__refresh--hidden { 7 | visibility: hidden; 8 | } 9 | 10 | .scroll__bottom { 11 | position: relative; 12 | height: 40rpx; 13 | padding: 40rpx 0; 14 | } 15 | 16 | .scroll__loading { 17 | position: absolute; 18 | top: 50%; 19 | left: 0; 20 | right: 0; 21 | transform: translateY(-50%); 22 | text-align: center; 23 | color: #999999; 24 | } 25 | 26 | .scroll__loading .text { 27 | display: inline-block; 28 | vertical-align: middle; 29 | margin-left: 40rpx; 30 | } 31 | 32 | .success { 33 | position: absolute; 34 | z-index: 9; 35 | bottom: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 70rpx; 39 | line-height: 70rpx; 40 | font-size: 24rpx; 41 | text-align: center; 42 | opacity: 0; 43 | transform: scale(0); 44 | color: #3F82FD; 45 | } 46 | 47 | .success:after { 48 | content: " "; 49 | position: absolute; 50 | bottom: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 100%; 54 | background-color: currentColor; 55 | opacity: 0.7; 56 | transform: scaleX(0); 57 | transition: transform 0.3s ease-in-out; 58 | z-index: 0; 59 | } 60 | 61 | .success>.info { 62 | position: absolute; 63 | bottom: 0px; 64 | left: 0px; 65 | width: 100%; 66 | height: 100%; 67 | z-index: 1; 68 | color: #ffffff; 69 | } 70 | 71 | .success--show { 72 | opacity: 1; 73 | transform: scale(1); 74 | } 75 | 76 | .success--show:after { 77 | transform: scaleX(1); 78 | } 79 | 80 | .success--tran { 81 | opacity: 0; 82 | transform: translateY(-100%); 83 | transition: opacity 0.35s linear, transform 0.35s linear; 84 | } 85 | 86 | .empty { 87 | padding: 30rpx; 88 | text-align: center; 89 | } 90 | 91 | .empty__image { 92 | width: 200rpx; 93 | height: 200rpx; 94 | margin: 160rpx auto 60rpx; 95 | } 96 | 97 | .empty__text { 98 | color: #999999; 99 | } 100 | 101 | .arrow { 102 | position: relative; 103 | border-radius: 4rpx; 104 | width: 4rpx; 105 | height: 30rpx; 106 | background: #a5a5a5; 107 | transition: transform 0.15s ease-in-out; 108 | display: inline-block; 109 | vertical-align: middle; 110 | } 111 | 112 | .arrow:before { 113 | position: absolute; 114 | content: ""; 115 | bottom: -4rpx; 116 | right: 50%; 117 | width: 4rpx; 118 | height: 16rpx; 119 | transform: rotate(45deg); 120 | transform-origin: 100% 100%; 121 | background: #a5a5a5; 122 | border-radius: 4rpx; 123 | } 124 | 125 | .arrow:after { 126 | position: absolute; 127 | content: ""; 128 | bottom: -4rpx; 129 | left: 50%; 130 | width: 4rpx; 131 | height: 16rpx; 132 | transform: rotate(-45deg); 133 | transform-origin: 0% 100%; 134 | background: #a5a5a5; 135 | border-radius: 4rpx; 136 | } 137 | 138 | .arrow.rotate { 139 | transform: rotate(-180deg); 140 | } 141 | 142 | .loading { 143 | position: relative; 144 | display: inline-block; 145 | vertical-align: middle; 146 | width: 36rpx; 147 | height: 36rpx; 148 | margin-right: -14rpx; 149 | } 150 | 151 | .loading__item { 152 | position: absolute; 153 | top: 0; 154 | left: 0; 155 | width: 36rpx; 156 | height: 36rpx; 157 | } 158 | 159 | .loading__item:before { 160 | content: ""; 161 | display: block; 162 | margin: 0 auto; 163 | width: 4rpx; 164 | height: 8rpx; 165 | background-color: #a5a5a5; 166 | border-radius: 4rpx; 167 | animation: fadeDelay 1.2s infinite ease-in-out both; 168 | } 169 | 170 | .loading__item:nth-child(2) { 171 | transform: rotate(30deg); 172 | } 173 | 174 | .loading__item:nth-child(2):before { 175 | animation-delay: -1.1s; 176 | } 177 | 178 | .loading__item:nth-child(3) { 179 | transform: rotate(60deg); 180 | } 181 | 182 | .loading__item:nth-child(3):before { 183 | animation-delay: -1s; 184 | } 185 | 186 | .loading__item:nth-child(4) { 187 | transform: rotate(90deg); 188 | } 189 | 190 | .loading__item:nth-child(4):before { 191 | animation-delay: -0.9s; 192 | } 193 | 194 | .loading__item:nth-child(5) { 195 | transform: rotate(120deg); 196 | } 197 | 198 | .loading__item:nth-child(5):before { 199 | animation-delay: -0.8s; 200 | } 201 | 202 | .loading__item:nth-child(6) { 203 | transform: rotate(150deg); 204 | } 205 | 206 | .loading__item:nth-child(6):before { 207 | animation-delay: -0.7s; 208 | } 209 | 210 | .loading__item:nth-child(7) { 211 | transform: rotate(180deg); 212 | } 213 | 214 | .loading__item:nth-child(7):before { 215 | animation-delay: -0.6s; 216 | } 217 | 218 | .loading__item:nth-child(8) { 219 | transform: rotate(210deg); 220 | } 221 | 222 | .loading__item:nth-child(8):before { 223 | animation-delay: -0.5s; 224 | } 225 | 226 | .loading__item:nth-child(9) { 227 | transform: rotate(240deg); 228 | } 229 | 230 | .loading__item:nth-child(9):before { 231 | animation-delay: -0.4s; 232 | } 233 | 234 | .loading__item:nth-child(10) { 235 | transform: rotate(270deg); 236 | } 237 | 238 | .loading__item:nth-child(10):before { 239 | animation-delay: -0.3s; 240 | } 241 | 242 | .loading__item:nth-child(11) { 243 | transform: rotate(300deg); 244 | } 245 | 246 | .loading__item:nth-child(11):before { 247 | animation-delay: -0.2s; 248 | } 249 | 250 | .loading__item:nth-child(12) { 251 | transform: rotate(330deg); 252 | } 253 | 254 | .loading__item:nth-child(12):before { 255 | animation-delay: -0.1s; 256 | } 257 | 258 | @keyframes fadeDelay { 259 | 260 | 0%, 261 | 39%, 262 | 100% { 263 | opacity: 0.2; 264 | } 265 | 266 | 40% { 267 | opacity: 1; 268 | } 269 | } 270 | 271 | @-webkit-keyframes fadeDelay { 272 | 273 | 0%, 274 | 39%, 275 | 100% { 276 | opacity: 0.2; 277 | } 278 | 279 | 40% { 280 | opacity: 1; 281 | } 282 | } -------------------------------------------------------------------------------- /components/refresh/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | //刷新 4 | refresh: { 5 | type: Number, 6 | value: 0, // 0 表示成功 -1失败 1没有数据了 100成功 7 | observer: 'refreshObserver' 8 | }, 9 | load: { 10 | type: Number, 11 | value: 0, // 0 表示成功 -1失败 1没有数据了 100成功 12 | observer: 'loadObserver' 13 | }, 14 | duration: { 15 | type: Number, 16 | value: 1800, 17 | }, 18 | refreshSuccessHeight: { 19 | type: Number, 20 | value: 0 21 | }, 22 | loadSuccessHeight: { 23 | type: Number, 24 | value: '0' 25 | }, 26 | refreshEnable: { 27 | type: Boolean, 28 | value: true, 29 | }, 30 | loadEnable: { 31 | type: Boolean, 32 | value: true, 33 | }, 34 | spaceColor: { 35 | type: String, 36 | value: "rgba(255, 255, 255, 0)" 37 | }, 38 | topSize: { 39 | type: Number, 40 | value: 0, 41 | observer: "topSizeObserver" 42 | }, 43 | bottomSize: { 44 | type: Number, 45 | value: 0, 46 | observer: "bottomSizeObserver" 47 | }, 48 | crossBoundaryReboundHeight: { 49 | type: Number, 50 | value: 0 51 | }, 52 | scrollSpace: { 53 | type: String, 54 | value: '0px' 55 | }, 56 | rebuild: { 57 | value: false, 58 | type: Boolean, 59 | observer: "rebuildObserver" 60 | }, 61 | noDataToLoadMoreEnable: { 62 | value: false, 63 | type: Boolean, 64 | }, 65 | scrollToTop: { 66 | value: false, 67 | type: Boolean, 68 | observer: "scrollToTopObserver" 69 | }, 70 | scrollToBottom: { 71 | value: false, 72 | type: Boolean, 73 | observer: "scrollToBottomObserver" 74 | }, 75 | headerBelowSticky: { 76 | value: false, 77 | type: Boolean 78 | } 79 | }, 80 | options: { 81 | multipleSlots: true, 82 | }, 83 | data: { 84 | //sticky 85 | interval_height: -1, 86 | _interval_height: -1, 87 | interval: false, 88 | sticky_height: -1, 89 | _sticky_height: -1, 90 | sticky: false, 91 | sticky_offset: 0, 92 | 93 | //sticky_2 94 | interval_height_2:-1, 95 | _interval_height_2:-1, 96 | interval_2: false, 97 | sticky_height_2:-1, 98 | _sticky_height_2:-1, 99 | sticky_2: false, 100 | sticky_offset_2: 0, 101 | 102 | //sticky_3 103 | interval_height_3:-1, 104 | _interval_height_3:-1, 105 | interval_3: false, 106 | sticky_height_3:-1, 107 | _sticky_height_3:-1, 108 | sticky_3: false, 109 | sticky_offset_3: 0, 110 | 111 | movable_height: 0, 112 | movable_y: 0, //movable y方向的偏移量 113 | 114 | //刷新 115 | header_height: 0, 116 | header_exist: false, 117 | refresh_state: 1, // 1: 下拉刷新, 2: 松开更新, 3: 刷新中, 4: 刷新完成 118 | 119 | //加载 120 | footer_height: 0, 121 | footer_exist: false, 122 | load_state: 1, // 1: 上拉加载, 2: 松开加载, 3: 加载中, 4: 加载完成 123 | 124 | //other 125 | over_page: false, //超过一页 126 | content_height: 0, //slot=content 高度 127 | scroll_height: 0, //滚动布局的高度 128 | space_height: 0, //填充到一页的高度 129 | current_scroll: 0, //当前滚动的位置 130 | empty_height: 0, // content 为空 展示的高度 131 | sticky_container: null, 132 | sticky_intervel: false, 133 | header_below: 0, 134 | _header_below: 0 135 | }, 136 | methods: { 137 | init() { 138 | this.createSelectorQuery().select("#__header").boundingClientRect((__header) => { 139 | this.data.header_height = __header.height 140 | if (this.data.header_height == 0) { 141 | this.data.header_height = this.rpx2px(this.properties.crossBoundaryReboundHeight) / 2 142 | this.properties.refreshEnable = false 143 | } else 144 | this.data.header_exist = true 145 | this.setData({ 146 | header_height: this.data.header_height, 147 | movable_y: -2 * this.data.header_height, 148 | header_exist: this.data.header_exist, 149 | animation: '' 150 | }) 151 | setTimeout(() => { 152 | this.setData({ 153 | animation: 'true' 154 | }, 50) 155 | }) 156 | }).exec(); 157 | this.createSelectorQuery().select("#__interval").boundingClientRect((__interval) => { 158 | this.data.interval_height = __interval.height 159 | this.data._interval_height = __interval.height 160 | this.data.sticky_offset = this.data.interval_height 161 | this.setData({ 162 | interval_height: this.data.interval_height 163 | }) 164 | }).exec(); 165 | this.createSelectorQuery().select("#__interval_2").boundingClientRect((__interval) => { 166 | this.data.interval_height_2 = __interval.height 167 | this.data._interval_height_2 = __interval.height 168 | this.data.sticky_offset_2 = this.data.interval_height + this.data.interval_height_2 169 | this.setData({ 170 | interval_height_2: this.data.interval_height_2 171 | }) 172 | }).exec(); 173 | this.createSelectorQuery().select("#__interval_3").boundingClientRect((__interval) => { 174 | this.data.interval_height_3 = __interval.height 175 | this.data._interval_height_3 = __interval.height 176 | this.data.sticky_offset_3 = this.data.interval_height + this.data.interval_height_2 + this.data.interval_height_3 177 | this.setData({ 178 | interval_height_3: this.data.interval_height_3 179 | }) 180 | }).exec(); 181 | this.createSelectorQuery().select("#__sticky").boundingClientRect((__sticky) => { 182 | this.data.sticky_height = __sticky.height 183 | this.data._sticky_height = __sticky.height 184 | this.setData({ 185 | sticky_height: this.data.sticky_height 186 | }) 187 | }).exec(); 188 | this.createSelectorQuery().select("#__sticky_2").boundingClientRect((__sticky) => { 189 | this.data.sticky_height_2 = __sticky.height 190 | this.data._sticky_height_2 = __sticky.height 191 | this.setData({ 192 | sticky_height_2: this.data.sticky_height_2 193 | }) 194 | }).exec(); 195 | this.createSelectorQuery().select("#__sticky_3").boundingClientRect((__sticky) => { 196 | this.data.sticky_height_3 = __sticky.height 197 | this.data._sticky_height_3 = __sticky.height 198 | this.setData({ 199 | sticky_height_3: this.data.sticky_height_3 200 | }) 201 | }).exec(); 202 | this.createSelectorQuery().select("#__movable_view").boundingClientRect((__movable_view) => { 203 | this.data.movable_height = __movable_view.height 204 | this.setData({ 205 | movable_height: this.data.movable_height, 206 | }) 207 | }).exec(); 208 | this.createSelectorQuery().select("#__footer").boundingClientRect((__footer) => { 209 | this.data.footer_height = __footer.height 210 | if (this.data.footer_height == 0) { 211 | this.data.footer_height = this.rpx2px(this.properties.crossBoundaryReboundHeight) / 2 212 | this.properties.loadEnable = false 213 | } else 214 | this.data.footer_exist = true 215 | this.setData({ 216 | footer_height: this.data.footer_height, 217 | over_page_footer_height: this.data.footer_height, 218 | footer_exist: this.data.footer_exist 219 | }) 220 | }).exec(); 221 | this.createSelectorQuery().select("#__scroll_view").boundingClientRect((__scroll_view) => { 222 | this.data.scroll_height = __scroll_view.height 223 | }).exec(); 224 | this.createSelectorQuery().select("#__content_empty").boundingClientRect((__content_empty) => { 225 | this.data.empty_height = __content_empty.height 226 | this.setData({ 227 | empty_height: this.data.empty_height 228 | }) 229 | }).exec(); 230 | this.createSelectorQuery().select("#__content").boundingClientRect((__content) => { 231 | this.data.content_height = __content.height 232 | this.data.header_below = this.data.interval_height + this.data.sticky_height + this.data.interval_height_2 + this.data.sticky_height_2 + this.data.interval_height_3 + this.data.sticky_height_3 233 | this.data._header_below = this.data.header_below 234 | var diff = this.data.scroll_height - this.data.content_height - this.data.sticky_height - this.data.sticky_height_2 - this.data.sticky_height_3 - this.data.interval_height - this.data.interval_height_2 - this.data.interval_height_3 - this.rpx2px(this.properties.topSize) - this.rpx2px(this.properties.bottomSize) 235 | this.data.space_height = diff 236 | if (this.data.empty_height > 0 && this.data.content_height == 0 && (this.data.space_height < this.data.empty_height)) { 237 | this.data.space_height = this.data.space_height - this.data.empty_height 238 | } 239 | this.setData({ 240 | content_height: this.data.content_height 241 | }) 242 | if (this.data.space_height < 0) { 243 | this.data.over_page = true 244 | this.setData({ 245 | over_page: true 246 | }) 247 | } else { 248 | this.setData({ 249 | space_height: this.data.space_height 250 | }) 251 | this.triggerEvent("load-status", { 252 | state: 0 253 | }, {}) 254 | } 255 | if (this.data.header_height == 0) 256 | console.error('You should add header for wxRefresh. Click here(https://github.com/hacknife/wxRefresh)') 257 | if (this.data.footer_height == 0) 258 | console.error('You should add footer for wxRefresh. Click here(https://github.com/hacknife/wxRefresh)') 259 | 260 | var info = { 261 | "header_height": this.data.header_height, 262 | "interval_height": this.data.interval_height, 263 | "interval_height_2": this.data.interval_height_2, 264 | "interval_height_3": this.data.interval_height_2, 265 | "sticky_height": this.data.sticky_height, 266 | "sticky_height_2": this.data.sticky_height_2, 267 | "sticky_height_3": this.data.sticky_height_2, 268 | "scroll_height": this.data.scroll_height, 269 | "content_height": this.data.content_height, 270 | "footer_height": this.data.footer_height, 271 | "over_page": this.data.over_page, 272 | "empty_height": this.data.empty_height, 273 | "space_height": this.data.space_height, 274 | "header_below":this.data.header_below, 275 | } 276 | 277 | if (this.data.content_height > 0) { 278 | setTimeout(() => { 279 | this.rebuild(true) 280 | }, 500) 281 | } 282 | this.triggerEvent("info", info, {}) 283 | }).exec(); 284 | 285 | this.triggerEvent("refresh-status", { 286 | state: this.properties.refreshEnable ? 1 : 0 287 | }, {}) 288 | this.triggerEvent("load-status", { 289 | state: this.properties.loadEnable ? 1 : 0 290 | }, {}) 291 | }, 292 | headerBelow(state) { 293 | this.data.sticky = state 294 | this.data.interval = state 295 | this.data.sticky_2 = state 296 | this.data.interval_2 = state 297 | this.data.sticky_3 = state 298 | this.data.interval_3 = state 299 | this.data.sticky_intervel = state 300 | var interval_height = state ? 0 : this.data._interval_height 301 | var interval_height_2 = state ? 0 : this.data._interval_height_2 302 | var interval_height_3 = state ? 0 : this.data._interval_height_3 303 | var sticky_height = state ? 0 : this.data._sticky_height 304 | var sticky_height_2 = state ? 0 : this.data._sticky_height_2 305 | var sticky_height_3 = state ? 0 : this.data._sticky_height_3 306 | var header_below = state? this.data._header_below : 0 307 | var data = { 308 | interval_height: interval_height , 309 | sticky_height:sticky_height, 310 | interval_height_2:interval_height_2, 311 | sticky_height_2: sticky_height_2, 312 | interval_height_3: interval_height_3, 313 | sticky_height_3: sticky_height_3, 314 | header_below: header_below, 315 | sticky: state, 316 | interval: state, 317 | sticky_2: state, 318 | interval_2: state, 319 | sticky_3: state, 320 | interval_3: state, 321 | } 322 | this.setData(data) 323 | }, 324 | onMovableChange(e) { 325 | var drag = -2 * this.data.header_height - e.detail.y 326 | this.triggerEvent("drag", { 327 | space: drag 328 | }, {}) 329 | if (this.properties.headerBelowSticky && drag < -0.15 && !this.data.sticky_intervel) { 330 | this.headerBelow(true) 331 | } else if (this.properties.headerBelowSticky && drag > -0.15 && this.data.sticky_intervel) { 332 | this.headerBelow(false) 333 | } 334 | 335 | this.onScrollChanged({ 336 | detail: { 337 | scrollTop: this.data.current_scroll - 2 * this.data.header_height - e.detail.y, 338 | manual: '' 339 | } 340 | }) 341 | var y = e.detail.y 342 | if (this.data.refresh_state > 2 || this.data.load_state > 2) { // 1: 下拉刷新, 2: 松开更新, 3: 刷新中, 4: 刷新完成 343 | if (this.data.refresh_state == 3) { 344 | this.triggerEvent('refresh-status', { 345 | state: this.data.refresh_state, 346 | percent: (y + this.data.header_height) / (this.data.header_height * 1.00) 347 | }) 348 | } else if (this.data.refresh_state > 3) { 349 | this.triggerEvent('refresh-status', { 350 | state: this.data.refresh_state, 351 | percent: (y + 2 * this.data.header_height) / (this.data.header_height * 1.00) 352 | }) 353 | } 354 | if (this.data.load_state == 3) { 355 | this.triggerEvent('load-status', { 356 | state: this.data.load_state, 357 | percent: (-2 * this.data.header_height - this.data.footer_height - y) / (this.data.footer_height * 1.00) 358 | }) 359 | } else if (this.data.load_state > 3) { 360 | this.triggerEvent('load-status', { 361 | state: this.data.load_state, 362 | percent: (-2 * this.data.header_height - y) / (this.data.footer_height * 1.00) 363 | }) 364 | } 365 | return 366 | } 367 | if (y >= -this.data.header_height && this.properties.refreshEnable) { // |-| | | | 368 | if (this.data.refresh_state != 2) { 369 | this.data.refresh_state = 2 370 | this.triggerEvent("refresh-state", { 371 | state: this.data.refresh_state 372 | }, {}) 373 | } 374 | this.triggerEvent("refresh-status", { 375 | state: this.data.refresh_state, 376 | percent: (y + this.data.header_height) / (this.data.header_height * 1.00) 377 | }, {}) 378 | } else if (y >= -2 * this.data.header_height && y < -this.data.header_height && this.properties.refreshEnable) { // | |-| | | 379 | if (this.data.refresh_state != 1) { 380 | this.data.refresh_state = 1 381 | this.triggerEvent("refresh-state", { 382 | state: this.data.refresh_state 383 | }, {}) 384 | } 385 | this.triggerEvent("refresh-status", { 386 | state: this.data.refresh_state, 387 | percent: (y + 2 * this.data.header_height) / (this.data.header_height * 1.00) 388 | }, {}) 389 | 390 | } else if (y >= -2 * this.data.header_height - this.data.footer_height && y < -2 * this.data.header_height && !this.data.over_page && this.properties.loadEnable) { // | | |-| | 391 | if (this.data.load_state != 1) { 392 | this.data.load_state = 1 393 | if (!(this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable)) { 394 | this.triggerEvent("load-state", { 395 | state: this.data.load_state 396 | }, {}) 397 | } 398 | } 399 | if (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable) {} else { 400 | this.triggerEvent("load-status", { 401 | state: this.data.load_state, 402 | percent: (-2 * this.data.header_height - y) / (this.data.footer_height * 1.00) 403 | }, {}) 404 | } 405 | } else if (y < -2 * this.data.header_height - this.data.footer_height && !this.data.over_page && this.properties.loadEnable) { // | | | |-| 406 | if (this.data.load_state != 2) { 407 | this.data.load_state = 2 408 | if (!(this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable)) { 409 | this.triggerEvent("load-state", { 410 | state: this.data.load_state 411 | }, {}) 412 | } 413 | } 414 | if (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable) {} else { 415 | this.triggerEvent("load-status", { 416 | state: this.data.load_state, 417 | percent: (-2 * this.data.header_height - this.data.footer_height - y) / (this.data.footer_height * 1.00) 418 | }, {}) 419 | } 420 | } else if (y < -2 * this.data.header_height && this.data.over_page && this.properties.loadEnable) { 421 | if (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable) {} else { 422 | this.data.load_state = 1 423 | this.properties.load = 0 424 | this.onScrollBottom('') 425 | this.setData({ 426 | movable_y: -2 * this.data.header_height 427 | }) 428 | } 429 | } 430 | }, 431 | onMovableTouchEnd(e) { 432 | this.triggerEvent("drag-end") 433 | if (this.data.refresh_state > 2 || this.data.load_state > 2) return // 1: 下拉刷新, 2: 松开更新, 3: 刷新中, 4: 刷新完成 434 | if (this.data.refresh_state == 1 && this.data.load_state == 1) { 435 | this.setData({ 436 | movable_y: -2 * this.data.header_height 437 | }) 438 | } else if (this.data.refresh_state == 2) { 439 | this.data.refresh_state = 3 440 | this.triggerEvent("refresh-state", { 441 | state: this.data.refresh_state 442 | }, {}) 443 | this.triggerEvent("refresh-status", { 444 | state: this.data.refresh_state, 445 | }, {}) 446 | this.properties.refresh = 100 447 | this.properties.load = 0 448 | this.triggerEvent("load-state", { 449 | state: 1, 450 | }, {}) 451 | this.triggerEvent("load-status", { 452 | state: 1, 453 | }, {}) 454 | this.setData({ 455 | movable_y: -this.data.header_height, 456 | refresh_state: this.data.refresh_state, 457 | over_page_footer_height: this.data.footer_height 458 | }) 459 | this.triggerEvent('refresh'); 460 | } else if (this.data.load_state == 2 && (this.properties.load != 1 || this.properties.noDataToLoadMoreEnable)) { 461 | this.data.load_state = 3 462 | this.triggerEvent("load-state", { 463 | state: this.data.load_state 464 | }, {}) 465 | this.triggerEvent("load-status", { 466 | state: this.data.load_state 467 | }, {}) 468 | this.properties.load = 100 469 | this.setData({ 470 | movable_y: -2 * this.data.header_height - this.data.footer_height, 471 | load_state: this.data.load_state, 472 | }) 473 | this.triggerEvent('load'); 474 | } else if (this.data.load_state == 2) { 475 | this.setData({ 476 | movable_y: -2 * this.data.header_height 477 | }) 478 | } 479 | }, 480 | onScrollChanged(e) { 481 | var top = e.detail.scrollTop 482 | var manual = true 483 | if (e.detail.manual == null) { 484 | this.data.current_scroll = top 485 | this.triggerEvent("scroll", { 486 | space: top 487 | }, {}) 488 | manual = false 489 | } 490 | 491 | this.triggerEvent("scroll-drag", { 492 | space: top 493 | }, {}) 494 | if (this.data.sticky_height != 0) { 495 | if (top >= this.data.sticky_offset) { 496 | if (this.data.sticky != true) { 497 | this.data.sticky = true 498 | this.setData({ 499 | sticky: this.data.sticky 500 | }) 501 | this.triggerEvent("sticky", { 502 | "id": "__sticky", 503 | "percent": 1.0 504 | }, {}) 505 | } 506 | 507 | } else { 508 | if (this.data.sticky != false && (!this.properties.headerBelowSticky || !manual)) { 509 | this.data.sticky = false 510 | this.setData({ 511 | sticky: this.data.sticky 512 | }) 513 | } 514 | var percent = top * 1.00 / this.data.sticky_offset 515 | this.triggerEvent("sticky", { 516 | "id": "__sticky", 517 | "percent": percent 518 | }, {}) 519 | } 520 | } 521 | if (this.data.sticky_height_2 != 0) { 522 | if (top >= this.data.sticky_offset_2) { 523 | if (this.data.sticky_2 != true) { 524 | this.data.sticky_2 = true 525 | this.setData({ 526 | sticky_2: this.data.sticky_2 527 | }) 528 | this.triggerEvent("sticky", { 529 | "id": "__sticky_2", 530 | "percent": 1.0 531 | }, {}) 532 | } 533 | } else { 534 | if (this.data.sticky_2 != false && (!this.properties.headerBelowSticky || !manual)) { 535 | this.data.sticky_2 = false 536 | this.setData({ 537 | sticky_2: this.data.sticky_2 538 | }) 539 | } 540 | var percent = top * 1.00 / this.data.sticky_offset_2 541 | this.triggerEvent("sticky", { 542 | "id": "__sticky_2", 543 | "percent": percent 544 | }, {}) 545 | } 546 | } 547 | if (this.data.sticky_height_3 != 0) { 548 | if (top >= this.data.sticky_offset_3) { 549 | if (this.data.sticky_3 != true) { 550 | this.data.sticky_3 = true 551 | this.setData({ 552 | sticky_3: this.data.sticky_3 553 | }) 554 | this.triggerEvent("sticky", { 555 | "id": "__sticky_3", 556 | "percent": 1.0 557 | }, {}) 558 | } 559 | } else { 560 | if (this.data.sticky_3 != false && (!this.properties.headerBelowSticky || !manual)) { 561 | this.data.sticky_3 = false 562 | this.setData({ 563 | sticky_3: this.data.sticky_3 564 | }) 565 | } 566 | var percent = top * 1.00 / this.data.sticky_offset_3 567 | this.triggerEvent("sticky", { 568 | "id": "__sticky_3", 569 | "percent": percent 570 | }, {}) 571 | } 572 | } 573 | }, 574 | refreshObserver() { 575 | this.rebuild(true) 576 | if (this.properties.refresh == 100 && !this.properties.load) { 577 | setTimeout(() => { 578 | this.setData({ 579 | movable_y: -this.data.header_height + 20 580 | }) 581 | setTimeout(() => { 582 | this.onMovableTouchEnd(null) 583 | }, 500) 584 | }, 500) 585 | return 586 | } 587 | if (this.properties.refresh == 100) return 588 | 589 | if (this.data.refreshSuccessHeight != 0) { 590 | this.data.refresh_state = this.properties.refresh == 0 ? 4 : (this.properties.refresh == 1 ? 5 : 6) 591 | this.triggerEvent("refresh-state", { 592 | state: this.data.refresh_state 593 | }, {}) 594 | this.triggerEvent("refresh-status", { 595 | state: this.data.refresh_state 596 | }, {}) 597 | this.setData({ 598 | movable_y: -2 * this.data.header_height + this.rpx2px(this.properties.refreshSuccessHeight), 599 | refresh_state: this.data.refresh_state 600 | }) 601 | setTimeout(() => { 602 | this.setData({ 603 | movable_y: -2 * this.data.header_height, 604 | }) 605 | setTimeout(() => { 606 | this.data.refresh_state = 1 607 | this.triggerEvent("refresh-state", { 608 | state: this.data.refresh_state 609 | }, {}) 610 | this.triggerEvent("refresh-status", { 611 | state: this.data.refresh_state 612 | }, {}) 613 | this.setData({ 614 | refresh_state: this.data.refresh_state 615 | }) 616 | }, 1000) 617 | }, this.properties.duration) 618 | } else { 619 | this.data.refresh_state = 1 620 | this.triggerEvent("refresh-state", { 621 | state: this.data.refresh_state 622 | }, {}) 623 | this.triggerEvent("refresh-status", { 624 | state: this.data.refresh_state 625 | }, {}) 626 | this.setData({ 627 | movable_y: -2 * this.data.header_height, 628 | refresh_state: this.data.refresh_state 629 | }) 630 | } 631 | 632 | }, 633 | loadObserver() { 634 | this.rebuild(false) 635 | if (this.properties.load == 100 && this.properties.refresh != 100 && !this.data.over_page) { 636 | setTimeout(() => { 637 | this.setData({ 638 | movable_y: -2 * this.data.header_height - this.data.footer_height - 20 639 | }) 640 | setTimeout(() => { 641 | this.onMovableTouchEnd(null) 642 | }, 500) 643 | }, 500) 644 | return 645 | } 646 | if (this.properties.load == 100) return 647 | if (this.data.loadSuccessHeight != 0 && !this.data.over_page) { 648 | this.data.load_state = this.properties.load == 0 ? 4 : (this.properties.load == 1 ? 5 : 6) 649 | this.triggerEvent("load-state", { 650 | state: this.data.load_state 651 | }, {}) 652 | this.triggerEvent("load-status", { 653 | state: this.data.load_state 654 | }, {}) 655 | 656 | this.setData({ 657 | movable_y: -2 * this.data.header_height - this.rpx2px(this.properties.loadSuccessHeight), 658 | load_state: this.data.load_state 659 | }) 660 | setTimeout(() => { 661 | this.setData({ 662 | movable_y: -2 * this.data.header_height, 663 | }) 664 | setTimeout(() => { 665 | this.data.load_state = 1 666 | this.setData({ 667 | load_state: this.data.load_state 668 | }) 669 | if (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable) { 670 | this.setData({ 671 | over_page_footer_height: this.rpx2px(this.properties.loadSuccessHeight) 672 | }) 673 | } else { 674 | this.triggerEvent("load-state", { 675 | state: this.data.load_state 676 | }, {}) 677 | this.triggerEvent("load-status", { 678 | state: this.data.load_state 679 | }, {}) 680 | } 681 | }, 1000) 682 | }, this.properties.duration) 683 | } else if (this.data.loadSuccessHeight != 0 && this.data.over_page) { 684 | if (this.properties.load != 0) { 685 | this.data.load_state = this.properties.load == 1 ? 5 : 6 686 | this.triggerEvent("load-state", { 687 | state: this.data.load_state 688 | }, {}) 689 | this.triggerEvent("load-status", { 690 | state: this.data.load_state 691 | }, {}) 692 | this.setData({ 693 | load_state: this.data.load_state 694 | }) 695 | //当刷新完成之前，布局由于手动操作滚上去。 696 | if (this.data.current_scroll > this.rpx2px(this.properties.loadSuccessHeight) - this.data.space_height) { 697 | this.setData({ 698 | scrollSpace: -this.data.space_height + this.rpx2px(this.properties.loadSuccessHeight) 699 | }) 700 | } 701 | if (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable) { 702 | setTimeout(() => { 703 | this.setData({ 704 | over_page_footer_height: this.rpx2px(this.properties.loadSuccessHeight) 705 | }) 706 | }, 500) 707 | } 708 | this.data.load_state = 1 709 | this.setData({ 710 | load_state: this.data.load_state 711 | }) 712 | 713 | } else { 714 | this.data.load_state = 1 715 | this.triggerEvent("load-state", { 716 | state: this.data.load_state 717 | }, {}) 718 | this.triggerEvent("load-status", { 719 | state: this.data.load_state 720 | }, {}) 721 | this.setData({ 722 | load_state: this.data.load_state 723 | }) 724 | } 725 | } else if (this.data.loadSuccessHeight == 0 && this.data.over_page) { 726 | this.setData({ 727 | scrollSpace: -this.data.space_height + this.rpx2px(this.properties.loadSuccessHeight), 728 | }) 729 | setTimeout(() => { 730 | this.data.load_state = 1 731 | this.setData({ 732 | load_state: this.data.load_state, 733 | }) 734 | this.triggerEvent("load-status", { 735 | state: this.data.load_state 736 | }, {}) 737 | if (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable) { 738 | this.setData({ 739 | over_page_footer_height: 0 740 | }) 741 | } 742 | }, 500) 743 | 744 | } else if (this.data.loadSuccessHeight == 0 && !this.data.over_page) { 745 | this.data.load_state = 1 746 | this.triggerEvent("load-status", { 747 | state: this.data.load_state, 748 | }, {}) 749 | this.setData({ 750 | movable_y: -2 * this.data.header_height, 751 | }) 752 | setTimeout(() => { 753 | this.setData({ 754 | load_state: this.data.load_state 755 | }) 756 | }, 800) 757 | } 758 | }, 759 | rebuildObserver() { 760 | if (this.properties.rebuild) 761 | this.rebuild(true) 762 | this.properties.rebuild = false 763 | }, 764 | topSizeObserver() { 765 | this.rebuild(true) 766 | }, 767 | bottomSizeObserver() { 768 | this.rebuild(true) 769 | }, 770 | onScrollBottom(e) { 771 | this.triggerEvent('bottom'); 772 | if (!this.properties.loadEnable) return 773 | if (this.properties.load == 100 || (this.properties.load == 1 && !this.properties.noDataToLoadMoreEnable)) return 774 | this.properties.load = 100 775 | if (this.data.load_state == 1) { 776 | this.data.load_state = 2 777 | this.setData({ 778 | load_state: this.data.load_state 779 | }) 780 | this.triggerEvent("load-state", { 781 | state: this.data.load_state 782 | }, {}) 783 | this.triggerEvent("load-status", { 784 | state: this.data.load_state 785 | }, {}) 786 | this.data.load_state = 3 787 | this.setData({ 788 | load_state: this.data.load_state 789 | }) 790 | this.triggerEvent("load-status", { 791 | state: this.data.load_state 792 | }, {}) 793 | this.triggerEvent("load-state", { 794 | state: this.data.load_state 795 | }, {}) 796 | this.triggerEvent('load'); 797 | } 798 | }, 799 | onScrollTop(e) { 800 | this.triggerEvent("top") 801 | }, 802 | scrollToTopObserver() { 803 | this.setData({ 804 | scrollSpace: '0px' 805 | }) 806 | this.properties.scrollToTop = false 807 | }, 808 | scrollToBottomObserver() { 809 | this.rebuild(true) 810 | this.properties.scrollToBottom = false 811 | setTimeout(() => { 812 | this.setData({ 813 | scrollSpace: (-this.data.space_height) + 'px' 814 | }) 815 | }, 500) 816 | 817 | }, 818 | rebuild(_is_refresh) { 819 | if (!this.data.over_page || _is_refresh || (this.data.over_page && this.data.content_height == 0) || (this.data.over_page && this.data.loadEnable)) { 820 | this.createSelectorQuery().select("#__content").boundingClientRect((__content) => { 821 | this.data.content_height = __content.height 822 | var diff = this.data.scroll_height - this.data.content_height - this.data.sticky_height - this.data.sticky_height_2 - this.data.sticky_height_3 - this.data.interval_height - this.data.interval_height_2 - this.data.interval_height_3 - this.rpx2px(this.properties.topSize) - this.rpx2px(this.properties.bottomSize) 823 | this.data.space_height = diff 824 | if (this.data.empty_height > 0 && this.data.content_height == 0 && (this.data.space_height < this.data.empty_height)) { 825 | this.data.space_height = this.data.space_height - this.data.empty_height 826 | } 827 | this.setData({ 828 | content_height: this.data.content_height 829 | }) 830 | if (this.data.space_height < 0) { 831 | this.data.over_page = true 832 | this.setData({ 833 | over_page: this.data.over_page 834 | }) 835 | } else { 836 | this.data.over_page = false 837 | this.setData({ 838 | space_height: this.data.space_height, 839 | over_page: this.data.over_page 840 | }) 841 | } 842 | var info = { 843 | "header_height": this.data.header_height, 844 | "interval_height": this.data.interval_height, 845 | "sticky_height": this.data.sticky_height, 846 | "interval_height_2": this.data.interval_height_2, 847 | "scroll_height": this.data.scroll_height, 848 | "content_height": this.data.content_height, 849 | "footer_height": this.data.footer_height, 850 | "over_page": this.data.over_page, 851 | "empty_height": this.data.empty_height, 852 | "space_height": this.data.space_height, 853 | } 854 | // console.log(info) 855 | }).exec() 856 | } 857 | }, 858 | rpx2px(_rpx) { 859 | return wx.getSystemInfoSync().screenWidth / 750.00 * _rpx 860 | }, 861 | }, 862 | ready() { 863 | this.init(); 864 | } 865 | }); -------------------------------------------------------------------------------- /components/refresh/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "disableScroll": true, 3 | "component": true, 4 | "usingComponents": { 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /components/refresh/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /components/refresh/index.wxss: -------------------------------------------------------------------------------- 1 | .__movable_area { 2 | width: 100%; 3 | height: 100%; 4 | position: absolute; 5 | top: 0px; 6 | z-index: 0; 7 | } 8 | 9 | .__movable_view { 10 | width: 100%; 11 | height: 100%; 12 | z-index: -1; 13 | } 14 | 15 | .__scroll_view { 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | .__vertical { 21 | display: flex; 22 | flex-direction: column; 23 | width: 100%; 24 | height: auto; 25 | } 26 | 27 | .__center { 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | width: auto; 32 | height: auto; 33 | } 34 | 35 | .__wrapper { 36 | width: auto; 37 | height: auto; 38 | } 39 | 40 | .__sticky_wrapper { 41 | width: 100; 42 | height: auto; 43 | z-index: 1; 44 | flex-direction: column; 45 | } -------------------------------------------------------------------------------- /example/content-empty/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: [] 5 | }, 6 | onRefresh(e) { 7 | this.data.articles = app.loadArticle(10) 8 | setTimeout(() => { 9 | this.setData({ 10 | articles: this.data.articles, 11 | refresh: 0, 12 | }) 13 | }, 1000) 14 | }, 15 | onLoadmore(e) { 16 | this.data.articles = [] 17 | setTimeout(() => { 18 | this.setData({ 19 | articles: this.data.articles, 20 | load: 1, 21 | }) 22 | }, 2000) 23 | }, 24 | 25 | onRefreshStatus(e) { 26 | this.setData({ 27 | "refreshStatus": e.detail 28 | }) 29 | }, 30 | 31 | onLoadStatus(e) { 32 | this.setData({ 33 | "loadStatus": e.detail 34 | }) 35 | }, 36 | }) -------------------------------------------------------------------------------- /example/content-empty/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/content-empty/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.title}} 8 | {{item.description}} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/content-empty/index.wxss: -------------------------------------------------------------------------------- 1 | /* example/refresh/index.wxss */ -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-2/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | 7 | }) -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-2/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-2/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {{item.title}} 17 | {{item.description}} 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-2/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-3/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | 7 | }) -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-3/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-3/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | {{item.title}} 23 | {{item.description}} 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky-3/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | onRefreshSticky(e) { 7 | console.log(e.detail.percent) 8 | } 9 | }) -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{item.title}} 12 | {{item.description}} 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound-sticky/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles.slice(0, 4) 5 | }, 6 | 7 | }) -------------------------------------------------------------------------------- /example/cross-boundary-rebound/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/cross-boundary-rebound/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.title}} 7 | {{item.description}} 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/cross-boundary-rebound/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | list: [{ 4 | id: 'widget', 5 | name: '特性功能', 6 | open: false, 7 | pages: [{ 8 | 'title': '刷新加载', 9 | 'url': 'refresh-load' 10 | }, { 11 | 'title': '越界回弹', 12 | 'url': 'cross-boundary-rebound' 13 | }, { 14 | 'title': '刷新加载-粘性', 15 | 'url': 'refresh-load-sticky' 16 | }, { 17 | 'title': '刷新加载-粘性-2', 18 | 'url': 'refresh-load-sticky-2' 19 | }, { 20 | 'title': '刷新加载-粘性-3', 21 | 'url': 'refresh-load-sticky-3' 22 | }, { 23 | 'title': '越界回弹-粘性', 24 | 'url': 'cross-boundary-rebound-sticky' 25 | }, { 26 | 'title': '越界回弹-粘性2', 27 | 'url': 'cross-boundary-rebound-sticky-2' 28 | }, { 29 | 'title': '越界回弹-粘性3', 30 | 'url': 'cross-boundary-rebound-sticky-3' 31 | }, { 32 | 'title': '刷新', 33 | 'url': 'refresh' 34 | }, { 35 | 'title': '加载', 36 | 'url': 'load' 37 | }, { 38 | 'title': '默认显示', 39 | 'url': 'content-empty' 40 | }, ] 41 | }] 42 | }, 43 | kindToggle: function (e) { 44 | var id = e.currentTarget.id, 45 | list = this.data.list; 46 | for (var i = 0, len = list.length; i < len; ++i) { 47 | if (list[i].id == id) { 48 | list[i].open = !list[i].open 49 | } else { 50 | list[i].open = false 51 | } 52 | } 53 | this.setData({ 54 | list: list 55 | }); 56 | } 57 | }); -------------------------------------------------------------------------------- /example/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "window": { 4 | "navigationStyle": "custom" 5 | } 6 | } -------------------------------------------------------------------------------- /example/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 微信小程序刷新组件 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{item.name}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{page.title}} 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /example/index.wxss: -------------------------------------------------------------------------------- 1 | .weui-flex { 2 | -webkit-box-align: center; 3 | -webkit-align-items: center; 4 | align-items: center 5 | } 6 | 7 | .weui-cells { 8 | margin-top: 0; 9 | opacity: 0; 10 | -webkit-transform: translateY(-50%); 11 | transform: translateY(-50%); 12 | -webkit-transition: .3s; 13 | transition: .3s 14 | } 15 | 16 | .weui-cells:after, 17 | .weui-cells:before { 18 | display: none 19 | } 20 | 21 | .weui-cells_show { 22 | opacity: 1; 23 | -webkit-transform: translateY(0); 24 | transform: translateY(0) 25 | } 26 | 27 | .weui-cell:before { 28 | right: 15px 29 | } 30 | 31 | .kind-list__item { 32 | margin: 10px 0; 33 | background-color: #fff; 34 | border-radius: 2px; 35 | overflow: hidden 36 | } 37 | 38 | .kind-list__item:first-child { 39 | margin-top: 0 40 | } 41 | 42 | .kind-list__img { 43 | width: 30px; 44 | height: 30px 45 | } 46 | 47 | .kind-list__item-hd { 48 | padding: 20px; 49 | -webkit-transition: opacity .3s; 50 | transition: opacity .3s 51 | } 52 | 53 | .kind-list__item-hd_show { 54 | opacity: .4 55 | } 56 | 57 | .kind-list__item-bd { 58 | height: 0; 59 | overflow: hidden 60 | } 61 | 62 | .kind-list__item-bd_show { 63 | height: auto 64 | } 65 | 66 | page { 67 | background-color: #F8F8F8; 68 | font-size: 16px; 69 | font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif; 70 | } 71 | 72 | .page__hd { 73 | padding: 40px; 74 | } 75 | 76 | .page__bd { 77 | padding-bottom: 40px; 78 | } 79 | 80 | .page__bd_spacing { 81 | padding-left: 15px; 82 | padding-right: 15px; 83 | } 84 | 85 | .page__ft { 86 | padding-bottom: 10px; 87 | text-align: center; 88 | } 89 | 90 | .page__title { 91 | text-align: left; 92 | font-size: 20px; 93 | font-weight: 400; 94 | } 95 | 96 | .page__desc { 97 | margin-top: 5px; 98 | color: #888888; 99 | text-align: left; 100 | font-size: 14px; 101 | } 102 | 103 | .weui-cell_example:before { 104 | left: 52px; 105 | } 106 | 107 | /*! 108 | * WeUI v2.0.1 (https://github.com/weui/weui-wxss) 109 | * Copyright 2019 Tencent, Inc. 110 | * Licensed under the MIT license 111 | */ 112 | page { 113 | line-height: 1.6; 114 | font-family: -apple-system-font, Helvetica Neue, sans-serif 115 | } 116 | 117 | icon { 118 | vertical-align: middle 119 | } 120 | 121 | .weui-cells { 122 | position: relative; 123 | margin-top: 8px; 124 | background-color: #fff; 125 | line-height: 1.41176471; 126 | font-size: 17px 127 | } 128 | 129 | .weui-cells:before { 130 | top: 0; 131 | border-top: 1rpx solid rgba(0, 0, 0, .1) 132 | } 133 | 134 | .weui-cells:after, 135 | .weui-cells:before { 136 | content: " "; 137 | position: absolute; 138 | left: 0; 139 | right: 0; 140 | height: 1px; 141 | color: rgba(0, 0, 0, .1) 142 | } 143 | 144 | .weui-cells:after { 145 | bottom: 0; 146 | border-bottom: 1rpx solid rgba(0, 0, 0, .1) 147 | } 148 | 149 | .weui-cells__title { 150 | margin-top: 16px; 151 | margin-bottom: 3px; 152 | padding-left: 16px; 153 | padding-right: 16px; 154 | color: rgba(0, 0, 0, .5); 155 | font-size: 14px 156 | } 157 | 158 | .weui-cells_after-title { 159 | margin-top: 0 160 | } 161 | 162 | .weui-cells__tips { 163 | margin-top: 3px; 164 | color: rgba(0, 0, 0, .5); 165 | padding-left: 16px; 166 | padding-right: 16px; 167 | font-size: 14px 168 | } 169 | 170 | .weui-cell { 171 | padding: 16px; 172 | position: relative; 173 | display: -webkit-box; 174 | display: -webkit-flex; 175 | display: flex; 176 | -webkit-box-align: center; 177 | -webkit-align-items: center; 178 | align-items: center 179 | } 180 | 181 | .weui-cell:before { 182 | content: " "; 183 | position: absolute; 184 | left: 0; 185 | top: 0; 186 | right: 0; 187 | height: 1px; 188 | border-top: 1rpx solid rgba(0, 0, 0, .1); 189 | color: rgba(0, 0, 0, .1); 190 | left: 16px 191 | } 192 | 193 | .weui-cell:first-child:before { 194 | display: none 195 | } 196 | 197 | .weui-cell_active { 198 | background-color: #ececec 199 | } 200 | 201 | .weui-cell_primary { 202 | -webkit-box-align: start; 203 | -webkit-align-items: flex-start; 204 | align-items: flex-start 205 | } 206 | 207 | .weui-cell__bd { 208 | -webkit-box-flex: 1; 209 | -webkit-flex: 1; 210 | flex: 1 211 | } 212 | 213 | .weui-cell__ft { 214 | text-align: right; 215 | color: rgba(0, 0, 0, .5) 216 | } 217 | 218 | .weui-cell_label-block, 219 | .weui-cell_wxss.weui-cell_wxss:before { 220 | display: block 221 | } 222 | 223 | .weui-cell_label-block .weui-label { 224 | width: auto; 225 | word-break: normal; 226 | -webkit-hyphens: auto; 227 | hyphens: auto 228 | } 229 | 230 | .weui-cell_access { 231 | color: inherit; 232 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 233 | } 234 | 235 | .weui-cell__ft_in-access { 236 | padding-right: 16px; 237 | position: relative 238 | } 239 | 240 | .weui-cell__ft_in-access:after { 241 | content: " "; 242 | display: inline-block; 243 | height: 8px; 244 | width: 8px; 245 | border-width: 2px 2px 0 0; 246 | border-color: #b2b2b2; 247 | border-style: solid; 248 | -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0); 249 | transform: matrix(.71, .71, -.71, .71, 0, 0); 250 | position: relative; 251 | top: -2px; 252 | position: absolute; 253 | top: 50%; 254 | margin-top: -5px; 255 | right: 0 256 | } 257 | 258 | .weui-cell_link { 259 | color: #576b95; 260 | font-size: 17px 261 | } 262 | 263 | .weui-cell_link:active { 264 | background-color: #ececec 265 | } 266 | 267 | .weui-cell_link:first-child:before { 268 | display: block 269 | } 270 | 271 | .weui-cells_checkbox .weui-check__label:before { 272 | left: 55px 273 | } 274 | 275 | .weui-check__label:active { 276 | background-color: #ececec 277 | } 278 | 279 | .weui-check { 280 | position: absolute; 281 | left: -9999px 282 | } 283 | 284 | .weui-check__hd_in-checkbox { 285 | padding-right: 16px 286 | } 287 | 288 | .weui-cell__ft_in-radio { 289 | padding-left: 16px 290 | } 291 | 292 | .weui-cell_input { 293 | padding-top: 0; 294 | padding-bottom: 0 295 | } 296 | 297 | .weui-label { 298 | width: 105px; 299 | word-wrap: break-word; 300 | word-break: break-all 301 | } 302 | 303 | .weui-input { 304 | height: 1.41176471em; 305 | min-height: 1.41176471em; 306 | line-height: 1.41176471 307 | } 308 | 309 | .weui-textarea { 310 | display: block; 311 | width: 100% 312 | } 313 | 314 | .weui-textarea-counter { 315 | color: rgba(0, 0, 0, .3); 316 | text-align: right 317 | } 318 | 319 | .weui-cell_warn, 320 | .weui-textarea-counter_warn { 321 | color: #fa5151 322 | } 323 | 324 | .weui-form-preview { 325 | position: relative; 326 | background-color: #fff 327 | } 328 | 329 | .weui-form-preview:before { 330 | top: 0; 331 | border-top: 1rpx solid rgba(0, 0, 0, .1) 332 | } 333 | 334 | .weui-form-preview:after, 335 | .weui-form-preview:before { 336 | content: " "; 337 | position: absolute; 338 | left: 0; 339 | right: 0; 340 | height: 1px; 341 | color: rgba(0, 0, 0, .1) 342 | } 343 | 344 | .weui-form-preview:after { 345 | bottom: 0; 346 | border-bottom: 1rpx solid rgba(0, 0, 0, .1) 347 | } 348 | 349 | .weui-form-preview__value { 350 | font-size: 14px 351 | } 352 | 353 | .weui-form-preview__value_in-hd { 354 | font-size: 26px 355 | } 356 | 357 | .weui-form-preview__hd { 358 | position: relative; 359 | padding: 16px; 360 | text-align: right; 361 | line-height: 2.5em 362 | } 363 | 364 | .weui-form-preview__hd:after { 365 | content: " "; 366 | position: absolute; 367 | left: 0; 368 | bottom: 0; 369 | right: 0; 370 | height: 1px; 371 | border-bottom: 1rpx solid rgba(0, 0, 0, .1); 372 | color: rgba(0, 0, 0, .1); 373 | left: 16px 374 | } 375 | 376 | .weui-form-preview__bd { 377 | padding: 16px; 378 | font-size: .9em; 379 | text-align: right; 380 | color: rgba(0, 0, 0, .5); 381 | line-height: 2 382 | } 383 | 384 | .weui-form-preview__ft { 385 | position: relative; 386 | line-height: 56px; 387 | display: -webkit-box; 388 | display: -webkit-flex; 389 | display: flex 390 | } 391 | 392 | .weui-form-preview__ft:after { 393 | content: " "; 394 | position: absolute; 395 | left: 0; 396 | top: 0; 397 | right: 0; 398 | height: 1px; 399 | border-top: 1rpx solid rgba(0, 0, 0, .1); 400 | color: rgba(0, 0, 0, .1) 401 | } 402 | 403 | .weui-form-preview__item { 404 | overflow: hidden 405 | } 406 | 407 | .weui-form-preview__label { 408 | float: left; 409 | margin-right: 1em; 410 | min-width: 4em; 411 | color: rgba(0, 0, 0, .5); 412 | text-align: justify; 413 | text-align-last: justify 414 | } 415 | 416 | .weui-form-preview__value { 417 | display: block; 418 | overflow: hidden; 419 | word-break: normal; 420 | word-wrap: break-word 421 | } 422 | 423 | .weui-form-preview__btn { 424 | position: relative; 425 | display: block; 426 | -webkit-box-flex: 1; 427 | -webkit-flex: 1; 428 | flex: 1; 429 | color: #576b95; 430 | text-align: center; 431 | font-weight: 700; 432 | font-size: 17px 433 | } 434 | 435 | .weui-form-preview__btn:after { 436 | content: " "; 437 | position: absolute; 438 | left: 0; 439 | top: 0; 440 | width: 1px; 441 | bottom: 0; 442 | border-left: 1rpx solid rgba(0, 0, 0, .1); 443 | color: rgba(0, 0, 0, .1) 444 | } 445 | 446 | .weui-form-preview__btn:first-child:after { 447 | display: none 448 | } 449 | 450 | .weui-form-preview__btn_active { 451 | background-color: #ececec 452 | } 453 | 454 | .weui-form-preview__btn_default { 455 | color: rgba(0, 0, 0, .9) 456 | } 457 | 458 | .weui-form-preview__btn_primary { 459 | color: #576b95 460 | } 461 | 462 | .weui-cell_select { 463 | padding: 0; 464 | overflow: hidden 465 | } 466 | 467 | .weui-cell_select .weui-select { 468 | padding-right: 30px 469 | } 470 | 471 | .weui-cell_select .weui-cell__bd:after { 472 | content: " "; 473 | width: 12px; 474 | height: 24px; 475 | -webkit-mask-position: 0 0; 476 | mask-position: 0 0; 477 | -webkit-mask-repeat: no-repeat; 478 | mask-repeat: no-repeat; 479 | -webkit-mask-size: 100%; 480 | mask-size: 100%; 481 | background-color: currentColor; 482 | color: rgba(0, 0, 0, .3); 483 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); 484 | mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); 485 | position: absolute; 486 | top: 50%; 487 | right: 16px; 488 | margin-top: -12px 489 | } 490 | 491 | .weui-select { 492 | -webkit-appearance: none; 493 | border: 0; 494 | outline: 0; 495 | background-color: transparent; 496 | width: 100%; 497 | font-size: inherit; 498 | height: 56px; 499 | line-height: 56px; 500 | position: relative; 501 | z-index: 1; 502 | padding-left: 16px 503 | } 504 | 505 | .weui-cell_select-before { 506 | padding-right: 16px 507 | } 508 | 509 | .weui-cell_select-before .weui-select { 510 | width: 105px; 511 | box-sizing: border-box 512 | } 513 | 514 | .weui-cell_select-before .weui-cell__hd { 515 | position: relative 516 | } 517 | 518 | .weui-cell_select-before .weui-cell__hd:after { 519 | content: " "; 520 | position: absolute; 521 | right: 0; 522 | top: 0; 523 | width: 1px; 524 | bottom: 0; 525 | border-right: 1rpx solid rgba(0, 0, 0, .1); 526 | color: rgba(0, 0, 0, .1) 527 | } 528 | 529 | .weui-cell_select-before .weui-cell__hd:before { 530 | content: " "; 531 | width: 12px; 532 | height: 24px; 533 | -webkit-mask-position: 0 0; 534 | mask-position: 0 0; 535 | -webkit-mask-repeat: no-repeat; 536 | mask-repeat: no-repeat; 537 | -webkit-mask-size: 100%; 538 | mask-size: 100%; 539 | background-color: currentColor; 540 | color: rgba(0, 0, 0, .3); 541 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); 542 | mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill%3D%22%23B2B2B2%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); 543 | position: absolute; 544 | top: 50%; 545 | right: 16px; 546 | margin-top: -12px 547 | } 548 | 549 | .weui-cell_select-before .weui-cell__bd { 550 | padding-left: 16px 551 | } 552 | 553 | .weui-cell_select-before .weui-cell__bd:after { 554 | display: none 555 | } 556 | 557 | .weui-cell_select-before.weui-cell_access .weui-cell__hd { 558 | line-height: 56px; 559 | padding-left: 32px 560 | } 561 | 562 | .weui-cell_select-after { 563 | padding-left: 16px 564 | } 565 | 566 | .weui-cell_select-after .weui-select { 567 | padding-left: 0 568 | } 569 | 570 | .weui-cell_select-after.weui-cell_access .weui-cell__bd { 571 | line-height: 56px 572 | } 573 | 574 | .weui-cell_vcode { 575 | padding-top: 0; 576 | padding-right: 0; 577 | padding-bottom: 0 578 | } 579 | 580 | .weui-vcode-btn, 581 | .weui-vcode-img { 582 | margin-left: 5px; 583 | height: 3.29411765em; 584 | vertical-align: middle 585 | } 586 | 587 | .weui-vcode-btn { 588 | display: inline-block; 589 | padding: 0 .6em 0 .7em; 590 | border-left: 1rpx solid rgba(0, 0, 0, .1); 591 | line-height: 3.29411765em; 592 | font-size: 17px; 593 | color: #576b95; 594 | white-space: nowrap 595 | } 596 | 597 | button.weui-vcode-btn { 598 | min-height: 0; 599 | background-color: transparent; 600 | border: 0; 601 | outline: 0 602 | } 603 | 604 | .weui-vcode-btn:active { 605 | color: #767676 606 | } 607 | 608 | .weui-cell_switch { 609 | padding-top: 12px; 610 | padding-bottom: 12px 611 | } 612 | 613 | .weui-uploader { 614 | -webkit-box-flex: 1; 615 | -webkit-flex: 1; 616 | flex: 1 617 | } 618 | 619 | .weui-uploader__hd { 620 | padding-bottom: 16px 621 | } 622 | 623 | .weui-uploader__overview { 624 | display: -webkit-box; 625 | display: -webkit-flex; 626 | display: flex; 627 | -webkit-box-align: center; 628 | -webkit-align-items: center; 629 | align-items: center 630 | } 631 | 632 | .weui-uploader__title { 633 | -webkit-box-flex: 1; 634 | -webkit-flex: 1; 635 | flex: 1 636 | } 637 | 638 | .weui-uploader__tips { 639 | color: rgba(0, 0, 0, .3); 640 | font-size: 14px; 641 | line-height: 1.4; 642 | padding-top: 4px 643 | } 644 | 645 | .weui-uploader__info { 646 | color: rgba(0, 0, 0, .3) 647 | } 648 | 649 | .weui-uploader__bd { 650 | margin-bottom: -8px; 651 | margin-right: -8px; 652 | overflow: hidden 653 | } 654 | 655 | .weui-uploader__file { 656 | float: left; 657 | margin-right: 8px; 658 | margin-bottom: 8px 659 | } 660 | 661 | .weui-uploader__img { 662 | display: block; 663 | width: 96px; 664 | height: 96px 665 | } 666 | 667 | .weui-uploader__file_status { 668 | position: relative 669 | } 670 | 671 | .weui-uploader__file_status:before { 672 | content: " "; 673 | position: absolute; 674 | top: 0; 675 | right: 0; 676 | bottom: 0; 677 | left: 0; 678 | background-color: rgba(0, 0, 0, .5) 679 | } 680 | 681 | .weui-uploader__file-content { 682 | position: absolute; 683 | top: 50%; 684 | left: 50%; 685 | -webkit-transform: translate(-50%, -50%); 686 | transform: translate(-50%, -50%); 687 | color: #fff 688 | } 689 | 690 | .weui-uploader__input-box { 691 | float: left; 692 | position: relative; 693 | margin-right: 8px; 694 | margin-bottom: 8px; 695 | width: 96px; 696 | height: 96px; 697 | box-sizing: border-box; 698 | background-color: #ededed 699 | } 700 | 701 | .weui-uploader__input-box:after, 702 | .weui-uploader__input-box:before { 703 | content: " "; 704 | position: absolute; 705 | top: 50%; 706 | left: 50%; 707 | -webkit-transform: translate(-50%, -50%); 708 | transform: translate(-50%, -50%); 709 | background-color: #a3a3a3 710 | } 711 | 712 | .weui-uploader__input-box:before { 713 | width: 2px; 714 | height: 32px 715 | } 716 | 717 | .weui-uploader__input-box:after { 718 | width: 32px; 719 | height: 2px 720 | } 721 | 722 | .weui-uploader__input-box:active { 723 | border-color: #8b8b8b 724 | } 725 | 726 | .weui-uploader__input-box:active:after, 727 | .weui-uploader__input-box:active:before { 728 | background-color: #8b8b8b 729 | } 730 | 731 | .weui-uploader__input { 732 | position: absolute; 733 | z-index: 1; 734 | top: 0; 735 | left: 0; 736 | width: 100%; 737 | height: 100%; 738 | opacity: 0 739 | } 740 | 741 | .weui-article { 742 | padding: 24px 16px; 743 | padding: 24px calc(16px + constant(safe-area-inset-right)) calc(24px + constant(safe-area-inset-bottom)) calc(16px + constant(safe-area-inset-left)); 744 | padding: 24px calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); 745 | font-size: 17px; 746 | color: rgba(0, 0, 0, .9) 747 | } 748 | 749 | .weui-article__section { 750 | margin-bottom: 1.5em 751 | } 752 | 753 | .weui-article__h1 { 754 | font-size: 22px; 755 | font-weight: 700; 756 | margin-bottom: .9em; 757 | line-height: 1.4 758 | } 759 | 760 | .weui-article__h2 { 761 | font-size: 17px 762 | } 763 | 764 | .weui-article__h2, 765 | .weui-article__h3 { 766 | font-weight: 700; 767 | margin-bottom: .34em; 768 | line-height: 1.4 769 | } 770 | 771 | .weui-article__h3 { 772 | font-size: 15px 773 | } 774 | 775 | .weui-article__p { 776 | margin: 0 0 .8em 777 | } 778 | 779 | .weui-msg { 780 | padding-top: 36px; 781 | padding: calc(36px + constant(safe-area-inset-top)) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); 782 | padding: calc(36px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 783 | text-align: center; 784 | line-height: 1.4; 785 | min-height: 100%; 786 | box-sizing: border-box; 787 | display: -webkit-box; 788 | display: -webkit-flex; 789 | display: flex; 790 | -webkit-box-orient: vertical; 791 | -webkit-box-direction: normal; 792 | -webkit-flex-direction: column; 793 | flex-direction: column; 794 | background-color: #fff 795 | } 796 | 797 | .weui-msg__link { 798 | color: #576b95; 799 | display: inline-block; 800 | vertical-align: baseline 801 | } 802 | 803 | .weui-msg__icon-area { 804 | margin-bottom: 32px 805 | } 806 | 807 | .weui-msg__text-area { 808 | margin-bottom: 32px; 809 | padding: 0 32px; 810 | -webkit-box-flex: 1; 811 | -webkit-flex: 1; 812 | flex: 1; 813 | line-height: 1.6 814 | } 815 | 816 | .weui-msg__text-area:first-child { 817 | padding-top: 96px 818 | } 819 | 820 | .weui-msg__title { 821 | margin-bottom: 5px; 822 | font-weight: 700; 823 | font-size: 22px; 824 | word-wrap: break-word; 825 | word-break: break-all 826 | } 827 | 828 | .weui-msg__desc { 829 | font-size: 17px; 830 | color: rgba(0, 0, 0, .9) 831 | } 832 | 833 | .weui-msg__desc, 834 | .weui-msg__desc-primary { 835 | word-wrap: break-word; 836 | word-break: break-all; 837 | margin-bottom: 16px 838 | } 839 | 840 | .weui-msg__desc-primary { 841 | font-size: 14px; 842 | color: rgba(0, 0, 0, .5) 843 | } 844 | 845 | .weui-msg__opr-area { 846 | margin-bottom: 16px 847 | } 848 | 849 | .weui-msg__opr-area .weui-btn-area { 850 | margin: 0 16px 851 | } 852 | 853 | .weui-msg__opr-area .weui-btn+.weui-btn { 854 | margin-bottom: 16px 855 | } 856 | 857 | .weui-msg__opr-area:last-child { 858 | margin-bottom: 96px 859 | } 860 | 861 | .weui-msg__opr-area+.weui-msg__extra-area { 862 | margin-top: 48px 863 | } 864 | 865 | .weui-msg__tips-area { 866 | margin-bottom: 16px; 867 | padding: 0 40px 868 | } 869 | 870 | .weui-msg__opr-area+.weui-msg__tips-area { 871 | margin-bottom: 48px 872 | } 873 | 874 | .weui-msg__tips-area:last-child { 875 | margin-bottom: 64px 876 | } 877 | 878 | .weui-msg__extra-area, 879 | .weui-msg__tips { 880 | font-size: 12px; 881 | color: rgba(0, 0, 0, .5) 882 | } 883 | 884 | .weui-msg__extra-area { 885 | position: static; 886 | margin-bottom: 24px 887 | } 888 | 889 | .weui-cells__group_form:first-child .weui-cells__title { 890 | margin-top: 0 891 | } 892 | 893 | .weui-cells__group_form .weui-cells__title { 894 | margin-top: 24px; 895 | margin-bottom: 8px; 896 | padding: 0 32px 897 | } 898 | 899 | .weui-cells__group_form .weui-cell:before, 900 | .weui-cells__group_form .weui-cells:before { 901 | left: 32px; 902 | right: 32px 903 | } 904 | 905 | .weui-cells__group_form .weui-cells_checkbox .weui-check__label:before { 906 | left: 72px 907 | } 908 | 909 | .weui-cells__group_form .weui-cells:after { 910 | left: 32px; 911 | right: 32px 912 | } 913 | 914 | .weui-cells__group_form .weui-cell { 915 | padding: 16px 32px; 916 | color: rgba(0, 0, 0, .9) 917 | } 918 | 919 | .weui-cells__group_form .weui-cell__hd { 920 | padding-right: 16px 921 | } 922 | 923 | .weui-cells__group_form .weui-cell__ft { 924 | padding-left: 16px 925 | } 926 | 927 | .weui-cells__group_form .weui-cell_warn input { 928 | color: #fa5151 929 | } 930 | 931 | .weui-cells__group_form .weui-label { 932 | max-width: 5em; 933 | margin-right: 8px 934 | } 935 | 936 | .weui-cells__group_form .weui-cells__tips { 937 | margin-top: 8px; 938 | padding: 0 32px; 939 | color: rgba(0, 0, 0, .3) 940 | } 941 | 942 | .weui-cells__group_form .weui-cells__tips a { 943 | font-weight: 700 944 | } 945 | 946 | .weui-cells__group_form .weui-cell_vcode { 947 | padding: 12px 32px 948 | } 949 | 950 | .weui-cells__group_form .weui-vcode-btn { 951 | font-size: 16px; 952 | padding: 0 12px; 953 | margin-left: 0; 954 | height: auto; 955 | width: auto; 956 | line-height: 2em; 957 | color: #06ae56; 958 | background-color: #f2f2f2 959 | } 960 | 961 | .weui-cells__group_form .weui-vcode-btn:before { 962 | display: none 963 | } 964 | 965 | .weui-cells__group_form .weui-cell_select { 966 | padding: 0 967 | } 968 | 969 | .weui-cells__group_form .weui-cell_select .weui-select { 970 | padding: 0 32px 971 | } 972 | 973 | .weui-cells__group_form .weui-cell_select .weui-cell__bd:after { 974 | right: 32px 975 | } 976 | 977 | .weui-cells__group_form .weui-cell_select-before .weui-label { 978 | margin-right: 24px 979 | } 980 | 981 | .weui-cells__group_form .weui-cell_select-before .weui-select { 982 | padding-right: 24px; 983 | box-sizing: initial 984 | } 985 | 986 | .weui-cells__group_form .weui-cell_select-after { 987 | padding-left: 32px 988 | } 989 | 990 | .weui-cells__group_form .weui-cell_select-after .weui-select { 991 | padding-left: 0 992 | } 993 | 994 | .weui-cells__group_form .weui-cell_switch { 995 | padding: 12px 32px 996 | } 997 | 998 | .weui-cells__group_wxss.weui-cells__group_wxss .weui-cells__title { 999 | margin-top: 24px 1000 | } 1001 | 1002 | .weui-form { 1003 | padding: 56px 0 0; 1004 | padding: calc(56px + constant(safe-area-inset-top)) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); 1005 | padding: calc(56px + env(safe-area-inset-top)) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); 1006 | display: -webkit-box; 1007 | display: -webkit-flex; 1008 | display: flex; 1009 | -webkit-box-orient: vertical; 1010 | -webkit-box-direction: normal; 1011 | -webkit-flex-direction: column; 1012 | flex-direction: column; 1013 | min-height: 100%; 1014 | box-sizing: border-box; 1015 | line-height: 1.4; 1016 | background-color: #fff 1017 | } 1018 | 1019 | .weui-form a:not(.weui-btn) { 1020 | color: #576b95 1021 | } 1022 | 1023 | .weui-form .weui-footer, 1024 | .weui-form .weui-footer__link { 1025 | font-size: 12px 1026 | } 1027 | 1028 | .weui-form .weui-agree { 1029 | padding: 0 1030 | } 1031 | 1032 | .weui-form__text-area { 1033 | padding: 0 32px; 1034 | color: rgba(0, 0, 0, .9); 1035 | text-align: center 1036 | } 1037 | 1038 | .weui-form__control-area { 1039 | -webkit-box-flex: 1; 1040 | -webkit-flex: 1; 1041 | flex: 1; 1042 | margin: 48px 0 1043 | } 1044 | 1045 | .weui-form__extra-area, 1046 | .weui-form__tips-area { 1047 | margin-bottom: 24px; 1048 | text-align: center 1049 | } 1050 | 1051 | .weui-form__opr-area { 1052 | margin-bottom: 64px 1053 | } 1054 | 1055 | .weui-form__opr-area:last-child { 1056 | margin-bottom: 96px 1057 | } 1058 | 1059 | .weui-form__title { 1060 | font-size: 22px; 1061 | font-weight: 700; 1062 | line-height: 1.36 1063 | } 1064 | 1065 | .weui-form__desc { 1066 | font-size: 17px; 1067 | margin-top: 16px 1068 | } 1069 | 1070 | .weui-form__tips { 1071 | color: rgba(0, 0, 0, .5); 1072 | font-size: 12px 1073 | } 1074 | 1075 | .weui-flex { 1076 | display: -webkit-box; 1077 | display: -webkit-flex; 1078 | display: flex 1079 | } 1080 | 1081 | .weui-flex__item { 1082 | -webkit-box-flex: 1; 1083 | -webkit-flex: 1; 1084 | flex: 1 1085 | } 1086 | 1087 | .weui-btn+.weui-btn { 1088 | margin-top: 16px 1089 | } 1090 | 1091 | .weui-btn.weui-btn_inline+.weui-btn.weui-btn_inline { 1092 | margin-top: auto; 1093 | margin-left: 16px 1094 | } 1095 | 1096 | .weui-btn-area { 1097 | margin: 48px 16px 8px 1098 | } 1099 | 1100 | .weui-btn-area_inline { 1101 | display: -webkit-box; 1102 | display: -webkit-flex; 1103 | display: flex 1104 | } 1105 | 1106 | .weui-btn-area_inline .weui-btn { 1107 | margin-top: auto; 1108 | margin-right: 16px; 1109 | width: 100%; 1110 | -webkit-box-flex: 1; 1111 | -webkit-flex: 1; 1112 | flex: 1 1113 | } 1114 | 1115 | .weui-btn-area_inline .weui-btn:last-child { 1116 | margin-right: 0 1117 | } 1118 | 1119 | .weui-agree { 1120 | display: block; 1121 | padding: .5em 15px; 1122 | font-size: 13px 1123 | } 1124 | 1125 | .weui-agree__text { 1126 | color: rgba(0, 0, 0, .5) 1127 | } 1128 | 1129 | .weui-agree__link { 1130 | display: inline; 1131 | color: #576b95 1132 | } 1133 | 1134 | .weui-agree__checkbox { 1135 | position: absolute; 1136 | left: -9999px 1137 | } 1138 | 1139 | .weui-agree__checkbox-icon { 1140 | position: relative; 1141 | top: 2px; 1142 | display: inline-block; 1143 | border: 1px solid #d1d1d1; 1144 | background-color: #fff; 1145 | border-radius: 3px; 1146 | width: 11px; 1147 | height: 11px 1148 | } 1149 | 1150 | .weui-agree__checkbox-icon-check { 1151 | position: absolute; 1152 | top: 1px; 1153 | left: 1px 1154 | } 1155 | 1156 | .weui-footer { 1157 | color: rgba(0, 0, 0, .3); 1158 | font-size: 14px; 1159 | line-height: 1.4; 1160 | text-align: center 1161 | } 1162 | 1163 | .weui-footer_fixed-bottom { 1164 | position: fixed; 1165 | bottom: 16px; 1166 | bottom: calc(16px + constant(safe-area-inset-bottom)); 1167 | bottom: calc(16px + env(safe-area-inset-bottom)); 1168 | left: 0; 1169 | right: 0 1170 | } 1171 | 1172 | .weui-footer__links { 1173 | font-size: 0 1174 | } 1175 | 1176 | .weui-footer__link { 1177 | display: inline-block; 1178 | vertical-align: top; 1179 | margin: 0 8px; 1180 | position: relative; 1181 | font-size: 14px; 1182 | color: #576b95 1183 | } 1184 | 1185 | .weui-footer__link:before { 1186 | content: " "; 1187 | position: absolute; 1188 | left: 0; 1189 | top: 0; 1190 | width: 1px; 1191 | bottom: 0; 1192 | border-left: 1rpx solid #c7c7c7; 1193 | color: #c7c7c7; 1194 | left: -8px; 1195 | top: .36em; 1196 | bottom: .36em 1197 | } 1198 | 1199 | .weui-footer__link:first-child:before { 1200 | display: none 1201 | } 1202 | 1203 | .weui-footer__text { 1204 | padding: 0 .34em; 1205 | font-size: 12px 1206 | } 1207 | 1208 | .weui-grids { 1209 | border-top: 1rpx solid rgba(0, 0, 0, .1); 1210 | border-left: 1rpx solid rgba(0, 0, 0, .1); 1211 | overflow: hidden 1212 | } 1213 | 1214 | .weui-grid { 1215 | position: relative; 1216 | float: left; 1217 | padding: 20px 10px; 1218 | width: 33.33333333%; 1219 | box-sizing: border-box; 1220 | border-right: 1rpx solid rgba(0, 0, 0, .1); 1221 | border-bottom: 1rpx solid rgba(0, 0, 0, .1) 1222 | } 1223 | 1224 | .weui-grid_active { 1225 | background-color: #ececec 1226 | } 1227 | 1228 | .weui-grid__icon { 1229 | display: block; 1230 | width: 28px; 1231 | height: 28px; 1232 | margin: 0 auto 1233 | } 1234 | 1235 | .weui-grid__label { 1236 | margin-top: 5px; 1237 | display: block; 1238 | text-align: center; 1239 | color: rgba(0, 0, 0, .9); 1240 | font-size: 14px; 1241 | white-space: nowrap; 1242 | text-overflow: ellipsis; 1243 | overflow: hidden 1244 | } 1245 | 1246 | .weui-loading { 1247 | margin: 0 5px; 1248 | width: 20px; 1249 | height: 20px; 1250 | display: inline-block; 1251 | vertical-align: middle; 1252 | -webkit-animation: a 1s steps(12) infinite; 1253 | animation: a 1s steps(12) infinite; 1254 | background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat; 1255 | background-size: 100% 1256 | } 1257 | 1258 | .weui-loading.weui-loading_transparent { 1259 | background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") 1260 | } 1261 | 1262 | @-webkit-keyframes a { 1263 | 0% { 1264 | -webkit-transform: rotate(0deg); 1265 | transform: rotate(0deg) 1266 | } 1267 | 1268 | to { 1269 | -webkit-transform: rotate(1turn); 1270 | transform: rotate(1turn) 1271 | } 1272 | } 1273 | 1274 | @keyframes a { 1275 | 0% { 1276 | -webkit-transform: rotate(0deg); 1277 | transform: rotate(0deg) 1278 | } 1279 | 1280 | to { 1281 | -webkit-transform: rotate(1turn); 1282 | transform: rotate(1turn) 1283 | } 1284 | } 1285 | 1286 | .wx_dot_loading, 1287 | .wx_dot_loading:after, 1288 | .wx_dot_loading:before { 1289 | display: inline-block; 1290 | vertical-align: middle; 1291 | width: 6px; 1292 | height: 6px; 1293 | border-radius: 50%; 1294 | background-color: rgba(0, 0, 0, .3); 1295 | font-size: 0; 1296 | -webkit-animation: c 1.6s step-start infinite; 1297 | animation: c 1.6s step-start infinite 1298 | } 1299 | 1300 | .wx_dot_loading { 1301 | position: relative 1302 | } 1303 | 1304 | .wx_dot_loading:before { 1305 | content: ""; 1306 | position: absolute; 1307 | left: -12px; 1308 | background-color: rgba(0, 0, 0, .1); 1309 | -webkit-animation: b 1.6s step-start infinite; 1310 | animation: b 1.6s step-start infinite 1311 | } 1312 | 1313 | .wx_dot_loading:after { 1314 | content: ""; 1315 | position: absolute; 1316 | right: -12px; 1317 | background-color: rgba(0, 0, 0, .5); 1318 | -webkit-animation: d 1.6s step-start infinite; 1319 | animation: d 1.6s step-start infinite 1320 | } 1321 | 1322 | @-webkit-keyframes b { 1323 | 1324 | 0%, 1325 | to { 1326 | background-color: rgba(0, 0, 0, .1) 1327 | } 1328 | 1329 | 30% { 1330 | background-color: rgba(0, 0, 0, .5) 1331 | } 1332 | 1333 | 60% { 1334 | background-color: rgba(0, 0, 0, .3) 1335 | } 1336 | } 1337 | 1338 | @keyframes b { 1339 | 1340 | 0%, 1341 | to { 1342 | background-color: rgba(0, 0, 0, .1) 1343 | } 1344 | 1345 | 30% { 1346 | background-color: rgba(0, 0, 0, .5) 1347 | } 1348 | 1349 | 60% { 1350 | background-color: rgba(0, 0, 0, .3) 1351 | } 1352 | } 1353 | 1354 | @-webkit-keyframes c { 1355 | 1356 | 0%, 1357 | to { 1358 | background-color: rgba(0, 0, 0, .3) 1359 | } 1360 | 1361 | 30% { 1362 | background-color: rgba(0, 0, 0, .1) 1363 | } 1364 | 1365 | 60% { 1366 | background-color: rgba(0, 0, 0, .5) 1367 | } 1368 | } 1369 | 1370 | @keyframes c { 1371 | 1372 | 0%, 1373 | to { 1374 | background-color: rgba(0, 0, 0, .3) 1375 | } 1376 | 1377 | 30% { 1378 | background-color: rgba(0, 0, 0, .1) 1379 | } 1380 | 1381 | 60% { 1382 | background-color: rgba(0, 0, 0, .5) 1383 | } 1384 | } 1385 | 1386 | @-webkit-keyframes d { 1387 | 1388 | 0%, 1389 | to { 1390 | background-color: rgba(0, 0, 0, .5) 1391 | } 1392 | 1393 | 30% { 1394 | background-color: rgba(0, 0, 0, .3) 1395 | } 1396 | 1397 | 60% { 1398 | background-color: rgba(0, 0, 0, .1) 1399 | } 1400 | } 1401 | 1402 | @keyframes d { 1403 | 1404 | 0%, 1405 | to { 1406 | background-color: rgba(0, 0, 0, .5) 1407 | } 1408 | 1409 | 30% { 1410 | background-color: rgba(0, 0, 0, .3) 1411 | } 1412 | 1413 | 60% { 1414 | background-color: rgba(0, 0, 0, .1) 1415 | } 1416 | } 1417 | 1418 | .wx_dot_loading_white { 1419 | background-color: hsla(0, 0%, 100%, .3); 1420 | -webkit-animation: f 1.6s step-start infinite; 1421 | animation: f 1.6s step-start infinite 1422 | } 1423 | 1424 | .wx_dot_loading_white:before { 1425 | background-color: hsla(0, 0%, 100%, .5); 1426 | -webkit-animation: e 1.6s step-start infinite; 1427 | animation: e 1.6s step-start infinite 1428 | } 1429 | 1430 | .wx_dot_loading_white:after { 1431 | background-color: hsla(0, 0%, 100%, .1); 1432 | -webkit-animation: g 1.6s step-start infinite; 1433 | animation: g 1.6s step-start infinite 1434 | } 1435 | 1436 | @-webkit-keyframes e { 1437 | 1438 | 0%, 1439 | to { 1440 | background-color: hsla(0, 0%, 100%, .5) 1441 | } 1442 | 1443 | 30% { 1444 | background-color: hsla(0, 0%, 100%, .1) 1445 | } 1446 | 1447 | 60% { 1448 | background-color: hsla(0, 0%, 100%, .3) 1449 | } 1450 | } 1451 | 1452 | @keyframes e { 1453 | 1454 | 0%, 1455 | to { 1456 | background-color: hsla(0, 0%, 100%, .5) 1457 | } 1458 | 1459 | 30% { 1460 | background-color: hsla(0, 0%, 100%, .1) 1461 | } 1462 | 1463 | 60% { 1464 | background-color: hsla(0, 0%, 100%, .3) 1465 | } 1466 | } 1467 | 1468 | @-webkit-keyframes f { 1469 | 1470 | 0%, 1471 | to { 1472 | background-color: hsla(0, 0%, 100%, .3) 1473 | } 1474 | 1475 | 30% { 1476 | background-color: hsla(0, 0%, 100%, .5) 1477 | } 1478 | 1479 | 60% { 1480 | background-color: hsla(0, 0%, 100%, .1) 1481 | } 1482 | } 1483 | 1484 | @keyframes f { 1485 | 1486 | 0%, 1487 | to { 1488 | background-color: hsla(0, 0%, 100%, .3) 1489 | } 1490 | 1491 | 30% { 1492 | background-color: hsla(0, 0%, 100%, .5) 1493 | } 1494 | 1495 | 60% { 1496 | background-color: hsla(0, 0%, 100%, .1) 1497 | } 1498 | } 1499 | 1500 | @-webkit-keyframes g { 1501 | 1502 | 0%, 1503 | to { 1504 | background-color: hsla(0, 0%, 100%, .1) 1505 | } 1506 | 1507 | 30% { 1508 | background-color: hsla(0, 0%, 100%, .3) 1509 | } 1510 | 1511 | 60% { 1512 | background-color: hsla(0, 0%, 100%, .5) 1513 | } 1514 | } 1515 | 1516 | @keyframes g { 1517 | 1518 | 0%, 1519 | to { 1520 | background-color: hsla(0, 0%, 100%, .1) 1521 | } 1522 | 1523 | 30% { 1524 | background-color: hsla(0, 0%, 100%, .3) 1525 | } 1526 | 1527 | 60% { 1528 | background-color: hsla(0, 0%, 100%, .5) 1529 | } 1530 | } 1531 | 1532 | .weui-loadmore { 1533 | width: 65%; 1534 | margin: 1.5em auto; 1535 | line-height: 1.6em; 1536 | font-size: 14px; 1537 | text-align: center 1538 | } 1539 | 1540 | .weui-loadmore__tips { 1541 | display: inline-block; 1542 | vertical-align: middle 1543 | } 1544 | 1545 | .weui-loadmore_line { 1546 | border-top: 1px solid rgba(0, 0, 0, .1); 1547 | margin-top: 2.4em 1548 | } 1549 | 1550 | .weui-loadmore__tips_in-line { 1551 | position: relative; 1552 | top: -.9em; 1553 | padding: 0 .55em; 1554 | background-color: #fff; 1555 | color: rgba(0, 0, 0, .5) 1556 | } 1557 | 1558 | .weui-loadmore__tips_in-dot { 1559 | position: relative; 1560 | padding: 0 .16em; 1561 | width: 4px; 1562 | height: 1.6em 1563 | } 1564 | 1565 | .weui-loadmore__tips_in-dot:before { 1566 | content: " "; 1567 | position: absolute; 1568 | top: 50%; 1569 | left: 50%; 1570 | margin-top: -1px; 1571 | margin-left: -2px; 1572 | width: 4px; 1573 | height: 4px; 1574 | border-radius: 50%; 1575 | background-color: rgba(0, 0, 0, .1) 1576 | } 1577 | 1578 | .weui-badge { 1579 | display: inline-block; 1580 | padding: .15em .4em; 1581 | min-width: 8px; 1582 | border-radius: 18px; 1583 | background-color: #fa5151; 1584 | color: #fff; 1585 | line-height: 1.2; 1586 | text-align: center; 1587 | font-size: 12px; 1588 | vertical-align: middle 1589 | } 1590 | 1591 | .weui-badge_dot { 1592 | padding: .4em; 1593 | min-width: 0 1594 | } 1595 | 1596 | .weui-panel { 1597 | background-color: #fff; 1598 | margin-top: 10px; 1599 | position: relative; 1600 | overflow: hidden 1601 | } 1602 | 1603 | .weui-panel:first-child { 1604 | margin-top: 0 1605 | } 1606 | 1607 | .weui-panel:before { 1608 | top: 0; 1609 | border-top: 1rpx solid rgba(0, 0, 0, .1) 1610 | } 1611 | 1612 | .weui-panel:after, 1613 | .weui-panel:before { 1614 | content: " "; 1615 | position: absolute; 1616 | left: 0; 1617 | right: 0; 1618 | height: 1px; 1619 | color: rgba(0, 0, 0, .1) 1620 | } 1621 | 1622 | .weui-panel:after { 1623 | bottom: 0; 1624 | border-bottom: 1rpx solid rgba(0, 0, 0, .1) 1625 | } 1626 | 1627 | .weui-panel__hd { 1628 | padding: 16px 16px 13px; 1629 | color: rgba(0, 0, 0, .9); 1630 | font-size: 15px; 1631 | font-weight: 700; 1632 | position: relative 1633 | } 1634 | 1635 | .weui-panel__hd:after { 1636 | content: " "; 1637 | position: absolute; 1638 | left: 0; 1639 | bottom: 0; 1640 | right: 0; 1641 | height: 1px; 1642 | border-bottom: 1rpx solid rgba(0, 0, 0, .1); 1643 | color: rgba(0, 0, 0, .1); 1644 | left: 16px 1645 | } 1646 | 1647 | .weui-media-box { 1648 | padding: 16px; 1649 | position: relative 1650 | } 1651 | 1652 | .weui-media-box:before { 1653 | content: " "; 1654 | position: absolute; 1655 | left: 0; 1656 | top: 0; 1657 | right: 0; 1658 | height: 1px; 1659 | border-top: 1rpx solid rgba(0, 0, 0, .1); 1660 | color: rgba(0, 0, 0, .1); 1661 | left: 1s6px 1662 | } 1663 | 1664 | .weui-media-box:first-child:before { 1665 | display: none 1666 | } 1667 | 1668 | .weui-media-box__title { 1669 | font-weight: 400; 1670 | font-size: 17px; 1671 | color: rgba(0, 0, 0, .9); 1672 | width: auto; 1673 | white-space: nowrap; 1674 | word-wrap: normal; 1675 | word-wrap: break-word; 1676 | word-break: break-all 1677 | } 1678 | 1679 | .weui-media-box__desc, 1680 | .weui-media-box__title { 1681 | line-height: 1.4; 1682 | overflow: hidden; 1683 | text-overflow: ellipsis 1684 | } 1685 | 1686 | .weui-media-box__desc { 1687 | color: rgba(0, 0, 0, .5); 1688 | font-size: 14px; 1689 | padding-top: 4px; 1690 | display: -webkit-box; 1691 | -webkit-box-orient: vertical; 1692 | -webkit-line-clamp: 2 1693 | } 1694 | 1695 | .weui-media-box__info { 1696 | margin-top: 16px; 1697 | padding-bottom: 4px; 1698 | font-size: 13px; 1699 | color: #cecece; 1700 | line-height: 1em; 1701 | list-style: none; 1702 | overflow: hidden 1703 | } 1704 | 1705 | .weui-media-box__info__meta { 1706 | float: left; 1707 | padding-right: 1em 1708 | } 1709 | 1710 | .weui-media-box__info__meta_extra { 1711 | padding-left: 1em; 1712 | border-left: 1px solid #cecece 1713 | } 1714 | 1715 | .weui-media-box__title_in-text { 1716 | margin-bottom: 8px 1717 | } 1718 | 1719 | .weui-media-box_appmsg { 1720 | display: -webkit-box; 1721 | display: -webkit-flex; 1722 | display: flex; 1723 | -webkit-box-align: center; 1724 | -webkit-align-items: center; 1725 | align-items: center 1726 | } 1727 | 1728 | .weui-media-box__thumb { 1729 | width: 100%; 1730 | height: 100%; 1731 | vertical-align: top 1732 | } 1733 | 1734 | .weui-media-box__hd_in-appmsg { 1735 | margin-right: 16px; 1736 | width: 60px; 1737 | height: 60px; 1738 | line-height: 60px; 1739 | text-align: center 1740 | } 1741 | 1742 | .weui-media-box__bd_in-appmsg { 1743 | -webkit-box-flex: 1; 1744 | -webkit-flex: 1; 1745 | flex: 1; 1746 | min-width: 0 1747 | } 1748 | 1749 | .weui-media-box_small-appmsg { 1750 | padding: 0 1751 | } 1752 | 1753 | .weui-cells_in-small-appmsg { 1754 | margin-top: 0 1755 | } 1756 | 1757 | .weui-cells_in-small-appmsg:before { 1758 | display: none 1759 | } 1760 | 1761 | .weui-progress { 1762 | display: -webkit-box; 1763 | display: -webkit-flex; 1764 | display: flex; 1765 | -webkit-box-align: center; 1766 | -webkit-align-items: center; 1767 | align-items: center 1768 | } 1769 | 1770 | .weui-progress__bar { 1771 | -webkit-box-flex: 1; 1772 | -webkit-flex: 1; 1773 | flex: 1 1774 | } 1775 | 1776 | .weui-progress__opr { 1777 | margin-left: 15px; 1778 | font-size: 0 1779 | } 1780 | 1781 | .weui-navbar { 1782 | display: -webkit-box; 1783 | display: -webkit-flex; 1784 | display: flex; 1785 | position: relative; 1786 | z-index: 500; 1787 | background-color: #fff; 1788 | border-bottom: 1rpx solid rgba(0, 0, 0, .1); 1789 | padding-top: constant(safe-area-inset-top); 1790 | padding-top: env(safe-area-inset-top) 1791 | } 1792 | 1793 | .weui-navbar+.weui-tab__panel { 1794 | padding-bottom: constant(safe-area-inset-bottom); 1795 | padding-bottom: env(safe-area-inset-bottom) 1796 | } 1797 | 1798 | .weui-navbar__item { 1799 | position: relative; 1800 | display: block; 1801 | -webkit-box-flex: 1; 1802 | -webkit-flex: 1; 1803 | flex: 1; 1804 | padding: 16px; 1805 | padding: calc(16px + constant(safe-area-inset-top)) 16px 16px; 1806 | padding: calc(16px + env(safe-area-inset-top)) 16px 16px; 1807 | text-align: center; 1808 | font-size: 17px; 1809 | line-height: 1.41176471 1810 | } 1811 | 1812 | .weui-navbar__item:after { 1813 | content: " "; 1814 | position: absolute; 1815 | right: 0; 1816 | top: 0; 1817 | width: 1px; 1818 | bottom: 0; 1819 | border-right: 1rpx solid rgba(0, 0, 0, .1); 1820 | color: rgba(0, 0, 0, .1) 1821 | } 1822 | 1823 | .weui-navbar__item.weui-bar__item_on { 1824 | background-color: #ececec 1825 | } 1826 | 1827 | .weui-navbar__item:first-child { 1828 | padding-left: calc(16px + constant(safe-area-inset-left)); 1829 | padding-left: calc(16px + env(safe-area-inset-left)) 1830 | } 1831 | 1832 | .weui-navbar__item:last-child { 1833 | padding-right: calc(16px + constant(safe-area-inset-right)); 1834 | padding-right: calc(16px + env(safe-area-inset-right)) 1835 | } 1836 | 1837 | .weui-navbar__item:last-child:after { 1838 | display: none 1839 | } 1840 | 1841 | .weui-navbar__slider { 1842 | position: absolute; 1843 | content: " "; 1844 | left: 0; 1845 | bottom: 0; 1846 | width: 6em; 1847 | height: 2px; 1848 | background-color: #07c160; 1849 | -webkit-transition: -webkit-transform .3s; 1850 | transition: -webkit-transform .3s; 1851 | transition: transform .3s; 1852 | transition: transform .3s, -webkit-transform .3s; 1853 | display: none 1854 | } 1855 | 1856 | .weui-navbar__title { 1857 | overflow: hidden; 1858 | text-overflow: ellipsis; 1859 | display: -webkit-box; 1860 | -webkit-box-orient: vertical; 1861 | -webkit-line-clamp: 1 1862 | } 1863 | 1864 | .weui-tabbar { 1865 | display: -webkit-box; 1866 | display: -webkit-flex; 1867 | display: flex; 1868 | position: relative; 1869 | z-index: 500; 1870 | background-color: #f7f7f7 1871 | } 1872 | 1873 | .weui-tabbar:before { 1874 | content: " "; 1875 | position: absolute; 1876 | left: 0; 1877 | top: 0; 1878 | right: 0; 1879 | height: 1px; 1880 | border-top: 1rpx solid rgba(0, 0, 0, .1); 1881 | color: rgba(0, 0, 0, .1) 1882 | } 1883 | 1884 | .weui-tabbar__item { 1885 | display: block; 1886 | -webkit-box-flex: 1; 1887 | -webkit-flex: 1; 1888 | flex: 1; 1889 | padding: 8px 0 4px; 1890 | padding-bottom: calc(8px + constant(safe-area-inset-bottom)); 1891 | padding-bottom: calc(8px + env(safe-area-inset-bottom)); 1892 | font-size: 0; 1893 | color: rgba(0, 0, 0, .5); 1894 | text-align: center; 1895 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 1896 | } 1897 | 1898 | .weui-tabbar__item:first-child { 1899 | padding-left: constant(safe-area-inset-left); 1900 | padding-left: env(safe-area-inset-left) 1901 | } 1902 | 1903 | .weui-tabbar__item:last-child { 1904 | padding-right: constant(safe-area-inset-right); 1905 | padding-right: env(safe-area-inset-right) 1906 | } 1907 | 1908 | .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, 1909 | .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i, 1910 | .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label { 1911 | color: #07c160 1912 | } 1913 | 1914 | .weui-tabbar__icon { 1915 | display: inline-block; 1916 | width: 28px; 1917 | height: 28px; 1918 | margin-bottom: 2px 1919 | } 1920 | 1921 | .weui-tabbar__icon>i, 1922 | i.weui-tabbar__icon { 1923 | font-size: 24px; 1924 | color: rgba(0, 0, 0, .5) 1925 | } 1926 | 1927 | .weui-tabbar__icon image { 1928 | width: 100%; 1929 | height: 100% 1930 | } 1931 | 1932 | .weui-tabbar__label { 1933 | color: rgba(0, 0, 0, .9); 1934 | font-size: 10px; 1935 | line-height: 1.4 1936 | } 1937 | 1938 | .weui-tab { 1939 | display: -webkit-box; 1940 | display: -webkit-flex; 1941 | display: flex; 1942 | height: 100%; 1943 | box-sizing: border-box; 1944 | -webkit-box-orient: vertical; 1945 | -webkit-box-direction: normal; 1946 | -webkit-flex-direction: column; 1947 | flex-direction: column 1948 | } 1949 | 1950 | .weui-tab__panel { 1951 | box-sizing: border-box; 1952 | -webkit-box-flex: 1; 1953 | -webkit-flex: 1; 1954 | flex: 1; 1955 | overflow: auto; 1956 | -webkit-overflow-scrolling: touch 1957 | } 1958 | 1959 | :host { 1960 | width: 100% 1961 | } 1962 | 1963 | .weui-slideview { 1964 | overflow: hidden; 1965 | position: relative 1966 | } 1967 | 1968 | .weui-slideview__left { 1969 | position: relative; 1970 | z-index: 10 1971 | } 1972 | 1973 | .weui-slideview__right { 1974 | position: absolute; 1975 | z-index: 1; 1976 | left: 100%; 1977 | top: 0; 1978 | height: 100% 1979 | } 1980 | 1981 | .weui-slideview__btn__wrp { 1982 | position: absolute; 1983 | left: 0; 1984 | bottom: 0; 1985 | text-align: center; 1986 | min-width: 69px; 1987 | height: 100%; 1988 | white-space: nowrap 1989 | } 1990 | 1991 | .weui-slideview__btn { 1992 | color: #fff; 1993 | padding: 0 17px 1994 | } 1995 | 1996 | .weui-slideview__btn-group_default .weui-slideview__btn { 1997 | background: #c7c7cc 1998 | } 1999 | 2000 | .weui-slideview__btn-group_default~.weui-slideview__btn-group_default:before { 2001 | content: " "; 2002 | position: absolute; 2003 | left: 0; 2004 | top: 0; 2005 | width: 1px; 2006 | bottom: 0; 2007 | border-left: 1rpx solid #fff; 2008 | color: #fff 2009 | } 2010 | 2011 | .weui-slideview__btn-group_default:first-child:before { 2012 | display: none 2013 | } 2014 | 2015 | .weui-slideview__btn-group_warn .weui-slideview__btn { 2016 | background: #fe3b30 2017 | } 2018 | 2019 | .weui-slideview__btn-group_warn~.weui-slideview__btn-group_warn:before { 2020 | content: " "; 2021 | position: absolute; 2022 | left: 0; 2023 | top: 0; 2024 | width: 1px; 2025 | bottom: 0; 2026 | border-left: 1rpx solid #fff; 2027 | color: #fff 2028 | } 2029 | 2030 | .weui-slideview__btn-group_warn:first-child:before { 2031 | display: none 2032 | } 2033 | 2034 | .weui-slideview_icon .weui-slideview__btn__wrp { 2035 | background: transparent; 2036 | font-size: 0 2037 | } 2038 | 2039 | .weui-slideview_icon .weui-slideview__btn__wrp:after { 2040 | content: ""; 2041 | width: 0; 2042 | height: 100%; 2043 | vertical-align: middle; 2044 | display: inline-block 2045 | } 2046 | 2047 | .weui-slideview_icon .weui-slideview__btn__wrp:first-child { 2048 | padding-left: 16px 2049 | } 2050 | 2051 | .weui-slideview_icon .weui-slideview__btn__wrp:last-child { 2052 | padding-right: 8px 2053 | } 2054 | 2055 | .weui-slideview_icon .weui-slideview__btn { 2056 | width: 48px; 2057 | height: 48px; 2058 | line-height: 48px; 2059 | padding: 0; 2060 | display: inline-block; 2061 | vertical-align: middle; 2062 | border-radius: 50%; 2063 | background-color: #fff 2064 | } 2065 | 2066 | .weui-slideview_icon .weui-slideview__btn__icon { 2067 | display: inline-block; 2068 | vertical-align: middle; 2069 | width: 22px; 2070 | height: 22px 2071 | } 2072 | 2073 | .weui-gallery { 2074 | position: fixed; 2075 | top: 0; 2076 | right: 0; 2077 | bottom: 0; 2078 | left: 0; 2079 | background-color: #000; 2080 | z-index: 1000; 2081 | -webkit-flex-direction: column; 2082 | -webkit-box-orient: vertical; 2083 | -webkit-box-direction: normal; 2084 | flex-direction: column; 2085 | -webkit-flex-wrap: nowrap; 2086 | flex-wrap: nowrap; 2087 | opacity: 0; 2088 | visibility: hidden; 2089 | -webkit-transition: opacity .3s; 2090 | transition: opacity .3s 2091 | } 2092 | 2093 | .weui-gallery_show { 2094 | display: -webkit-box; 2095 | display: -webkit-flex; 2096 | display: flex; 2097 | visibility: visible; 2098 | opacity: 1 2099 | } 2100 | 2101 | .weui-gallery__img__wrp { 2102 | -webkit-box-flex: 1; 2103 | -webkit-flex: 1; 2104 | flex: 1; 2105 | position: relative; 2106 | font-size: 0 2107 | } 2108 | 2109 | .weui-gallery__img { 2110 | background: 50% no-repeat; 2111 | background-size: contain; 2112 | position: absoulte; 2113 | width: 100%; 2114 | height: 100% 2115 | } 2116 | 2117 | .weui-gallery__opr { 2118 | background-color: #0d0d0d; 2119 | color: #fff; 2120 | line-height: 60px; 2121 | min-height: 60px; 2122 | padding-bottom: constant(safe-area-inset-bottom); 2123 | padding-bottom: env(safe-area-inset-bottom); 2124 | text-align: center 2125 | } 2126 | 2127 | .weui-gallery__opr navigator { 2128 | color: #fff 2129 | } 2130 | 2131 | .weui-gallery__del { 2132 | display: block 2133 | } 2134 | 2135 | .weui-gallery__info { 2136 | color: #fff; 2137 | font-size: 17px; 2138 | line-height: 60px; 2139 | min-height: 60px; 2140 | text-align: center 2141 | } 2142 | 2143 | .weui-search-bar { 2144 | position: relative; 2145 | padding: 8px; 2146 | display: -webkit-box; 2147 | display: -webkit-flex; 2148 | display: flex; 2149 | box-sizing: border-box; 2150 | background-color: #ededed; 2151 | -webkit-text-size-adjust: 100%; 2152 | -webkit-box-align: center; 2153 | -webkit-align-items: center; 2154 | align-items: center 2155 | } 2156 | 2157 | .weui-icon-search { 2158 | margin-right: 8px; 2159 | font-size: 14px; 2160 | vertical-align: top; 2161 | margin-top: .64em; 2162 | height: 1em; 2163 | line-height: 1em 2164 | } 2165 | 2166 | .weui-icon-search_in-box { 2167 | position: absolute; 2168 | left: 12px; 2169 | top: 50%; 2170 | margin-top: -8px 2171 | } 2172 | 2173 | .weui-search-bar__text { 2174 | display: inline-block; 2175 | font-size: 14px; 2176 | vertical-align: top 2177 | } 2178 | 2179 | .weui-search-bar__form { 2180 | position: relative; 2181 | -webkit-box-flex: 1; 2182 | -webkit-flex: auto; 2183 | flex: auto; 2184 | border-radius: 4px; 2185 | background: #fff 2186 | } 2187 | 2188 | .weui-search-bar__box { 2189 | position: relative; 2190 | padding-left: 32px; 2191 | padding-right: 32px; 2192 | width: 100%; 2193 | box-sizing: border-box; 2194 | z-index: 1 2195 | } 2196 | 2197 | .weui-search-bar__input { 2198 | height: 32px; 2199 | line-height: 32px; 2200 | font-size: 14px; 2201 | caret-color: #07c160 2202 | } 2203 | 2204 | .weui-icon-clear { 2205 | position: absolute; 2206 | top: 0; 2207 | right: 0; 2208 | bottom: 0; 2209 | padding: 0 12px; 2210 | font-size: 0 2211 | } 2212 | 2213 | .weui-icon-clear:after { 2214 | content: ""; 2215 | height: 100%; 2216 | vertical-align: middle; 2217 | display: inline-block; 2218 | width: 0; 2219 | overflow: hidden 2220 | } 2221 | 2222 | .weui-search-bar__label { 2223 | position: absolute; 2224 | top: 0; 2225 | right: 0; 2226 | bottom: 0; 2227 | left: 0; 2228 | z-index: 2; 2229 | border-radius: 4px; 2230 | text-align: center; 2231 | color: rgba(0, 0, 0, .5); 2232 | background: #fff; 2233 | line-height: 32px 2234 | } 2235 | 2236 | .weui-search-bar__cancel-btn { 2237 | margin-left: 8px; 2238 | line-height: 32px; 2239 | color: #576b95; 2240 | white-space: nowrap 2241 | } 2242 | 2243 | icon[type=success]:after, 2244 | icon[type=success]:before { 2245 | color: #07c160 !important 2246 | } 2247 | 2248 | .weui-mask { 2249 | background: rgba(0, 0, 0, .6) 2250 | } 2251 | 2252 | .weui-mask, 2253 | .weui-mask_transparent { 2254 | position: fixed; 2255 | z-index: 1000; 2256 | top: 0; 2257 | right: 0; 2258 | left: 0; 2259 | bottom: 0 2260 | } 2261 | 2262 | .weui-dialog__wrp { 2263 | position: fixed; 2264 | z-index: 5000; 2265 | top: 16px; 2266 | bottom: 16px; 2267 | left: 16px; 2268 | right: 16px; 2269 | text-align: center; 2270 | font-size: 0; 2271 | display: -webkit-box; 2272 | display: -webkit-flex; 2273 | display: flex; 2274 | -webkit-box-align: center; 2275 | -webkit-align-items: center; 2276 | align-items: center; 2277 | -webkit-box-pack: center; 2278 | -webkit-justify-content: center; 2279 | justify-content: center 2280 | } 2281 | 2282 | .weui-dialog__wrp .weui-dialog { 2283 | max-height: 100% 2284 | } 2285 | 2286 | .weui-dialog { 2287 | background-color: #fff; 2288 | text-align: center; 2289 | border-radius: 12px; 2290 | overflow: hidden; 2291 | display: -webkit-box; 2292 | display: -webkit-flex; 2293 | display: flex; 2294 | -webkit-flex-direction: column; 2295 | -webkit-box-orient: vertical; 2296 | -webkit-box-direction: normal; 2297 | flex-direction: column; 2298 | max-height: 90% 2299 | } 2300 | 2301 | .weui-dialog__hd { 2302 | padding: 32px 24px 16px 2303 | } 2304 | 2305 | .weui-dialog__title { 2306 | font-weight: 700; 2307 | font-size: 17px; 2308 | line-height: 1.4 2309 | } 2310 | 2311 | .weui-dialog__bd { 2312 | -webkit-box-flex: 1; 2313 | -webkit-flex: 1; 2314 | flex: 1; 2315 | overflow-y: auto; 2316 | -webkit-overflow-scrolling: touch; 2317 | padding: 0 24px; 2318 | margin-bottom: 32px; 2319 | min-height: 40px; 2320 | font-size: 17px; 2321 | line-height: 1.4; 2322 | overflow-wrap: break-word; 2323 | -webkit-hyphens: auto; 2324 | hyphens: auto; 2325 | color: rgba(0, 0, 0, .5) 2326 | } 2327 | 2328 | .weui-dialog__bd:first-child { 2329 | padding: 32px 24px 0; 2330 | font-weight: 700; 2331 | color: rgba(0, 0, 0, .9); 2332 | -webkit-flex-direction: column; 2333 | -webkit-box-orient: vertical; 2334 | -webkit-box-direction: normal; 2335 | flex-direction: column; 2336 | -webkit-box-pack: center; 2337 | -webkit-justify-content: center; 2338 | justify-content: center 2339 | } 2340 | 2341 | .weui-dialog__bd:first-child, 2342 | .weui-dialog__ft { 2343 | display: -webkit-box; 2344 | display: -webkit-flex; 2345 | display: flex 2346 | } 2347 | 2348 | .weui-dialog__ft { 2349 | position: relative; 2350 | line-height: 64px; 2351 | min-height: 64px; 2352 | font-size: 17px 2353 | } 2354 | 2355 | .weui-dialog__ft:after { 2356 | content: " "; 2357 | position: absolute; 2358 | left: 0; 2359 | top: 0; 2360 | right: 0; 2361 | height: 1px; 2362 | border-top: 1rpx solid rgba(0, 0, 0, .1); 2363 | color: rgba(0, 0, 0, .1) 2364 | } 2365 | 2366 | .weui-dialog__btn { 2367 | display: block; 2368 | -webkit-box-flex: 1; 2369 | -webkit-flex: 1; 2370 | flex: 1; 2371 | color: #576b95; 2372 | font-weight: 700; 2373 | text-decoration: none; 2374 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 2375 | position: relative 2376 | } 2377 | 2378 | .weui-dialog__btn:active { 2379 | background-color: #ececec 2380 | } 2381 | 2382 | .weui-dialog__btn:after { 2383 | content: " "; 2384 | position: absolute; 2385 | left: 0; 2386 | top: 0; 2387 | width: 1px; 2388 | bottom: 0; 2389 | border-left: 1rpx solid rgba(0, 0, 0, .1); 2390 | color: rgba(0, 0, 0, .1) 2391 | } 2392 | 2393 | .weui-dialog__btn:first-child:after { 2394 | display: none 2395 | } 2396 | 2397 | .weui-dialog__btn_default { 2398 | color: rgba(0, 0, 0, .9) 2399 | } 2400 | 2401 | @media screen and (min-width:352px) { 2402 | .weui-dialog { 2403 | width: 320px; 2404 | margin: 0 auto 2405 | } 2406 | } 2407 | 2408 | .weui-actionsheet { 2409 | position: fixed; 2410 | left: 0; 2411 | bottom: 0; 2412 | -webkit-transform: translateY(100%); 2413 | transform: translateY(100%); 2414 | -webkit-backface-visibility: hidden; 2415 | backface-visibility: hidden; 2416 | z-index: 5000; 2417 | width: 100%; 2418 | background-color: #eae7e8; 2419 | -webkit-transition: -webkit-transform .3s; 2420 | transition: -webkit-transform .3s; 2421 | transition: transform .3s; 2422 | transition: transform .3s, -webkit-transform .3s; 2423 | border-top-left-radius: 12px; 2424 | border-top-right-radius: 12px; 2425 | overflow: hidden 2426 | } 2427 | 2428 | .weui-actionsheet__title { 2429 | position: relative; 2430 | height: 56px; 2431 | padding: 0 24px; 2432 | display: -webkit-box; 2433 | display: -webkit-flex; 2434 | display: flex; 2435 | -webkit-box-pack: center; 2436 | -webkit-justify-content: center; 2437 | justify-content: center; 2438 | -webkit-box-orient: vertical; 2439 | -webkit-box-direction: normal; 2440 | -webkit-flex-direction: column; 2441 | flex-direction: column; 2442 | text-align: center; 2443 | font-size: 12px; 2444 | color: rgba(0, 0, 0, .5); 2445 | line-height: 1.4; 2446 | background: #fff 2447 | } 2448 | 2449 | .weui-actionsheet__title:before { 2450 | content: " "; 2451 | position: absolute; 2452 | left: 0; 2453 | bottom: 0; 2454 | right: 0; 2455 | height: 1px; 2456 | border-bottom: 1rpx solid rgba(0, 0, 0, .1); 2457 | color: rgba(0, 0, 0, .1) 2458 | } 2459 | 2460 | .weui-actionsheet__title .weui-actionsheet__title-text { 2461 | overflow: hidden; 2462 | text-overflow: ellipsis; 2463 | display: -webkit-box; 2464 | -webkit-box-orient: vertical; 2465 | -webkit-line-clamp: 2 2466 | } 2467 | 2468 | .weui-actionsheet__menu { 2469 | color: rgba(0, 0, 0, .9); 2470 | background-color: #fff 2471 | } 2472 | 2473 | .weui-actionsheet__action { 2474 | margin-top: 8px; 2475 | background-color: #fff; 2476 | padding-bottom: constant(safe-area-inset-bottom); 2477 | padding-bottom: env(safe-area-inset-bottom) 2478 | } 2479 | 2480 | .weui-actionsheet__cell { 2481 | position: relative; 2482 | padding: 16px; 2483 | text-align: center; 2484 | font-size: 17px; 2485 | line-height: 1.41176471 2486 | } 2487 | 2488 | .weui-actionsheet__cell:before { 2489 | content: " "; 2490 | position: absolute; 2491 | left: 0; 2492 | top: 0; 2493 | right: 0; 2494 | height: 1px; 2495 | border-top: 1rpx solid rgba(0, 0, 0, .1); 2496 | color: rgba(0, 0, 0, .1) 2497 | } 2498 | 2499 | .weui-actionsheet__cell:active { 2500 | background-color: #ececec 2501 | } 2502 | 2503 | .weui-actionsheet__cell:first-child:before { 2504 | display: none 2505 | } 2506 | 2507 | .weui-actionsheet__cell_warn { 2508 | color: #fa5151 2509 | } 2510 | 2511 | .weui-skin_android .weui-actionsheet { 2512 | position: fixed; 2513 | left: 50%; 2514 | top: 50%; 2515 | bottom: auto; 2516 | -webkit-transform: translate(-50%, -50%); 2517 | transform: translate(-50%, -50%); 2518 | width: 274px; 2519 | box-sizing: border-box; 2520 | -webkit-backface-visibility: hidden; 2521 | backface-visibility: hidden; 2522 | background: transparent; 2523 | -webkit-transition: -webkit-transform .3s; 2524 | transition: -webkit-transform .3s; 2525 | transition: transform .3s; 2526 | transition: transform .3s, -webkit-transform .3s; 2527 | border-radius: 2px 2528 | } 2529 | 2530 | .weui-skin_android .weui-actionsheet__action { 2531 | display: none 2532 | } 2533 | 2534 | .weui-skin_android .weui-actionsheet__menu { 2535 | border-radius: 2px; 2536 | box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .1) 2537 | } 2538 | 2539 | .weui-skin_android .weui-actionsheet__cell { 2540 | padding: 16px; 2541 | font-size: 17px; 2542 | line-height: 1.41176471; 2543 | color: rgba(0, 0, 0, .9); 2544 | text-align: left 2545 | } 2546 | 2547 | .weui-skin_android .weui-actionsheet__cell:first-child { 2548 | border-top-left-radius: 2px; 2549 | border-top-right-radius: 2px 2550 | } 2551 | 2552 | .weui-skin_android .weui-actionsheet__cell:last-child { 2553 | border-bottom-left-radius: 2px; 2554 | border-bottom-right-radius: 2px 2555 | } 2556 | 2557 | .weui-actionsheet_toggle { 2558 | -webkit-transform: translate(0); 2559 | transform: translate(0) 2560 | } 2561 | 2562 | .weui-half-screen-dialog { 2563 | position: fixed; 2564 | left: 0; 2565 | right: 0; 2566 | bottom: 0; 2567 | max-height: 75%; 2568 | z-index: 5000; 2569 | line-height: 1.4; 2570 | background-color: #fff; 2571 | border-top-left-radius: 12px; 2572 | border-top-right-radius: 12px; 2573 | overflow: hidden; 2574 | padding: 0 24px; 2575 | padding: 0 calc(24px + constant(safe-area-inset-right)) constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left)); 2576 | padding: 0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(24px + env(safe-area-inset-left)) 2577 | } 2578 | 2579 | .weui-half-screen-dialog__hd { 2580 | font-size: 8px; 2581 | height: 8em; 2582 | display: -webkit-box; 2583 | display: -webkit-flex; 2584 | display: flex; 2585 | -webkit-box-align: center; 2586 | -webkit-align-items: center; 2587 | align-items: center 2588 | } 2589 | 2590 | .weui-half-screen-dialog__hd .weui-icon-btn { 2591 | position: absolute; 2592 | top: 50%; 2593 | -webkit-transform: translateY(-50%); 2594 | transform: translateY(-50%) 2595 | } 2596 | 2597 | .weui-half-screen-dialog__hd__side { 2598 | position: relative; 2599 | left: -8px 2600 | } 2601 | 2602 | .weui-half-screen-dialog__hd__main { 2603 | -webkit-box-flex: 1; 2604 | -webkit-flex: 1; 2605 | flex: 1 2606 | } 2607 | 2608 | .weui-half-screen-dialog__hd__side+.weui-half-screen-dialog__hd__main { 2609 | text-align: center; 2610 | padding: 0 40px 2611 | } 2612 | 2613 | .weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side { 2614 | right: -8px; 2615 | left: auto 2616 | } 2617 | 2618 | .weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-icon-btn { 2619 | right: 0 2620 | } 2621 | 2622 | .weui-half-screen-dialog__title { 2623 | display: block; 2624 | color: rgba(0, 0, 0, .9); 2625 | font-weight: 700; 2626 | font-size: 15px 2627 | } 2628 | 2629 | .weui-half-screen-dialog__subtitle { 2630 | display: block; 2631 | color: rgba(0, 0, 0, .5); 2632 | font-size: 10px 2633 | } 2634 | 2635 | .weui-half-screen-dialog__bd { 2636 | word-wrap: break-word; 2637 | -webkit-hyphens: auto; 2638 | hyphens: auto; 2639 | overflow-y: auto 2640 | } 2641 | 2642 | .weui-half-screen-dialog__desc { 2643 | padding-top: 4px; 2644 | font-size: 17px; 2645 | font-weight: 700; 2646 | color: rgba(0, 0, 0, .9); 2647 | line-height: 1.4 2648 | } 2649 | 2650 | .weui-half-screen-dialog__tips { 2651 | padding-top: 16px; 2652 | font-size: 14px; 2653 | color: rgba(0, 0, 0, .3); 2654 | line-height: 1.4 2655 | } 2656 | 2657 | .weui-half-screen-dialog__ft { 2658 | padding: 40px 24px 32px; 2659 | text-align: center 2660 | } 2661 | 2662 | .weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2), 2663 | .weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2)+.weui-btn { 2664 | display: inline-block; 2665 | vertical-align: top; 2666 | margin: 0 8px; 2667 | width: 120px 2668 | } 2669 | 2670 | .weui-icon-btn { 2671 | background-color: transparent; 2672 | background-repeat: no-repeat; 2673 | background-position: 50% 50%; 2674 | background-size: 100%; 2675 | border: 0; 2676 | outline: 0; 2677 | font-size: 0 2678 | } 2679 | 2680 | .weui-icon-btn_goback { 2681 | width: 12px; 2682 | height: 24px; 2683 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E %3Cpath fill='%23000' fill-opacity='.9' d='M26 39.438L24.955 40.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42l7.666-7.79L26 24.563 18.682 32 26 39.438z'/%3E %3C/g%3E%3C/svg%3E") 2684 | } 2685 | 2686 | .weui-icon-btn_close { 2687 | width: 24px; 2688 | height: 24px; 2689 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E %3Cdefs%3E %3Cpath id='33cf2e7b-22e9-42d7-9c56-a9f4a4e03565-a' d='M8 6.943L1.807.75.75 1.807 6.943 8 .75 14.193l1.057 1.057L8 9.057l6.193 6.193 1.057-1.057L9.057 8l6.193-6.193L14.193.75z'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E %3Cuse fill='%23000' fill-opacity='.9' transform='translate(20 24)' xlink:href='%2333cf2e7b-22e9-42d7-9c56-a9f4a4e03565-a'/%3E %3C/g%3E%3C/svg%3E") 2690 | } 2691 | 2692 | .weui-icon-btn_more { 2693 | width: 24px; 2694 | height: 24px; 2695 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(-374 -20)'%3E %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E %3Cpath fill='%23000' fill-opacity='.9' d='M380.75 32a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zm5.25-1.75a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E %3C/g%3E%3C/svg%3E") 2696 | } 2697 | 2698 | .weui-toptips { 2699 | position: fixed; 2700 | -webkit-transform: translateZ(0) translateY(-108%); 2701 | transform: translateZ(0) translateY(-108%); 2702 | text-align: center; 2703 | top: 8px; 2704 | left: 16px; 2705 | right: 16px; 2706 | border-radius: 4px; 2707 | padding: 8px; 2708 | -webkit-border-radius: 4px; 2709 | color: hsla(0, 0%, 100%, .9); 2710 | font-size: 17px; 2711 | line-height: 1.4; 2712 | background: rgba(250, 81, 81, .9); 2713 | z-index: 5000; 2714 | word-wrap: break-word; 2715 | word-break: break-all; 2716 | -webkit-transition: all .4s ease-in-out; 2717 | transition: all .4s ease-in-out 2718 | } 2719 | 2720 | .weui-toptips_show { 2721 | -webkit-transform: translateZ(0) translateY(0); 2722 | transform: translateZ(0) translateY(0); 2723 | opacity: 1 2724 | } 2725 | 2726 | .weui-toptips_warn { 2727 | background-color: #fa5151 2728 | } 2729 | 2730 | .weui-toptips_success { 2731 | background-color: #09bb07 2732 | } 2733 | 2734 | .weui-toptips_error { 2735 | background-color: #fa5151 2736 | } 2737 | 2738 | .weui-toptips_info { 2739 | background-color: #10aeff 2740 | } 2741 | 2742 | page { 2743 | --height: 44px; 2744 | --right: 190rpx 2745 | } 2746 | 2747 | .weui-navigation-bar { 2748 | overflow: hidden 2749 | } 2750 | 2751 | .weui-navigation-bar .android { 2752 | --height: 48px; 2753 | --right: 222rpx 2754 | } 2755 | 2756 | .weui-navigation-bar__inner { 2757 | position: fixed; 2758 | top: 0; 2759 | left: 0; 2760 | z-index: 5001; 2761 | height: var(--height); 2762 | padding-right: var(--right); 2763 | width: calc(100% - var(--right)) 2764 | } 2765 | 2766 | .weui-navigation-bar__inner, 2767 | .weui-navigation-bar__inner .weui-navigation-bar__left { 2768 | display: -webkit-box; 2769 | display: -webkit-flex; 2770 | display: flex; 2771 | -webkit-box-align: center; 2772 | -webkit-align-items: center; 2773 | align-items: center 2774 | } 2775 | 2776 | .weui-navigation-bar__inner .weui-navigation-bar__left { 2777 | position: relative; 2778 | width: var(--right); 2779 | padding-left: 16px; 2780 | -webkit-box-pack: center 2781 | } 2782 | 2783 | .weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn { 2784 | display: inline-block; 2785 | vertical-align: middle; 2786 | background-repeat: no-repeat 2787 | } 2788 | 2789 | .weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback { 2790 | font-size: 12px; 2791 | width: 1em; 2792 | height: 2em; 2793 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E"); 2794 | background-position: 50% 50%; 2795 | background-size: cover 2796 | } 2797 | 2798 | .weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback:active { 2799 | opacity: .5 2800 | } 2801 | 2802 | .weui-navigation-bar__inner .weui-navigation-bar__center { 2803 | font-size: 17px; 2804 | text-align: center; 2805 | position: relative; 2806 | -webkit-box-flex: 1; 2807 | -webkit-flex: 1; 2808 | flex: 1; 2809 | display: -webkit-box; 2810 | display: -webkit-flex; 2811 | display: flex; 2812 | -webkit-box-align: center; 2813 | -webkit-align-items: center; 2814 | align-items: center; 2815 | -webkit-box-pack: center; 2816 | -webkit-justify-content: center; 2817 | justify-content: center 2818 | } 2819 | 2820 | .weui-navigation-bar__inner .weui-navigation-bar__loading { 2821 | font-size: 0 2822 | } 2823 | 2824 | .weui-navigation-bar__inner .weui-navigation-bar__loading .weui-loading { 2825 | margin-left: 0 2826 | } 2827 | 2828 | .weui-navigation-bar__inner .weui-navigation-bar__right { 2829 | margin-right: 16px 2830 | } 2831 | 2832 | .weui-navigation-bar__placeholder { 2833 | height: var(--height); 2834 | background: #f8f8f8; 2835 | position: relative; 2836 | z-index: 50 2837 | } -------------------------------------------------------------------------------- /example/load/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles.slice(0, 4) 5 | }, 6 | 7 | 8 | onLoadmore(e) { 9 | var temp =[] 10 | temp.forEach(item => { 11 | this.data.articles.push(item) 12 | }); 13 | setTimeout(() => { 14 | this.setData({ 15 | articles: this.data.articles, 16 | load: 1, 17 | }) 18 | }, 800) 19 | }, 20 | 21 | 22 | 23 | onLoadStatus(e) { 24 | this.setData({ 25 | "loadStatus": e.detail 26 | }) 27 | }, 28 | 29 | }) -------------------------------------------------------------------------------- /example/load/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/load/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.title}} 7 | {{item.description}} 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/load/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/refresh-load-sticky-2/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | onRefresh(e) { 7 | this.data.articles = app.loadArticle(10) 8 | setTimeout(() => { 9 | this.setData({ 10 | articles: this.data.articles, 11 | refresh: 0, 12 | }) 13 | }, 1000) 14 | }, 15 | 16 | onLoadmore(e) { 17 | var temp = app.loadArticle(10) 18 | temp.forEach(item => { 19 | this.data.articles.push(item) 20 | }); 21 | setTimeout(() => { 22 | this.setData({ 23 | articles: this.data.articles, 24 | load: 1, 25 | }) 26 | }, 800) 27 | }, 28 | 29 | 30 | onRefreshStatus(e) { 31 | this.setData({ 32 | "refreshStatus": e.detail 33 | }) 34 | }, 35 | onLoadStatus(e) { 36 | this.setData({ 37 | "loadStatus": e.detail 38 | }) 39 | }, 40 | 41 | }) -------------------------------------------------------------------------------- /example/refresh-load-sticky-2/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/refresh-load-sticky-2/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | {{item.title}} 19 | {{item.description}} 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /example/refresh-load-sticky-2/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/refresh-load-sticky-3/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | onRefresh(e) { 7 | this.data.articles = app.loadArticle(10) 8 | setTimeout(() => { 9 | this.setData({ 10 | articles: this.data.articles, 11 | refresh: 0, 12 | }) 13 | }, 1000) 14 | }, 15 | 16 | onLoadmore(e) { 17 | var temp = app.loadArticle(10) 18 | temp.forEach(item => { 19 | this.data.articles.push(item) 20 | }); 21 | setTimeout(() => { 22 | this.setData({ 23 | articles: this.data.articles, 24 | load: 1, 25 | }) 26 | }, 800) 27 | }, 28 | 29 | 30 | onRefreshStatus(e) { 31 | this.setData({ 32 | "refreshStatus": e.detail 33 | }) 34 | }, 35 | onLoadStatus(e) { 36 | this.setData({ 37 | "loadStatus": e.detail 38 | }) 39 | }, 40 | 41 | }) -------------------------------------------------------------------------------- /example/refresh-load-sticky-3/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/refresh-load-sticky-3/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | {{item.title}} 24 | {{item.description}} 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /example/refresh-load-sticky-3/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/refresh-load-sticky/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | onRefresh(e) { 7 | this.data.articles = app.loadArticle(10) 8 | setTimeout(() => { 9 | this.setData({ 10 | articles: this.data.articles, 11 | refresh: 0, 12 | }) 13 | }, 1000) 14 | }, 15 | 16 | onLoadmore(e) { 17 | // var temp = app.loadArticle(10) 18 | // temp.forEach(item => { 19 | // this.data.articles.push(item) 20 | // }); 21 | setTimeout(() => { 22 | this.setData({ 23 | articles: this.data.articles, 24 | load: 1, 25 | }) 26 | }, 800) 27 | }, 28 | 29 | 30 | onRefreshStatus(e) { 31 | this.setData({ 32 | "refreshStatus": e.detail 33 | }) 34 | }, 35 | onLoadStatus(e) { 36 | this.setData({ 37 | "loadStatus": e.detail 38 | }) 39 | }, 40 | 41 | onDrag(e){ 42 | }, 43 | }) -------------------------------------------------------------------------------- /example/refresh-load-sticky/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/refresh-load-sticky/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {{item.title}} 13 | {{item.description}} 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/refresh-load-sticky/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/refresh-load/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | onRefresh(e) { 7 | this.data.articles = app.loadArticle(10) 8 | setTimeout(() => { 9 | this.setData({ 10 | articles: this.data.articles, 11 | refresh: 0, 12 | }) 13 | }, 1000) 14 | }, 15 | onLoadmore(e) { 16 | var temp = app.loadArticle(10) 17 | temp.forEach(item => { 18 | this.data.articles.push(item) 19 | }); 20 | setTimeout(() => { 21 | this.setData({ 22 | articles: this.data.articles, 23 | load: 1, 24 | }) 25 | }, 800) 26 | }, 27 | onRefreshStatus(e) { 28 | this.setData({ 29 | "refreshStatus": e.detail 30 | }) 31 | }, 32 | onLoadStatus(e) { 33 | this.setData({ 34 | "loadStatus": e.detail 35 | }) 36 | }, 37 | onRefreshInfo(e) { 38 | console.log(e); 39 | }, 40 | onRefreshDrag(e) { 41 | console.log('drag --- ', e.detail.space); 42 | }, 43 | onRefreshDragEnd(e) { 44 | console.log(e); 45 | }, 46 | onRefreshScroll(e) { 47 | console.log('scroll --- ', e.detail.space); 48 | }, 49 | onRefreshTop(e) { 50 | console.log(e); 51 | }, 52 | onRefreshBottom(e) { 53 | console.log(e); 54 | }, 55 | }) -------------------------------------------------------------------------------- /example/refresh-load/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/refresh-load/index.wxml: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | {{item.title}} 24 | {{item.description}} 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /example/refresh-load/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/refresh/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data: { 4 | articles: app.data.articles 5 | }, 6 | onRefresh(e) { 7 | this.data.articles = app.loadArticle(10) 8 | setTimeout(() => { 9 | this.setData({ 10 | articles: this.data.articles, 11 | refresh: 0, 12 | }) 13 | }, 1000) 14 | }, 15 | 16 | 17 | onRefreshStatus(e) { 18 | this.setData({ 19 | "refreshStatus": e.detail 20 | }) 21 | }, 22 | 23 | }) -------------------------------------------------------------------------------- /example/refresh/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "refresh": "/components/refresh/index", 4 | "default-header":"/components/header/default-header/index", 5 | "default-footer" :"/components/footer/default-footer/index" 6 | }, 7 | "disableScroll": true 8 | } -------------------------------------------------------------------------------- /example/refresh/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{item.title}} 8 | {{item.description}} 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/refresh/index.wxss: -------------------------------------------------------------------------------- 1 | /* example/refresh/index.wxss */ -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "preloadBackgroundData": false, 11 | "minified": true, 12 | "newFeature": true, 13 | "autoAudits": false, 14 | "coverView": true, 15 | "showShadowRootInWxmlPanel": true, 16 | "scopeDataCheck": false 17 | }, 18 | "compileType": "miniprogram", 19 | "libVersion": "2.11.0", 20 | "appid": "wxfbecd3e1564cda94", 21 | "projectname": "Refresh", 22 | "debugOptions": { 23 | "hidedInDevtools": [] 24 | }, 25 | "isGameTourist": false, 26 | "simulatorType": "wechat", 27 | "simulatorPluginLibVersion": {}, 28 | "condition": { 29 | "search": { 30 | "current": -1, 31 | "list": [] 32 | }, 33 | "conversation": { 34 | "current": -1, 35 | "list": [] 36 | }, 37 | "game": { 38 | "currentL": -1, 39 | "list": [] 40 | }, 41 | "miniprogram": { 42 | "current": -1, 43 | "list": [] 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | --------------------------------------------------------------------------------