first commit
This commit is contained in:
221
components/z-paging-swiper/z-paging-swiper.vue
Normal file
221
components/z-paging-swiper/z-paging-swiper.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<!-- z-paging -->
|
||||
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群：790460711 -->
|
||||
|
||||
<!-- 滑动切换选项卡swiper，此组件支持easycom规范，可以在项目中直接引用 -->
|
||||
<template>
|
||||
<view :class="fixed?'zp-swiper-container zp-swiper-container-fixed':'zp-swiper-container'" :style="[finalSwiperStyle]">
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view>
|
||||
<!-- #endif -->
|
||||
<slot v-if="$slots.top" name="top" />
|
||||
<view class="zp-swiper-super">
|
||||
<view v-if="$slots.left" :class="{'zp-swiper-left':true,'zp-absoulte':isOldWebView}">
|
||||
<slot name="left" />
|
||||
</view>
|
||||
<view :class="{'zp-swiper':true,'zp-absoulte':isOldWebView}" :style="[swiperContentStyle]">
|
||||
<slot />
|
||||
</view>
|
||||
<view v-if="$slots.right" :class="{'zp-swiper-right':true,'zp-absoulte zp-right':isOldWebView}">
|
||||
<slot name="right" />
|
||||
</view>
|
||||
</view>
|
||||
<slot v-if="$slots.bottom" name="bottom" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "z-paging-swiper",
|
||||
data() {
|
||||
return {
|
||||
systemInfo: null,
|
||||
cssSafeAreaInsetBottom: -1,
|
||||
swiperContentStyle: {}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//是否使用fixed布局，默认为是
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否开启底部安全区域适配
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//z-paging-swiper样式
|
||||
swiperStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.systemInfo = uni.getSystemInfoSync();
|
||||
})
|
||||
// #ifndef APP-PLUS
|
||||
this._getCssSafeAreaInsetBottom();
|
||||
// #endif
|
||||
this._updateLeftAndRightWidth();
|
||||
|
||||
this.swiperContentStyle = {'flex': '1'};
|
||||
// #ifndef APP-NVUE
|
||||
this.swiperContentStyle = {width: '100%',height: '100%'};
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
finalSwiperStyle() {
|
||||
let swiperStyle = this.swiperStyle;
|
||||
if (!this.systemInfo) return swiperStyle;
|
||||
const windowTop = this.systemInfo.windowTop;
|
||||
const windowBottom = this.systemInfo.windowBottom;
|
||||
if (this.fixed) {
|
||||
if (windowTop && !swiperStyle.top) {
|
||||
swiperStyle.top = windowTop + 'px';
|
||||
}
|
||||
if (!swiperStyle.bottom) {
|
||||
let bottom = windowBottom ? windowBottom : 0;
|
||||
if (this.safeAreaInsetBottom) {
|
||||
bottom += this.safeAreaBottom;
|
||||
}
|
||||
if(bottom > 0){
|
||||
swiperStyle.bottom = bottom + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
return swiperStyle;
|
||||
},
|
||||
safeAreaBottom() {
|
||||
if(!this.systemInfo){
|
||||
return 0;
|
||||
}
|
||||
let safeAreaBottom = 0;
|
||||
// #ifdef APP-PLUS
|
||||
safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0;
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
safeAreaBottom = this.cssSafeAreaInsetBottom === -1 ? 0 : this.cssSafeAreaInsetBottom;
|
||||
// #endif
|
||||
return safeAreaBottom;
|
||||
},
|
||||
isOldWebView() {
|
||||
// #ifndef APP-NVUE
|
||||
try {
|
||||
const systemInfos = uni.getSystemInfoSync().system.split(' ');
|
||||
const deviceType = systemInfos[0];
|
||||
const version = parseInt(systemInfos[1].slice(0,1));
|
||||
if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) {
|
||||
return true;
|
||||
}
|
||||
} catch(e){
|
||||
return false;
|
||||
}
|
||||
// #endif
|
||||
return false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//通过获取css设置的底部安全区域占位view高度设置bottom距离
|
||||
_getCssSafeAreaInsetBottom(){
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.zp-safe-area-inset-bottom').boundingClientRect(res => {
|
||||
if (res) {
|
||||
this.cssSafeAreaInsetBottom = res.height;
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
//获取slot="left"和slot="right"宽度并且更新布局
|
||||
_updateLeftAndRightWidth(){
|
||||
if (!this.isOldWebView) return;
|
||||
this.$nextTick(() => {
|
||||
let delayTime = 0;
|
||||
// #ifdef MP-BAIDU
|
||||
delayTime = 10;
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.zp-swiper-left').boundingClientRect(res => {
|
||||
this.swiperContentStyle['left'] = res ? res.width + 'px' : 0;
|
||||
}).exec();
|
||||
query.select('.zp-swiper-right').boundingClientRect(res => {
|
||||
this.swiperContentStyle['right'] = res ? res.width + 'px' : 0;
|
||||
}).exec();
|
||||
}, delayTime)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.zp-swiper-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.zp-swiper-container-fixed {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
width: auto;
|
||||
/* #endif */
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.zp-safe-area-inset-bottom {
|
||||
position: absolute;
|
||||
/* #ifndef APP-PLUS */
|
||||
height: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-swiper-super {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.zp-swiper-left,.zp-swiper-right{
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-swiper {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-absoulte {
|
||||
/* #ifndef APP-NVUE */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-right{
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.zp-swiper-item {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user