// [z-paging]通用布局相关模块
|
import u from '.././z-paging-utils'
|
|
// #ifdef APP-NVUE
|
const weexDom = weex.requireModule('dom');
|
// #endif
|
|
export default {
|
data() {
|
return {
|
systemInfo: null,
|
cssSafeAreaInsetBottom: -1,
|
isReadyDestroy: false,
|
}
|
},
|
computed: {
|
// 顶部可用距离
|
windowTop() {
|
if (!this.systemInfo) return 0;
|
// 暂时修复vue3中隐藏系统导航栏后windowTop获取不正确的问题，具体bug详见https://ask.dcloud.net.cn/question/141634
|
// 感谢litangyu！！https://github.com/SmileZXLee/uni-z-paging/issues/25
|
// #ifdef VUE3 && H5
|
const pageHeadNode = document.getElementsByTagName("uni-page-head");
|
if (!pageHeadNode.length) return 0;
|
// #endif
|
return this.systemInfo.windowTop || 0;
|
},
|
// 底部安全区域高度
|
safeAreaBottom() {
|
if (!this.systemInfo) return 0;
|
let safeAreaBottom = 0;
|
// #ifdef APP-PLUS
|
safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0 ;
|
// #endif
|
// #ifndef APP-PLUS
|
safeAreaBottom = Math.max(this.cssSafeAreaInsetBottom, 0);
|
// #endif
|
return safeAreaBottom;
|
},
|
// 是否是比较老的webview，在一些老的webview中，需要进行一些特殊处理
|
isOldWebView() {
|
// #ifndef APP-NVUE || MP-KUAISHOU
|
try {
|
const systemInfos = u.getSystemInfoSync(true).system.split(' ');
|
const deviceType = systemInfos[0];
|
const version = parseInt(systemInfos[1]);
|
if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) {
|
return true;
|
}
|
} catch(e) {
|
return false;
|
}
|
// #endif
|
return false;
|
},
|
// 当前组件的$slots，兼容不同平台
|
zSlots() {
|
// #ifdef VUE2
|
|
// #ifdef MP-ALIPAY
|
return this.$slots;
|
// #endif
|
|
return this.$scopedSlots || this.$slots;
|
// #endif
|
|
return this.$slots;
|
},
|
},
|
beforeDestroy() {
|
this.isReadyDestroy = true;
|
},
|
// #ifdef VUE3
|
unmounted() {
|
this.isReadyDestroy = true;
|
},
|
// #endif
|
methods: {
|
// 更新fixed模式下z-paging的布局
|
updateFixedLayout() {
|
this.fixed && this.$nextTick(() => {
|
this.systemInfo = u.getSystemInfoSync();
|
})
|
},
|
// 获取节点尺寸
|
_getNodeClientRect(select, inDom = true, scrollOffset = false) {
|
if (this.isReadyDestroy) {
|
return Promise.resolve(false);
|
};
|
// nvue中获取节点信息
|
// #ifdef APP-NVUE
|
select = select.replace(/[.|#]/g, '');
|
const ref = this.$refs[select];
|
return new Promise((resolve, reject) => {
|
if (ref) {
|
weexDom.getComponentRect(ref, option => {
|
resolve(option && option.result ? [option.size] : false);
|
})
|
} else {
|
resolve(false);
|
}
|
});
|
return;
|
// #endif
|
|
// vue中获取节点信息
|
//#ifdef MP-ALIPAY
|
inDom = false;
|
//#endif
|
|
/*
|
inDom可能是true、false，也可能是具体的dom节点
|
如果inDom不为false，则使用uni.createSelectorQuery().in()进行查询，如果inDom为true，则in中的是this，否则in中的为具体的dom
|
如果inDom为false，则使用uni.createSelectorQuery()进行查询
|
*/
|
let res = !!inDom ? uni.createSelectorQuery().in(inDom === true ? this : inDom) : uni.createSelectorQuery();
|
scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect();
|
return new Promise((resolve, reject) => {
|
res.exec(data => {
|
resolve((data && data != '' && data != undefined && data.length) ? data : false);
|
});
|
});
|
},
|
// 获取slot="left"和slot="right"宽度并且更新布局
|
_updateLeftAndRightWidth(targetStyle, parentNodePrefix) {
|
this.$nextTick(() => {
|
let delayTime = 0;
|
// #ifdef MP-BAIDU
|
delayTime = 10;
|
// #endif
|
setTimeout(() => {
|
['left','right'].map(position => {
|
this._getNodeClientRect(`.${parentNodePrefix}-${position}`).then(res => {
|
this.$set(targetStyle, position, res ? res[0].width + 'px' : '0px');
|
});
|
})
|
}, delayTime)
|
})
|
},
|
// 通过获取css设置的底部安全区域占位view高度设置bottom距离（直接通过systemInfo在部分平台上无法获取到底部安全区域）
|
_getCssSafeAreaInsetBottom(success) {
|
this._getNodeClientRect('.zp-safe-area-inset-bottom').then(res => {
|
this.cssSafeAreaInsetBottom = res ? res[0].height : -1;
|
res && success && success();
|
});
|
},
|
// 同步获取系统信息，兼容不同平台（供z-paging-swiper使用）
|
_getSystemInfoSync(useCache = false) {
|
return u.getSystemInfoSync(useCache);
|
}
|
}
|
}
|
