Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
39ca006c
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6005
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
39ca006c
编写于
8月 15, 2024
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 优化部分示例及测试
上级
3c228579
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
391 addition
and
335 deletion
+391
-335
pages/API/compress-image/compress-image.uvue
pages/API/compress-image/compress-image.uvue
+27
-25
pages/API/compress-video/compress-video.uvue
pages/API/compress-video/compress-video.uvue
+24
-22
pages/API/get-current-pages/get-current-pages.uvue
pages/API/get-current-pages/get-current-pages.uvue
+43
-34
pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue
...rrent-pages/set-page-style-disable-pull-down-refresh.uvue
+27
-27
pages/CSS/overflow/overflow-visible-event.uvue
pages/CSS/overflow/overflow-visible-event.uvue
+6
-2
pages/CSS/transform/rotate.uvue
pages/CSS/transform/rotate.uvue
+97
-83
pages/CSS/transform/scale.uvue
pages/CSS/transform/scale.uvue
+85
-76
pages/CSS/transform/translate.uvue
pages/CSS/transform/translate.uvue
+80
-65
pages/pages.test.js
pages/pages.test.js
+2
-1
未找到文件。
pages/API/compress-image/compress-image.uvue
浏览文件 @
39ca006c
...
...
@@ -2,32 +2,34 @@
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="image-container">
<image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
<image class="image" :src="afterCompressPath" mode="aspectFit"></image>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前图片信息</text>
</view>
<text>{{beforeCompressImageInfo}}</text>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后图片信息</text>
</view>
<text>{{afterCompressImageInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressImage">压缩图片</button>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="image-container">
<image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
<image class="image" :src="afterCompressPath" mode="aspectFit"></image>
</view>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前图片信息</text>
</view>
<text>{{beforeCompressImageInfo}}</text>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后图片信息</text>
</view>
<text>{{afterCompressImageInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressImage">压缩图片</button>
</view>
</view>
<input-data defaultValue="80" title="压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)" type="number"
@confirm="onQualityConfirm"></input-data>
<input-data title="压缩后图片的宽度,单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
<input-data title="压缩后图片的高度,单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
<input-data defaultValue="0" title="旋转度数,范围0~360" type="number" @confirm="onRotateConfirm"></input-data>
</view>
<input-data defaultValue="80" title="压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)" type="number"
@confirm="onQualityConfirm"></input-data>
<input-data title="压缩后图片的宽度,单位px" type="string" @confirm="onCompressedWidthConfirm"></input-data>
<input-data title="压缩后图片的高度,单位px" type="string" @confirm="onCompressedHeightConfirm"></input-data>
<input-data defaultValue="0" title="旋转度数,范围0~360" type="number" @confirm="onRotateConfirm"></input-data>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
...
...
@@ -144,7 +146,7 @@
uni.getImageInfo({
src: res.tempFilePath,
success: (_res) => {
let beforeCompressSize
: number, afterComoressSize
: number;
let beforeCompressSize
: number, afterComoressSize
: number;
// #ifdef APP-ANDROID
beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();
...
...
pages/API/compress-video/compress-video.uvue
浏览文件 @
39ca006c
...
...
@@ -3,27 +3,29 @@
<scroll-view style="flex:1">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<video class="video" :src="beforeCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前视频信息</text>
</view>
<text>{{beforeCompressVideoInfo}}</text>
<video class="video" :src="afterCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后视频信息</text>
</view>
<text>{{afterCompressVideoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressVideo">压缩视频</button>
</view>
<enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
<view class="uni-common-mt">
<text class="uni-title uni-title-text">相对于原视频的分辨率比例,取值范围(0, 1]</text>
<slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
<view>
<view class="uni-padding-wrap">
<video class="video" :src="beforeCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩前视频信息</text>
</view>
<text>{{beforeCompressVideoInfo}}</text>
<video class="video" :src="afterCompressPath" :controls="true"></video>
<view class="uni-title">
<text class="uni-subtitle-text">压缩后视频信息</text>
</view>
<text>{{afterCompressVideoInfo}}</text>
<view class="uni-btn-v">
<button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="compressVideo">压缩视频</button>
</view>
<enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
<view class="uni-common-mt">
<text class="uni-title uni-title-text">相对于原视频的分辨率比例,取值范围(0, 1]</text>
<slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider>
</view>
</view>
</view>
<!-- #ifdef APP -->
...
...
@@ -116,7 +118,7 @@
this.resolution = event.detail.value;
},
testCompressVideo() {
let beforeCompressSize
: number, afterComoressSize
: number;
let beforeCompressSize
: number, afterComoressSize
: number;
uni.compressVideo({
src: this.videoSrcForTest,
quality: 'medium',
...
...
pages/API/get-current-pages/get-current-pages.uvue
浏览文件 @
39ca006c
...
...
@@ -2,40 +2,44 @@
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<page-head title="getCurrentPages"></page-head>
<view class="uni-padding-wrap">
<button @click="_getCurrentPages">getCurrentPages</button>
<view v-if="pages.length" style="padding: 15px 0px">
<text>当前页面栈中 {{ pages.length }} 个页面,列表如下:</text>
<template v-for="(page, index) in pages" :key="page.route">
<text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
</template>
<view>
<page-head title="getCurrentPages"></page-head>
<view class="uni-padding-wrap">
<button @click="_getCurrentPages">getCurrentPages</button>
<view v-if="pages.length" style="padding: 15px 0px">
<text>当前页面栈中 {{ pages.length }} 个页面,列表如下:</text>
<template v-for="(page, index) in pages" :key="page.route">
<text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
</template>
</view>
</view>
</view>
<page-head title="currentPageStyle"></page-head>
<template v-for="(item, index) in PageStyleArray">
<view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index">
<view class="item-text">
<text class="item-text-key">{{item.key}}:</text>
<text class="item-text-value">{{currentPageStyle[item.key]}}</text>
</view>
<view class="set-value" v-if="item.type == 'boolean'">
<switch :checked="currentPageStyle.getBoolean(item.key)"
@change="switchChange(item.key, $event as UniSwitchChangeEvent)">
</switch>
</view>
<view class="set-value" v-else-if="item.type == 'number'">
<slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
@change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
<page-head title="currentPageStyle"></page-head>
<template v-for="(item, index) in PageStyleArray">
<view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index">
<view class="item-text">
<text class="item-text-key">{{item.key}}:</text>
<text class="item-text-value">{{currentPageStyle[item.key]}}</text>
</view>
<view class="set-value" v-if="item.type == 'boolean'">
<switch :checked="currentPageStyle.getBoolean(item.key)"
@change="switchChange(item.key, $event as UniSwitchChangeEvent)">
</switch>
</view>
<view class="set-value" v-else-if="item.type == 'number'">
<slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
@change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
</view>
<view class="set-value" v-else-if="item.type == 'string'">
<radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
<radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2">{{item2}}
</radio>
</radio-group>
</view>
</view>
<view class="set-value" v-else-if="item.type == 'string'">
<radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
<radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2" >{{item2}}</radio>
</radio-group>
</view>
</view>
</template>
</template>
<button style='margin: 10px;' @click="goSetDisablePullDownRefresh">go set disable pullDownRefresh</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
...
...
@@ -117,6 +121,11 @@
const currentPage = pages[pages.length - 1];
currentPage.$setPageStyle(style);
},
goSetDisablePullDownRefresh() {
uni.navigateTo({
url: '/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh'
});
}
// getCurrentPage(): Page {
// const pages = getCurrentPages();
// const currentPage = pages[pages.length - 1];
...
...
@@ -163,7 +172,7 @@
flex-direction: row;
}
.radio-value {
margin-left: 10px;
.radio-value {
margin-left: 10px;
}
</style>
</style>
pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue
浏览文件 @
39ca006c
...
...
@@ -3,12 +3,12 @@
<view class="uni-padding-wrap">
<button class="btn btn-get-page-style" type="default" @click="getPageStyle">getPageStyle</button>
<button class="btn btn-set-page-style-1" type="default" @click="setPageStyle(true)">setPageStyle(true)</button>
<button class="btn btn-set-page-style-0" type="default" @click="setPageStyle(false)">setPageStyle(false)</button>
<button class="btn btn-set-page-style-0" type="default" @click="setPageStyle(false)">setPageStyle(false)</button>
<text class="page-style">当前 PageStyle</text>
<text class="page-style-value">{{pageStyleText}}</text>
<text class="status">状态:</text>
<view class="status-list">
<text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
<text class="page-style-value">{{pageStyleText}}</text>
<text class="status">状态:</text>
<view class="status-list">
<text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
</view>
<text class="tips">当前版本仅支持设置属性 enablePullDownRefresh</text>
</view>
...
...
@@ -25,8 +25,8 @@
return {
checked: false,
pages: [] as Page[],
currentPageStyle: {} as UTSJSONObject,
// TODO
currentPageStyle: {} as UTSJSONObject,
// TODO
enablePullDownRefreshStatus: true
}
},
...
...
@@ -52,11 +52,11 @@
const currentPage = pages[pages.length - 1];
currentPage.$setPageStyle({
enablePullDownRefresh: enable
});
});
this.enablePullDownRefreshStatus = enable
},
startPullDownRefresh() {
uni.startPullDownRefresh()
},
startPullDownRefresh() {
uni.startPullDownRefresh()
}
},
}
...
...
@@ -66,28 +66,28 @@
<style>
.btn {
margin-top: 10px;
}
.page-style {
margin-top: 15px;
}
.page-style {
margin-top: 15px;
}
.page-style-value {
margin-top: 5px;
padding: 5px;
background-color: #fff;
width: 100%;
/* #ifdef WEB */
overflow-wrap: break-word;
background-color: #fff;
width: 100%;
/* #ifdef WEB */
overflow-wrap: break-word;
/* #endif */
}
.status {
margin-top: 20px;
}
.status-list {
margin-top: 5px;
}
.status {
margin-top: 20px;
}
.status-list {
margin-top: 5px;
}
.tips {
...
...
pages/CSS/overflow/overflow-visible-event.uvue
浏览文件 @
39ca006c
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<view>
<text style="font-size: 15px;">overflow=visible 父view(绿色),子view(红色),点击超出父view区域的部分也可触发事件。</text>
<view class="backgroundview">
...
...
@@ -29,7 +31,9 @@
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
...
...
@@ -131,7 +135,7 @@
background-color: green;
}
.hover-class {
background-color: aqua;
.hover-class {
background-color: aqua;
}
</style>
pages/CSS/transform/rotate.uvue
浏览文件 @
39ca006c
<template>
<scroll-view class="page">
<view class="trace">
<view class="base reserve">
<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 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>
</scroll-view>
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.page {
flex: 1;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
border: 1px dotted #588;
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0,255,255,0.5);
}
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="rotate-container">
<view class="trace">
<view class="base reserve">
<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 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>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.page {
flex: 1;
}
.rotate-container {
display: flex;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
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>
pages/CSS/transform/scale.uvue
浏览文件 @
39ca006c
<template>
<scroll-view class="page">
<view class="trace">
<view class="base reserve">
<text class="reserve-text">scaleX(0.6)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">scaleY(0.8)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">scale(0.8,0.8)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: scaleX(0.6)">
<text>scaleX(0.6)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: scaleY(0.6)">
<text>scaleY(0.6)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: scale(1.2,1.2)">
<text>scale(1.2,1.2)</text>
<text>转变后位置</text>
</view>
<view class="base">
<text>通过scaleY(0.5)实现0.5px的线</text>
<view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
</view>
</scroll-view>
</template>
<script lang="uts">
</script>
<style>
.page {
flex: 1;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
border: 1px dotted #588;
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0, 255, 255, 0.5);
}
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="scale-container">
<view class="trace">
<view class="base reserve">
<text class="reserve-text">scaleX(0.6)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">scaleY(0.8)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">scale(0.8,0.8)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: scaleX(0.6)">
<text>scaleX(0.6)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: scaleY(0.6)">
<text>scaleY(0.6)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: scale(1.2,1.2)">
<text>scale(1.2,1.2)</text>
<text>转变后位置</text>
</view>
<view class="base">
<text>通过scaleY(0.5)实现0.5px的线</text>
<view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
</script>
<style>
.page {
flex: 1;
}
.scale-container {
display: flex;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
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>
pages/CSS/transform/translate.uvue
浏览文件 @
39ca006c
<template>
<scroll-view class="page">
<view class="trace">
<view class="base reserve">
<text class="reserve-text">translateX(80%)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">translateY(50px)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">translate(-50%,50%)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<view class="translate-container">
<view class="trace">
<view class="base reserve">
<text class="reserve-text">translateX(80%)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">translateY(50px)</text>
<text class="reserve-text">转变前位置</text>
</view>
<view class="base reserve">
<text class="reserve-text">translate(-50%,50%)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: translateX(80%)">
<text>translateX(80%)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: translateY(50px)">
<text>translateY(50px)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: translate(-50%, 50%)">
<text>translate(-50%,50%)</text>
<text>转变后位置</text>
</view>
</scroll-view>
<view class="base transform" style="transform: translateX(80%)">
<text>translateX(80%)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: translateY(50px)">
<text>translateY(50px)</text>
<text>转变后位置</text>
</view>
<view class="base transform" style="transform: translate(-50%, 50%)">
<text>translate(-50%,50%)</text>
<text>转变后位置</text>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
}
},
methods: {
},
}
export default {
data() {
return {
}
},
methods: {
},
}
</script>
<style>
.page {
flex: 1;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
border: 1px dotted #588;
background-color: #DDD;
}
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0,255,255,0.5);
}
.page {
flex: 1;
}
.translate-container{
display: flex;
align-items: center;
}
.trace {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
align-items: center;
}
.base {
margin: 10px;
width: 150px;
height: 150px;
align-items: center;
justify-content: center;
}
.reserve {
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>
pages/pages.test.js
浏览文件 @
39ca006c
...
...
@@ -80,7 +80,8 @@ const pages = [
// '/pages/component/unicloud-db/unicloud-db/contacts/edit',
// 动态内容
// '/pages/component/unicloud-db/unicloud-db/contacts/detail',
'
/pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom
'
,
// 动态内容
// '/pages/component/unicloud-db/unicloud-db/mixin-datacom/mixin-datacom',
// 单独测试例截图
// '/pages/component/global-properties/global-properties',
'
/pages/component/global-events/global-events
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录