broke_news_wx/uni_modules/z-paging/components/z-paging-swiper/z-paging-swiper.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="$slots.top" name="top" />
		<view class="zp-swiper-super">
			<view class="zp-swiper">
				<slot />
			</view>
		</view>
		<slot v-if="$slots.bottom" name="bottom" />
	</view>
</template>

<script>
	export default {
		name: "z-paging-swiper",
		data() {
			return {
				systemInfo: null,
				cssSafeAreaInsetBottom: -1
			};
		},
		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
		},
		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;
			}
		},
		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();
			}
		}
	}
</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;
	}

	.zp-swiper {
		/* #ifndef APP-NVUE */
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}
	
	.zp-swiper-item {
		height: 100%;
	}
</style>