123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <template>
- <view class="container">
- <view id="mylisttop" />
- <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
- :style="{ height: height + 'px' }" :triggered='true' @refresherrefresh='pullToRefresh' :lower-threshold='300'
- @scrolltolower='loadThePage'>
- <slot />
- <u-empty v-if="empty" :mode="mode" />
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- name: 'My_listbox',
- props: {
- getlist: Function,
- empty: Boolean,
- mode: {
- type: String,
- default: "data"
- },
- pullDown: {
- type: Boolean,
- default: true
- }
- },
- data() {
- return {
- inRefresh: false, //下拉开启自定义项
- height: 0
- };
- },
- methods: {
- /* 下拉刷新 */
- pullToRefresh() {
- this.inRefresh = true
- this.$emit("getlist", true)
- },
- /* 刷新完成 */
- RefreshToComplete() {
- setTimeout(() => {
- this.inRefresh = false
- }, 500)
- },
- /* 加载分页 */
- loadThePage() {
- this.$emit("getlist", false)
- },
- /* 设置组件高度 */
- setHeight() {
- this.getHeight("#mylisttop", this).then(height => {
- if (this.height != height) this.height = height
- });
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .scroll-view {
- position: relative;
- }
- /* 适配苹果手机底部安全距离 */
- .safety {
- height: constant(safe-area-inset-bottom);
- height: env(safe-area-inset-bottom);
- }
- /deep/ .u-empty .u-icon .u-icon__icon {
- font-size: 90px !important;
- line-height: 90px !important;
- }
- /deep/ .u-empty__text {
- font-size: 14px !important;
- }
- </style>
|