introduce
This component is written in combination with the UView framework, mainly combined with the u-loadmore component inside, which can configure the color and background color of the pull-down refresh loading ring, and the diagram when there is no data temporarily, etc., the prominent feature is to set the height of the component, suitable for bang-screen iPhone, and support nesting in a variety of boxes.
IPhone even if we do not enable the native pull-up refresh, pull-up load, the default can also be pull-down and pull-up action, we can disable “(disableScroll”: true) in the configuration file.
"globalStyle": {
"disableScroll": true ,
"navigationStyle": "custom".// Hide the system navigation
"navigationBarTextStyle": "white"
},
Copy the codeComponent final implementation renderings
Understand the structure of the entire page and calculate the height of the scroll components accurately
Detailed configuration items
// The type of temporary data is to display different temporary data images according to different scenes.
_type: {default:' '.type:String
},
Copy the codeFor example, there is nodata temporarily in the list (_type:nodata)
No data temporarily in the message list (_type:nomsg)
// The height except for the title bar and status bar
otherHeight: {
default: 0.type: Number
},
Copy the codeOtherHeight Specifies the height of a page
Components use
- Create the Components folder in the root directory and define the global components. The recommended component name is XXX – function.vue, for example, safe-scrollbox.vue
- Register as global component (page.json)
"easycom": {
"autoscan": true.// Whether to enable automatic scanning. After automatic scanning is enabled, components that conform to the components/ component name/component name. vue directory structure will be automatically scanned
"safe-(.*)": "@/components/safe-$1.vue".// Matches the vue file in the component name/component name in the Components directory
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
Copy the code- In-page use
<safe-scrollbox @lowerFun="lowerFun" @refreshFun="refreshFun" :otherHeight="otherHeight"
_type="nodata" :list="sealListArr" :status="loadStatus" :isRefresh="isRefresh" bgColor="#fff">
<view class="seal-list-container" slot="contBox">
<sealList @showActionBox="showActionBox" :list="sealListArr" :loadings="loadings"></sealList>
</view>
</safe-scrollbox>
Copy the code
Component complete code
<template>
<! -- Scroll the outer box of the component -->
<view class="">
<! -- Scroll area -->
<scroll-view class="scroll-component" :scroll-top="scrollTop" scroll-y="true"
:style="{ height: `calc(100vh - ${statusBarHeight}px - ${navbarHeight}px - ${otherHeight}rpx - env(safe-area-inset-bottom) )`, }"
:lower-threshold="150"
:refresher-triggered="triggered"
:refresher-enabled="true"
refresher-default-style="none"
:refresher-threshold="20"
@refresherpulling="onPulling"
@scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll"
@refresherrefresh="refresh"
@refresherrestore="restore">
<! -- Drop down refresh prompt -->
<u-loadmore status="loading" bgColor="#fff" v-if="triggered" :icon-color="activeColor" :color="activeColor" :load-text="refreshText" margin-top="30" margin-bottom="30"/>
<slot name="contBox"> </slot>
<! -- No data at present -->
<view class="no-data-box" v-if="_type&&list.length==0">
<image src=".. /static/imgs/nodata.png" v-if="_type=='nodata'" mode="aspectFit"></image>
<image src=".. /static/imgs/nofile.png" v-if="_type=='nofile'" mode="aspectFit"></image>
<image src=".. /static/imgs/nomsg.png" v-if="_type=='nomsg'" mode="aspectFit"></image>
<image src=".. /static/imgs/nospace.png" v-if="_type=='nospace'" mode="aspectFit"></image>
<image src=".. /static/imgs/nofile.png" v-if="_type=='nofile'" mode="aspectFit"></image>
</view>
<! -- Pull load -->
<u-loadmore :status="status" :load-text="loadText" margin-top="30" margin-bottom="30"/>
</scroll-view>
<! -- Back to top -->
<view @tap="goTop" class="go-top" v-if="old.scrollTop>500">
<u-icon name="arrow-upward" color="# 909399" size="56"></u-icon>
</view>
</view>
</template>
Copy the codeimport { mapGetters } from 'vuex';
export default {
props: {
// This array combines transient data types to control the display and hiding of transient data modules
list: {
default: [].type: Array
},
// Type of no data temporarily
_type: {
default: ' '.type: String
},
// LoadMore indicates that loadmore can continue to load nomore without loading more data
status: {
default: 'loadmore'.type: String
},
// In combination with this control, the display of the loading circle is hidden when the refresh is pulled down
isRefresh: {
default: false.type: Boolean
},
// The height except for the title bar and status bar
otherHeight: {
default: 0.type: Number
},
// The background color of the loading ring when the dropdown is loaded
bgColor: {
default: ' '.type: String
},
// Loading, pull-up loading, there is no more data prompt text
loadText: {
default: {
loadmore: 'Gently pull up for more data'.loading: 'Trying to load... '.nomore: 'No more data at present'
},
type: Object}},computed: {
triggered() {
return this.isRefresh;
},
...mapGetters(['activeColor'.'statusBarHeight'.'navbarHeight'.'skeletonColor'])},data() {
return {
old: {
scrollTop: 0
},
scrollTop: 0.refreshText: {
loading: 'Getting the latest data... '
} // Refresh the copy
};
},
methods: {
onPulling() {
/ / the drop-down
this.$emit('refreshFun');
// this.triggered = true; // Make it true and then false to close
},
// The custom drop-down refresh control is pulled down
refresh(e) {},
// Refresh the reset
restore() {
// this.triggered = 'restore'; // Need to reset
},
// Refresh terminates
onAbort() {
// console.log("onAbort");
},
upper: function(e) {
console.log(e);
},
// Pull up load
lower: function(e) {
// console.log(' pull up load ')
this.$emit('lowerFun');
// console.log(e)
// this.status='loading'
},
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop;
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop;
this.$nextTick(() = > {
this.scrollTop = 0; }); }}};Copy the code.scroll-component {
width: 750rpx;
overflow-y: scroll;
}
/deep/ .u-loading-circle {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
width: 750rpx;
}
.go-top {
position: fixed;
bottom: 208rpx;
right: 0;
z-index: 2;
background-color: red;
width: 100rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: # 606266;
border-radius: 50%;
}
.no-data-box {
width: 750rpx;
display: flex;
align-items: center;
justify-content: center;
padding-top: 20%;
margin-bottom: 10%;
image {
max-width: 600rpx; }}Copy the code