Skip to content

U
uni-app

MuGuiLin / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 c864ff86 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

chore: remove unused

上级 91bd0273
显示空白变更内容
内联 并排
Showing with 8 addition and 1208 deletion
packages/uni-h5/dist/uni-h5.esm.js
浏览文件 @ c864ff86
......@@ -8082,6 +8082,7 @@ var PageHead = defineComponent({
name: "PageHead",
setup() {
const pageMeta = usePageMeta();
UniServiceJSBridge.emit("onNavigationBarChange", pageMeta.navigationBar.titleText);
return () => (openBlock(), createBlock("uni-page-head", null, pageMeta.navigationBar.titleText));
}
});
......@@ -8380,7 +8381,7 @@ function createPageHeadVNode() {
return createVNode(PageHead);
}
function createPageBodyVNode(ctx) {
return openBlock(), createBlock(PageBody, {key: 1}, {
return openBlock(), createBlock(PageBody, {key: 0}, {
default: withCtx(() => [renderSlot(ctx.slots, "page")]),
_: 3
});
......
packages/uni-h5/src/framework/components/page/index.vue 已删除 100644 → 0
浏览文件 @ 91bd0273
<template>
<uni-page>
<page-head v-if="navigationBar.type !== 'none'" v-bind="navigationBar" />
<page-refresh
v-if="enablePullDownRefresh"
ref="refresh"
:color="refreshOptions.color"
:offset="refreshOptions.offset"
/>
<page-body
v-if="enablePullDownRefresh"
@touchstart="_touchstart"
@touchmove="_touchmove"
@touchend="_touchend"
@touchcancel="_touchend"
>
<slot name="page" />
</page-body>
<page-body v-else>
<slot name="page" />
</page-body>
</uni-page>
</template>
<style>
uni-page {
display: block;
width: 100%;
height: 100%;
}
</style>
<script>
import { NAVBAR_HEIGHT } from '@dcloudio/uni-shared'
import { isPlainObject } from '@vue/shared'
import { mergeTitleNView } from './merge-title-nview'
import PageHead from './pageHead.vue'
import PageBody from './pageBody.vue'
import PageRefresh from './pageRefresh.vue'
import pullToRefresh from './pull-to-refresh'
import safeAreaInsets from 'safe-area-insets'
export default {
name: 'Page',
components: {
PageHead,
PageBody,
PageRefresh,
},
mixins: [pullToRefresh],
props: {
isQuit: {
type: Boolean,
default: false,
},
isEntry: {
type: Boolean,
default: false,
},
isTabBar: {
type: Boolean,
default: false,
},
tabBarIndex: {
type: Number,
default: -1,
},
navigationBarBackgroundColor: {
type: String,
default: '#000',
},
navigationBarTextStyle: {
default: 'white',
validator(value) {
return ['white', 'black'].indexOf(value) !== -1
},
},
navigationBarTitleText: {
type: String,
default: '',
},
navigationStyle: {
default: 'default',
validator(value) {
return ['default', 'custom'].indexOf(value) !== -1
},
},
backgroundColor: {
type: String,
default: '#ffffff',
},
backgroundTextStyle: {
default: 'dark',
validator(value) {
return ['dark', 'light'].indexOf(value) !== -1
},
},
backgroundColorTop: {
type: String,
default: '#fff',
},
backgroundColorBottom: {
type: String,
default: '#fff',
},
enablePullDownRefresh: {
type: Boolean,
default: false,
},
onReachBottomDistance: {
type: Number,
default: 50,
},
disableScroll: {
type: Boolean,
default: false,
},
titleNView: {
type: [Boolean, Object, String],
default: '',
},
pullToRefresh: {
type: Object,
default() {
return {}
},
},
titleImage: {
type: String,
default: '',
},
transparentTitle: {
type: String,
default: '',
},
titlePenetrate: {
type: String,
default: 'NO',
},
navigationBarShadow: {
type: Object,
default() {
return {}
},
},
topWindow: {
type: Boolean,
default: true,
},
},
data() {
// 目前简单处理，存在topWindow时，始终不显示page head
let navigationBar = {}
const titleNViewTypeList = {
none: 'default',
auto: 'transparent',
always: 'float',
}
// 将 navigationStyle 和 transparentTitle 都合并到 titleNView
let titleNView = this.titleNView
if (
// 无头
titleNView === false ||
titleNView === 'false' ||
(this.navigationStyle === 'custom' && !isPlainObject(titleNView)) ||
(this.transparentTitle === 'always' && !isPlainObject(titleNView))
) {
titleNView = {
type: 'none',
}
} else {
titleNView = Object.assign(
{},
{
type: this.navigationStyle === 'custom' ? 'none' : 'default',
},
this.transparentTitle in titleNViewTypeList
? {
type: titleNViewTypeList[this.transparentTitle],
}
: null,
typeof titleNView === 'object'
? titleNView
: typeof titleNView === 'boolean'
? {
type: titleNView ? 'default' : 'none',
}
: null
)
}
const yesNoParseList = {
YES: true,
NO: false,
}
navigationBar = mergeTitleNView(
{
loading: false,
backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
backgroundColor: this.navigationBarBackgroundColor,
textColor: this.navigationBarTextStyle === 'black' ? '#000' : '#fff',
titleText: this.navigationBarTitleText,
titleImage: this.titleImage,
duration: '0',
timingFunc: '',
titlePenetrate: yesNoParseList[this.titlePenetrate],
},
titleNView
)
navigationBar.shadow = this.navigationBarShadow
const refreshOptions = Object.assign(
{
support: true,
color: '#2BD009',
style: 'circle',
height: 70,
range: 150,
offset: 0,
},
this.pullToRefresh
)
let offset = uni.upx2px(refreshOptions.offset)
if (titleNView.type !== 'none' && titleNView.type !== 'transparent') {
offset += NAVBAR_HEIGHT + safeAreaInsets.top
}
refreshOptions.offset = offset
refreshOptions.height = uni.upx2px(refreshOptions.height)
refreshOptions.range = uni.upx2px(refreshOptions.range)
return {
navigationBar,
refreshOptions,
}
},
created() {
const navigationBar = this.navigationBar
document.title = navigationBar.titleText
UniServiceJSBridge.emit('onNavigationBarChange', navigationBar)
},
}
</script>
packages/uni-h5/src/framework/components/page/merge-title-nview.js 已删除 100644 → 0
浏览文件 @ 91bd0273
import { hasOwn, isPlainObject } from '@vue/shared'
/**
* app-plus titleNView
*/
export function mergeTitleNView(navigationBar, titleNView) {
if (isPlainObject(titleNView)) {
if (hasOwn(titleNView, 'backgroundColor')) {
navigationBar.backgroundColor = titleNView.backgroundColor
}
if (hasOwn(titleNView, 'buttons')) {
navigationBar.buttons = titleNView.buttons
}
if (hasOwn(titleNView, 'titleColor')) {
navigationBar.textColor = titleNView.titleColor
}
if (hasOwn(titleNView, 'titleText')) {
navigationBar.titleText = titleNView.titleText
}
if (hasOwn(titleNView, 'titleSize')) {
navigationBar.titleSize = titleNView.titleSize
}
if (hasOwn(titleNView, 'type')) {
navigationBar.type = titleNView.type
}
if (
hasOwn(titleNView, 'searchInput') &&
typeof titleNView.searchInput === 'object'
) {
navigationBar.searchInput = Object.assign(
{
autoFocus: false,
align: 'center',
color: '#000000',
backgroundColor: 'rgba(255,255,255,0.5)',
borderRadius: '0px',
placeholder: '',
placeholderColor: '#CCCCCC',
disabled: false,
},
titleNView.searchInput
)
}
}
return navigationBar
}
packages/uni-h5/src/framework/components/page/pageBody.ts
浏览文件 @ c864ff86
......@@ -12,9 +12,9 @@ import {
import { usePageMeta } from '../../plugin/provide'
import PageRefresh from './pageRefresh/index.vue'
import PageRefresh from './page-refresh/component.vue'
import { usePageRefresh } from './pageRefresh'
import { usePageRefresh } from './page-refresh'
export default defineComponent({
name: 'PageBody',
......
packages/uni-h5/src/framework/components/page/pageBody.vue 已删除 100644 → 0
浏览文件 @ 91bd0273
<template>
<div></div>
<uni-page-wrapper>
<uni-page-body>
<slot />
</uni-page-body>
</uni-page-wrapper>
</template>
<style>
uni-page-wrapper {
display: block;
height: 100%;
position: relative;
}
uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
height: calc(100% - 44px);
height: calc(100% - 44px - constant(safe-area-inset-top));
height: calc(100% - 44px - env(safe-area-inset-top));
}
uni-page-body {
display: block;
box-sizing: border-box;
width: 100%;
}
</style>
<script>
// import { appendCss } from '../../../helpers/appendCss'
// import { tabBar } from '../app/observable'
export default {
name: 'PageBody',
mounted() {
// const HEIGTH = tabBar.height || '50px'
// let cssText = `.uni-app--showtabbar uni-page-wrapper {
// display: block;
// height: calc(100% - ${HEIGTH});
// height: calc(100% - ${HEIGTH} - constant(safe-area-inset-bottom));
// height: calc(100% - ${HEIGTH} - env(safe-area-inset-bottom));
// }`
// cssText += '\n'
// cssText += `.uni-app--showtabbar uni-page-wrapper::after {
// content: "";
// display: block;
// width: 100%;
// height: ${HEIGTH};
// height: calc(${HEIGTH} + constant(safe-area-inset-bottom));
// height: calc(${HEIGTH} + env(safe-area-inset-bottom));
// }`
// cssText += '\n'
// cssText += `.uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
// height: calc(100% - 44px - ${HEIGTH});
// height: calc(100% - 44px - constant(safe-area-inset-top) - ${HEIGTH} - constant(safe-area-inset-bottom));
// height: calc(100% - 44px - env(safe-area-inset-top) - ${HEIGTH} - env(safe-area-inset-bottom));
// }`
// appendCss(cssText)
},
}
</script>
packages/uni-h5/src/framework/components/page/pageHead.ts
浏览文件 @ c864ff86
......@@ -15,6 +15,10 @@ export default defineComponent({
name: 'PageHead',
setup() {
const pageMeta = usePageMeta()
UniServiceJSBridge.emit(
'onNavigationBarChange',
pageMeta.navigationBar.titleText
)
return () => (
openBlock(),
createBlock('uni-page-head', null, pageMeta.navigationBar.titleText)
......
packages/uni-h5/src/framework/components/page/pageHead.vue 已删除 100644 → 0
浏览文件 @ 91bd0273
<template>
<uni-page-head :uni-page-head-type="type">
<div
:style="{
transitionDuration: duration,
transitionTimingFunction: timingFunc,
backgroundColor: bgColor,
color: textColor,
}"
:class="headClass"
class="uni-page-head"
>
<div class="uni-page-head-hd">
<div v-show="backButton" class="uni-page-head-btn" @click="_back">
<i :style="{ color: color, fontSize: '27px' }" class="uni-btn-icon"
>&#xe601;</i
>
</div>
<template v-for="(btn, index) in btns">
<div
v-if="btn.float === 'left'"
:key="index"
:style="{
backgroundColor:
type === 'transparent' ? btn.background : 'transparent',
width: btn.width,
}"
:badge-text="btn.badgeText"
:class="{
'uni-page-head-btn-red-dot': btn.redDot || btn.badgeText,
'uni-page-head-btn-select': btn.select,
}"
class="uni-page-head-btn"
>
<i
:style="_formatBtnStyle(btn)"
class="uni-btn-icon"
@click="_onBtnClick(index)"
v-html="_formatBtnFontText(btn)"
/>
</div>
</template>
</div>
<div v-if="!searchInput" class="uni-page-head-bd">
<div
:style="{
fontSize: titleSize,
opacity: type === 'transparent' ? 0 : 1,
}"
class="uni-page-head__title"
>
<i v-if="loading" class="uni-loading" />
<img
v-if="titleImage !== ''"
:src="titleImage"
class="uni-page-head__title_image"
/>
<template v-else>
{{ titleText }}
</template>
</div>
</div>
<div
v-if="searchInput"
:style="{
'border-radius': searchInput.borderRadius,
'background-color': searchInput.backgroundColor,
}"
class="uni-page-head-search"
>
<div
:style="{ color: searchInput.placeholderColor }"
:class="[
`uni-page-head-search-placeholder-${
focus || text ? 'left' : searchInput.align
}`,
]"
class="uni-page-head-search-placeholder"
v-text="text || composing ? '' : searchInput.placeholder"
/>
<v-uni-input
ref="input"
v-model="text"
:focus="searchInput.autoFocus"
:disabled="searchInput.disabled"
:style="{ color: searchInput.color }"
:placeholder-style="`color:${searchInput.placeholderColor}`"
class="uni-page-head-search-input"
confirm-type="search"
@focus="_focus"
@blur="_blur"
@update:value="_input"
/>
</div>
<div class="uni-page-head-ft">
<template v-for="(btn, index) in btns">
<div
v-if="btn.float !== 'left'"
:key="index"
:style="{
backgroundColor:
type === 'transparent' ? btn.background : 'transparent',
width: btn.width,
}"
:badge-text="btn.badgeText"
:class="{
'uni-page-head-btn-red-dot': btn.redDot || btn.badgeText,
'uni-page-head-btn-select': btn.select,
}"
class="uni-page-head-btn"
>
<i
:style="_formatBtnStyle(btn)"
class="uni-btn-icon"
@click="_onBtnClick(index)"
v-html="_formatBtnFontText(btn)"
/>
</div>
</template>
</div>
</div>
<div
v-if="type !== 'transparent' && type !== 'float'"
:class="{ 'uni-placeholder-titlePenetrate': titlePenetrate }"
class="uni-placeholder"
/>
</uni-page-head>
</template>
<style>
uni-page-head {
display: block;
box-sizing: border-box;
}
uni-page-head .uni-page-head {
position: fixed;
left: var(--window-left);
right: var(--window-right);
height: 44px;
height: calc(44px + constant(safe-area-inset-top));
height: calc(44px + env(safe-area-inset-top));
padding: 7px 3px;
padding-top: calc(7px + constant(safe-area-inset-top));
padding-top: calc(7px + env(safe-area-inset-top));
display: flex;
overflow: hidden;
justify-content: space-between;
box-sizing: border-box;
z-index: 998;
color: #fff;
background-color: #000;
transition-property: all;
}
uni-page-head .uni-page-head-titlePenetrate,
uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd,
uni-page-head .uni-page-head-titlePenetrate .uni-page-head-bd * {
pointer-events: none;
}
uni-page-head .uni-page-head-titlePenetrate * {
pointer-events: auto;
}
uni-page-head .uni-page-head.uni-page-head-transparent .uni-page-head-ft > div {
justify-content: center;
}
uni-page-head .uni-page-head ~ .uni-placeholder {
width: 100%;
height: 44px;
height: calc(44px + constant(safe-area-inset-top));
height: calc(44px + env(safe-area-inset-top));
}
uni-page-head .uni-placeholder-titlePenetrate {
pointer-events: none;
}
uni-page-head .uni-page-head * {
box-sizing: border-box;
}
uni-page-head .uni-page-head-hd {
display: flex;
align-items: center;
font-size: 16px;
}
uni-page-head .uni-page-head-bd {
position: absolute;
left: 70px;
right: 70px;
min-width: 0;
user-select: auto;
}
.uni-page-head-btn {
position: relative;
width: auto;
margin: 0 2px;
word-break: keep-all;
white-space: pre;
cursor: pointer;
}
.uni-page-head-transparent .uni-page-head-btn {
display: flex;
align-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
}
uni-page-head .uni-btn-icon {
overflow: hidden;
min-width: 1em;
}
.uni-page-head-btn-red-dot::after {
content: attr(badge-text);
position: absolute;
right: 0;
top: 0;
background-color: red;
color: white;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 18px;
overflow: hidden;
transform: scale(0.5) translate(40%, -40%);
transform-origin: 100% 0;
}
.uni-page-head-btn-red-dot[badge-text]::after {
font-size: 12px;
width: auto;
min-width: 18px;
max-width: 42px;
text-align: center;
padding: 0 3px;
transform: scale(0.7) translate(40%, -40%);
}
.uni-page-head-btn-select > .uni-btn-icon::after {
display: inline-block;
font-family: 'unibtn';
content: '\e601';
margin-left: 2px;
transform: rotate(-90deg) scale(0.8);
}
.uni-page-head-search {
position: relative;
display: flex;
flex: 1;
margin: 0 2px;
line-height: 30px;
font-size: 15px;
}
.uni-page-head-search-input {
width: 100%;
height: 100%;
padding-left: 34px;
text-align: left;
}
.uni-page-head-search-placeholder {
position: absolute;
max-width: 100%;
height: 100%;
padding-left: 34px;
overflow: hidden;
word-break: keep-all;
white-space: pre;
}
.uni-page-head-search-placeholder-right {
right: 0;
}
.uni-page-head-search-placeholder-center {
left: 50%;
transform: translateX(-50%);
}
.uni-page-head-search-placeholder::before {
position: absolute;
top: 0;
left: 2px;
width: 30px;
content: '\ea0e';
display: block;
font-size: 20px;
font-family: 'uni';
text-align: center;
}
uni-page-head .uni-page-head-ft {
display: flex;
align-items: center;
flex-direction: row-reverse;
font-size: 13px;
}
uni-page-head .uni-page-head__title {
font-weight: bold;
font-size: 16px;
line-height: 30px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
uni-page-head .uni-page-head__title .uni-loading {
width: 16px;
height: 16px;
margin-top: -3px;
}
uni-page-head .uni-page-head__title .uni-page-head__title_image {
width: auto;
height: 26px;
vertical-align: middle;
}
uni-page-head .uni-page-head-shadow {
overflow: visible;
}
uni-page-head .uni-page-head-shadow::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 5px;
background-size: 100% 100%;
}
uni-page-head .uni-page-head-shadow-grey::after {
background-image: url('https://cdn.dcloud.net.cn/img/shadow-grey.png');
}
uni-page-head .uni-page-head-shadow-blue::after {
background-image: url('https://cdn.dcloud.net.cn/img/shadow-blue.png');
}
uni-page-head .uni-page-head-shadow-green::after {
background-image: url('https://cdn.dcloud.net.cn/img/shadow-green.png');
}
uni-page-head .uni-page-head-shadow-orange::after {
background-image: url('https://cdn.dcloud.net.cn/img/shadow-orange.png');
}
uni-page-head .uni-page-head-shadow-red::after {
background-image: url('https://cdn.dcloud.net.cn/img/shadow-red.png');
}
uni-page-head .uni-page-head-shadow-yellow::after {
background-image: url('https://cdn.dcloud.net.cn/img/shadow-yellow.png');
}
</style>
<script>
import { appendCss } from '../../../helpers/dom'
import { getRealPath } from '../../../helpers/getRealPath'
import transparent from './transparent'
const FONTS = {
forward: '&#xe600;',
back: '&#xe601;',
share: '&#xe602;',
favorite: '&#xe604;',
home: '&#xe605;',
menu: '&#xe606;',
close: '&#xe650;',
}
export default {
name: 'PageHead',
mixins: [transparent],
props: {
backButton: {
type: Boolean,
default: true,
},
backgroundColor: {
type: String,
default() {
return this.type === 'transparent' ? '#000' : '#F8F8F8'
},
},
textColor: {
type: String,
default: '#fff',
},
titleText: {
type: String,
default: '',
},
duration: {
type: String,
default: '0',
},
timingFunc: {
type: String,
default: '',
},
loading: {
type: Boolean,
default: false,
},
titleSize: {
type: String,
default: '16px',
},
type: {
default: 'default',
validator(value) {
return ['default', 'transparent', 'float'].indexOf(value) !== -1
},
},
coverage: {
type: String,
default: '132px',
},
buttons: {
type: Array,
default() {
return []
},
},
searchInput: {
type: [Object, Boolean],
default() {
return false
},
},
titleImage: {
type: String,
default: '',
},
titlePenetrate: {
type: Boolean,
default: false,
},
shadow: {
type: Object,
default() {
return {}
},
},
},
data() {
return {
focus: false,
text: '',
composing: false,
}
},
computed: {
btns() {
const btns = []
const fonts = {}
if (this.buttons.length) {
this.buttons.forEach((button) => {
const btn = Object.assign({}, button)
if (btn.fontSrc && !btn.fontFamily) {
const fontSrc = (btn.fontSrc = getRealPath(btn.fontSrc))
let fontFamily
if (fontSrc in fonts) {
fontFamily = fonts[fontSrc]
} else {
fontFamily = `font${Date.now()}`
fonts[fontSrc] = fontFamily
const cssText = `@font-face{font-family: "${fontFamily}";src: url("${fontSrc}") format("truetype")}`
appendCss(cssText, 'uni-btn-font-' + fontFamily)
}
btn.fontFamily = fontFamily
}
btn.color =
this.type === 'transparent' ? '#fff' : btn.color || this.textColor
let fontSize =
btn.fontSize ||
(this.type === 'transparent' || /\\u/.test(btn.text)
? '22px'
: '27px')
if (/\d$/.test(fontSize)) {
fontSize += 'px'
}
btn.fontSize = fontSize
btn.fontWeight = btn.fontWeight || 'normal'
btns.push(btn)
})
}
return btns
},
headClass() {
const shadowColorType = this.shadow.colorType
const data = {
'uni-page-head-transparent': this.type === 'transparent',
'uni-page-head-titlePenetrate': this.titlePenetrate,
'uni-page-head-shadow': shadowColorType,
}
if (shadowColorType) {
data[`uni-page-head-shadow-${shadowColorType}`] = shadowColorType
}
return data
},
},
mounted() {
if (this.searchInput) {
const input = this.$refs.input
input.$watch('composing', (val) => {
this.composing = val
})
if (this.searchInput.disabled) {
input.$el.addEventListener('click', () => {
UniServiceJSBridge.emit('onNavigationBarSearchInputClicked', '')
})
} else {
input.$refs.input.addEventListener('keyup', (event) => {
if (event.key.toUpperCase() === 'ENTER') {
UniServiceJSBridge.emit('onNavigationBarSearchInputConfirmed', {
text: this.text,
})
}
})
input.$refs.input.addEventListener('focus', () => {
UniServiceJSBridge.emit('onNavigationBarSearchInputFocusChanged', {
focus: true,
})
})
input.$refs.input.addEventListener('blur', () => {
UniServiceJSBridge.emit('onNavigationBarSearchInputFocusChanged', {
focus: false,
})
})
}
}
},
methods: {
_back() {
if (getCurrentPages().length === 1) {
uni.reLaunch({
url: '/',
})
} else {
uni.navigateBack({
from: 'backbutton',
})
}
},
_onBtnClick(index) {
UniServiceJSBridge.emit(
'onNavigationBarButtonTap',
Object.assign({}, this.btns[index], {
index,
})
)
},
_formatBtnFontText(btn) {
if (btn.fontSrc && btn.fontFamily) {
return btn.text.replace('\\u', '&#x')
} else if (FONTS[btn.type]) {
return FONTS[btn.type]
}
return btn.text || ''
},
_formatBtnStyle(btn) {
const style = {
color: btn.color,
fontSize: btn.fontSize,
fontWeight: btn.fontWeight,
}
if (btn.fontFamily) {
style.fontFamily = btn.fontFamily
}
return style
},
_focus() {
this.focus = true
},
_blur() {
this.focus = false
},
_input(text) {
UniServiceJSBridge.emit('onNavigationBarSearchInputChanged', {
text,
})
},
},
}
</script>
packages/uni-h5/src/framework/components/page/pull-to-refresh.js 已删除 100644 → 0
浏览文件 @ 91bd0273
function processDeltaY(evt, identifier, startY) {
const touch = Array.prototype.slice
.call(evt.changedTouches)
.filter((touch) => touch.identifier === identifier)[0]
if (!touch) {
return false
}
evt.deltaY = touch.pageY - startY
return true
}
// const ratio = 2.2
const PULLING = 'pulling'
const REACHED = 'reached'
const ABORTING = 'aborting'
const REFRESHING = 'refreshing'
const RESTORING = 'restoring'
export default {
mounted() {
if (this.enablePullDownRefresh) {
this.refreshContainerElem = this.$refs.refresh.$el
this.refreshControllerElem = this.refreshContainerElem.querySelector(
'.uni-page-refresh'
)
this.refreshInnerElemStyle = this.refreshControllerElem.querySelector(
'.uni-page-refresh-inner'
).style
UniServiceJSBridge.on(
this.$route.params.__id__ + '.startPullDownRefresh',
() => {
if (!this.state) {
this.state = REFRESHING
this._addClass()
setTimeout(() => {
this._refreshing()
}, 50)
}
}
)
UniServiceJSBridge.on(
this.$route.params.__id__ + '.stopPullDownRefresh',
() => {
if (this.state === REFRESHING) {
this._removeClass()
this.state = RESTORING
this._addClass()
this._restoring(() => {
this._removeClass()
this.state = this.distance = this.offset = null
})
}
}
)
}
},
methods: {
_touchstart(evt) {
const touch = evt.changedTouches[0]
this.touchId = touch.identifier
this.startY = touch.pageY
if ([ABORTING, REFRESHING, RESTORING].indexOf(this.state) >= 0) {
this.canRefresh = false
} else {
this.canRefresh = true
}
},
_touchmove(evt) {
if (!this.canRefresh) {
return
}
if (!processDeltaY(evt, this.touchId, this.startY)) {
return
}
let { deltaY } = evt
if (
(document.documentElement.scrollTop || document.body.scrollTop) !== 0
) {
this.touchId = null
return
}
if (deltaY < 0 && !this.state) {
return
}
evt.preventDefault()
if (this.distance == null) {
this.offset = deltaY
this.state = PULLING
this._addClass()
}
deltaY = deltaY - this.offset
if (deltaY < 0) {
deltaY = 0
}
this.distance = deltaY
const reached =
deltaY >= this.refreshOptions.range && this.state !== REACHED
const pulling =
deltaY < this.refreshOptions.range && this.state !== PULLING
if (reached || pulling) {
this._removeClass()
this.state = this.state === REACHED ? PULLING : REACHED
this._addClass()
}
this._pulling(deltaY)
},
_touchend(evt) {
if (!processDeltaY(evt, this.touchId, this.startY)) {
return
}
if (this.state === null) {
return
}
if (this.state === PULLING) {
this._removeClass()
this.state = ABORTING
this._addClass()
this._aborting(() => {
this._removeClass()
this.state = this.distance = this.offset = null
})
} else if (this.state === REACHED) {
this._removeClass()
this.state = REFRESHING
this._addClass()
this._refreshing()
}
},
_toggleClass(type) {
if (!this.state) {
return
}
const elem = this.refreshContainerElem
if (elem) {
elem.classList[type]('uni-page-refresh--' + this.state)
}
},
_addClass() {
this._toggleClass('add')
},
_removeClass() {
this._toggleClass('remove')
},
_pulling(deltaY) {
const elem = this.refreshControllerElem
if (!elem) {
return
}
const style = elem.style
let rotate = deltaY / this.refreshOptions.range
if (rotate > 1) {
rotate = 1
} else {
rotate = rotate * rotate * rotate
}
const y = Math.round(
deltaY / (this.refreshOptions.range / this.refreshOptions.height)
)
const transform = y ? 'translate3d(-50%, ' + y + 'px, 0)' : 0
style.webkitTransform = transform
style.clip = 'rect(' + (45 - y) + 'px,45px,45px,-5px)'
this.refreshInnerElemStyle.webkitTransform =
'rotate(' + 360 * rotate + 'deg)'
},
_aborting(callback) {
const elem = this.refreshControllerElem
if (!elem) {
return
}
const style = elem.style
if (style.webkitTransform) {
style.webkitTransition = '-webkit-transform 0.3s'
style.webkitTransform = 'translate3d(-50%, 0, 0)'
const abortTransitionEnd = function () {
timeout && clearTimeout(timeout)
elem.removeEventListener('webkitTransitionEnd', abortTransitionEnd)
style.webkitTransition = ''
callback()
}
elem.addEventListener('webkitTransitionEnd', abortTransitionEnd)
const timeout = setTimeout(abortTransitionEnd, 350) // 部分手机，部分情况webkitTransitionEnd不触发
} else {
callback()
}
},
_refreshing() {
const elem = this.refreshControllerElem
if (!elem) {
return
}
const style = elem.style
style.webkitTransition = '-webkit-transform 0.2s'
style.webkitTransform =
'translate3d(-50%, ' + this.refreshOptions.height + 'px, 0)'
// Service 执行 refresh
UniServiceJSBridge.emit(
'onPullDownRefresh',
{},
this.$route.params.__id__
)
},
_restoring(callback) {
const elem = this.refreshControllerElem
if (!elem) {
return
}
const style = elem.style
style.webkitTransition = '-webkit-transform 0.3s'
style.webkitTransform += ' scale(0.01)'
const restoreTransitionEnd = function () {
timeout && clearTimeout(timeout)
elem.removeEventListener('webkitTransitionEnd', restoreTransitionEnd)
style.webkitTransition = ''
style.webkitTransform = 'translate3d(-50%, 0, 0)'
callback()
}
elem.addEventListener('webkitTransitionEnd', restoreTransitionEnd)
const timeout = setTimeout(restoreTransitionEnd, 350) // 部分手机，部分情况webkitTransitionEnd不触发
},
},
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或