提交 f26ac1da 编写于 作者: DCloud-yyl's avatar DCloud-yyl

优化竖滑视频示例的返回按钮位置,适配web端,适配不同设备系统状态栏高度

上级 6510fa88
<template> <template>
<view class="page"> <view class="page">
<view @click="back" class="nav-back"> <view ref="back" @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image> <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view> </view>
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange"
...@@ -86,7 +86,12 @@ ...@@ -86,7 +86,12 @@
}, },
onReady() { onReady() {
// 一启动完成,就播放第一个 // 一启动完成,就播放第一个
this.doPlay(0) this.doPlay(0);
// #ifdef APP
//App端适配不同状态栏高度
let backElement = this.$refs['back'] as UniElement;
backElement.style.setProperty('top', uni.getSystemInfoSync().statusBarHeight+'px');
// #endif
}, },
onShow() { onShow() {
currentPageIsShow = true currentPageIsShow = true
...@@ -257,12 +262,14 @@ ...@@ -257,12 +262,14 @@
.nav-back { .nav-back {
position: absolute; position: absolute;
top: 20px; /* #ifdef APP */
left: 8px; top: 35px;
/* #endif */
background-color: rgba(220, 220, 220, 0.8); background-color: rgba(220, 220, 220, 0.8);
border-radius: 100px; border-radius: 100px;
width: 28px; margin: 6px;
height: 28px; width: 32px;
height: 32px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 10; z-index: 10;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册