Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 932ac035 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

style: 修复web端页面无法滚动问题

上级 d6f5b7af
隐藏空白更改
内联 并排
Showing with 99 addition and 122 deletion
pages/CSS/transform/rotate.uvue
浏览文件 @ 932ac035
<template> <template>
<!-- #ifdef APP -->
<scroll-view class="page"> <scroll-view class="page">
<!-- #endif --> <view class="trace">
<view class="rotate-container"> <view class="base reserve">
<view class="trace"> <text class="reserve-text">rotate(20deg)</text>
<view class="base reserve"> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">rotate(20deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">rotateX(50deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">rotateY(50deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">rotateZ(50deg)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view> </view>
<view class="base reserve">
<view class="base transform" style="transform: rotate(20deg)"> <text class="reserve-text">rotateX(50deg)</text>
<text>rotate(20deg)</text> <text class="reserve-text">转变前位置</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateX(50deg)">
<text>rotateX(50deg)</text>
<text>转变后位置</text>
</view> </view>
<view class="base transform" style="transform: rotateY(50deg)"> <view class="base reserve">
<text>rotateY(50deg)</text> <text class="reserve-text">rotateY(50deg)</text>
<text>转变后位置</text> <text class="reserve-text">转变前位置</text>
</view> </view>
<view class="base transform" style="transform: rotateZ(50deg)"> <view class="base reserve">
<text>rotateZ(50deg)</text> <text class="reserve-text">rotateZ(50deg)</text>
<text>转变后位置</text> <text class="reserve-text">转变前位置</text>
</view> </view>
</view>
<view class="base transform" style="transform: rotate(20deg)">
<text>rotate(20deg)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateX(50deg)">
<text>rotateX(50deg)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateY(50deg)">
<text>rotateY(50deg)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: rotateZ(50deg)">
<text>rotateZ(50deg)</text>
<text>转变后位置</text>
</view> </view>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<style> <style>
.page { .page {
flex: 1; flex: 1;
}
.rotate-container {
height: 100%;
display: flex;
align-items: center; align-items: center;
} }
...@@ -74,15 +62,15 @@ ...@@ -74,15 +62,15 @@
.reserve { .reserve {
border: 1px dotted #588; border: 1px dotted #588;
background-color: #DDD; background-color: #ddd;
} }
.reserve-text { .reserve-text {
color: #CCC; color: #ccc;
} }
.transform { .transform {
border: 1px solid #00F; border: 1px solid #00f;
background-color: rgba(0, 255, 255, 0.5); background-color: rgba(0, 255, 255, 0.5);
} }
</style> </style>
pages/CSS/transform/translate.uvue
浏览文件 @ 932ac035
<template> <template>
<!-- #ifdef APP --> <scroll-view class="page">
<scroll-view class="page"> <view class="trace">
<!-- #endif --> <view class="base reserve">
<view class="translate-container"> <text class="reserve-text">translateX(80%)</text>
<view class="trace"> <text class="reserve-text">转变前位置</text>
<view class="base reserve"> </view>
<text class="reserve-text">translateX(80%)</text> <view class="base reserve">
<text class="reserve-text">转变前位置</text> <text class="reserve-text">translateY(50px)</text>
</view> <text class="reserve-text">转变前位置</text>
<view class="base reserve"> </view>
<text class="reserve-text">translateY(50px)</text> <view class="base reserve">
<text class="reserve-text">转变前位置</text> <text class="reserve-text">translate(-50%,50%)</text>
</view> <text class="reserve-text">转变前位置</text>
<view class="base reserve"> </view>
<text class="reserve-text">translate(-50%,50%)</text> </view>
<text class="reserve-text">转变前位置</text>
</view> <view class="base transform" style="transform: translateX(80%)">
</view> <text>translateX(80%)</text>
<text>转变后位置</text>
<view class="base transform" style="transform: translateX(80%)"> </view>
<text>translateX(80%)</text> <view class="base transform" style="transform: translateY(50px)">
<text>转变后位置</text> <text>translateY(50px)</text>
</view> <text>转变后位置</text>
<view class="base transform" style="transform: translateY(50px)"> </view>
<text>translateY(50px)</text> <view class="base transform" style="transform: translate(-50%, 50%)">
<text>转变后位置</text> <text>translate(-50%,50%)</text>
</view> <text>转变后位置</text>
<view class="base transform" style="transform: translate(-50%, 50%)"> </view>
<text>translate(-50%,50%)</text> </scroll-view>
<text>转变后位置</text> </template>
</view>
</view> <style>
<!-- #ifdef APP --> .page {
</scroll-view> flex: 1;
<!-- #endif --> align-items: center;
</template> }
<style> .trace {
.page { position: absolute;
flex: 1; top: 0px;
} left: 0px;
width: 100%;
.translate-container{ align-items: center;
height: 100%; }
display: flex;
align-items: center; .base {
} margin: 10px;
width: 150px;
.trace { height: 150px;
position: absolute; align-items: center;
top: 0px; justify-content: center;
left: 0px; }
width: 100%;
align-items: center; .reserve {
} border: 1px dotted #588;
background-color: #DDD;
.base { }
margin: 10px;
width: 150px; .reserve-text {
height: 150px; color: #CCC;
align-items: center; }
justify-content: center;
} .transform {
border: 1px solid #00F;
.reserve { background-color: rgba(0, 255, 255, 0.5);
border: 1px dotted #588; }
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0, 255, 255, 0.5);
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或