177 lines
4.5 KiB
Vue
177 lines
4.5 KiB
Vue
<!-- 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="zSlots.top" name="top" />
|
||
<view class="zp-swiper-super">
|
||
<view v-if="zSlots.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="zSlots.right" :class="{'zp-swiper-right':true,'zp-absoulte zp-right':isOldWebView}">
|
||
<slot name="right" />
|
||
</view>
|
||
</view>
|
||
<slot v-if="zSlots.bottom" name="bottom" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import commonLayoutModule from '../z-paging/js/modules/common-layout'
|
||
|
||
/**
|
||
* z-paging-swiper 组件
|
||
* @description 在 swiper 中使用 z-paging 时（左右滑动切换列表），在根节点使用 z-paging-swiper，其相当于一个 view 容器，默认铺满全屏，可免计算高度直接插入 swiper 的视图容器。
|
||
* @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-swiper配置
|
||
* @property {Boolean} fixed 是否使用 fixed 布局，默认为 true
|
||
* @property {Boolean} safeAreaInsetBottom 是否开启底部安全区域适配，默认为 false
|
||
* @property {Object} swiperStyle z-paging-swiper 样式，默认为 {}
|
||
* @example <z-paging-swiper :safeAreaInsetBottom="true"></z-paging-swiper>
|
||
*/
|
||
export default {
|
||
name: "z-paging-swiper",
|
||
mixins: [commonLayoutModule],
|
||
data() {
|
||
return {
|
||
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 = this._getSystemInfoSync();
|
||
setTimeout(this.updateFixedLayout, 100)
|
||
})
|
||
// #ifndef APP-PLUS
|
||
this._getCssSafeAreaInsetBottom();
|
||
// #endif
|
||
this.updateLeftAndRightWidth();
|
||
|
||
this.swiperContentStyle = { 'flex': '1' };
|
||
// #ifndef APP-NVUE
|
||
this.swiperContentStyle = { width: '100%',height: '100%' };
|
||
// #endif
|
||
},
|
||
computed: {
|
||
finalSwiperStyle() {
|
||
const swiperStyle = { ...this.swiperStyle };
|
||
if (!this.systemInfo) return swiperStyle;
|
||
const windowTop = this.windowTop;
|
||
const windowBottom = this.systemInfo.windowBottom;
|
||
if (this.fixed) {
|
||
if (windowTop && !swiperStyle.top) {
|
||
swiperStyle.top = windowTop + 'px';
|
||
}
|
||
if (!swiperStyle.bottom) {
|
||
let bottom = windowBottom || 0;
|
||
bottom += this.safeAreaInsetBottom ? this.safeAreaBottom : 0;
|
||
if (bottom > 0) {
|
||
swiperStyle.bottom = bottom + 'px';
|
||
}
|
||
}
|
||
}
|
||
return swiperStyle;
|
||
}
|
||
},
|
||
methods: {
|
||
// 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变时调用
|
||
updateLeftAndRightWidth() {
|
||
if (!this.isOldWebView) return;
|
||
this.$nextTick(() => this._updateLeftAndRightWidth(this.swiperContentStyle, 'zp-swiper'));
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
overflow: hidden;
|
||
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-swiper-item {
|
||
height: 100%;
|
||
}
|
||
</style>
|