Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

refactor: 优化部分示例及测试

上级 8694c584
隐藏空白更改
内联 并排
Showing with 391 addition and 337 deletion
pages/API/compress-image/compress-image.uvue
浏览文件 @ a54fc111
...@@ -2,34 +2,34 @@ ...@@ -2,34 +2,34 @@
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex:1"> <scroll-view style="flex:1">
<!-- #endif --> <!-- #endif -->
<page-head :title="title"></page-head> <view>
<view class="uni-padding-wrap"> <page-head :title="title"></page-head>
<view class="image-container"> <view class="uni-padding-wrap">
<image class="image" :src="beforeCompressPath" mode="aspectFit"></image> <view class="image-container">
<image class="image" :src="afterCompressPath" mode="aspectFit"></image> <image class="image" :src="beforeCompressPath" mode="aspectFit"></image>
</view> <image class="image" :src="afterCompressPath" mode="aspectFit"></image>
<view class="uni-title"> </view>
<text class="uni-subtitle-text">压缩前图片信息</text> <view class="uni-title">
</view> <text class="uni-subtitle-text">压缩前图片信息</text>
<text>{{beforeCompressImageInfo}}</text> </view>
<view class="uni-title"> <text>{{beforeCompressImageInfo}}</text>
<text class="uni-subtitle-text">压缩后图片信息</text> <view class="uni-title">
</view> <text class="uni-subtitle-text">压缩后图片信息</text>
<text>{{afterCompressImageInfo}}</text> </view>
<view class="uni-btn-v"> <text>{{afterCompressImageInfo}}</text>
<button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button> <view class="uni-btn-v">
</view> <button type="primary" @click="chooseImage">从相册中选取待压缩的图片</button>
<view class="uni-btn-v"> </view>
<button type="primary" @click="compressImage">压缩图片</button> <view class="uni-btn-v">
<button type="primary" @click="compressImage">压缩图片</button>
</view>
</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> </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="auto" title="压缩后图片的宽度，支持px、%、auto" type="string" @confirm="onWidthConfirm"></input-data>
<input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string" @confirm="onHeightConfirm"></input-data> -->
<input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
uni.getImageInfo({ uni.getImageInfo({
src: res.tempFilePath, src: res.tempFilePath,
success: (_res) => { success: (_res) => {
let beforeCompressSize: number, afterComoressSize: number; let beforeCompressSize : number, afterComoressSize : number;
// #ifdef APP-ANDROID // #ifdef APP-ANDROID
beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available(); beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available(); afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();
......
pages/API/compress-video/compress-video.uvue
浏览文件 @ a54fc111
...@@ -3,27 +3,29 @@ ...@@ -3,27 +3,29 @@
<scroll-view style="flex:1"> <scroll-view style="flex:1">
<!-- #endif --> <!-- #endif -->
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap"> <view>
<video class="video" :src="beforeCompressPath" :controls="true"></video> <view class="uni-padding-wrap">
<view class="uni-title"> <video class="video" :src="beforeCompressPath" :controls="true"></video>
<text class="uni-subtitle-text">压缩前视频信息</text> <view class="uni-title">
</view> <text class="uni-subtitle-text">压缩前视频信息</text>
<text>{{beforeCompressVideoInfo}}</text> </view>
<video class="video" :src="afterCompressPath" :controls="true"></video> <text>{{beforeCompressVideoInfo}}</text>
<view class="uni-title"> <video class="video" :src="afterCompressPath" :controls="true"></video>
<text class="uni-subtitle-text">压缩后视频信息</text> <view class="uni-title">
</view> <text class="uni-subtitle-text">压缩后视频信息</text>
<text>{{afterCompressVideoInfo}}</text> </view>
<view class="uni-btn-v"> <text>{{afterCompressVideoInfo}}</text>
<button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button> <view class="uni-btn-v">
</view> <button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
<view class="uni-btn-v"> </view>
<button type="primary" @click="compressVideo">压缩视频</button> <view class="uni-btn-v">
</view> <button type="primary" @click="compressVideo">压缩视频</button>
<enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data> </view>
<view class="uni-common-mt"> <enum-data title="压缩质量" :items="qualityItemTypes" @change="onQualityChange"></enum-data>
<text class="uni-title uni-title-text">相对于原视频的分辨率比例，取值范围(0, 1]</text> <view class="uni-common-mt">
<slider :min="0.1" :max="1" :step="0.1" :show-value="true" @change="onResolutionChange"></slider> <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>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
...@@ -116,7 +118,7 @@ ...@@ -116,7 +118,7 @@
this.resolution = event.detail.value; this.resolution = event.detail.value;
}, },
testCompressVideo() { testCompressVideo() {
let beforeCompressSize: number, afterComoressSize: number; let beforeCompressSize : number, afterComoressSize : number;
uni.compressVideo({ uni.compressVideo({
src: this.videoSrcForTest, src: this.videoSrcForTest,
quality: 'medium', quality: 'medium',
......
pages/API/get-current-pages/get-current-pages.uvue
浏览文件 @ a54fc111
...@@ -2,40 +2,44 @@ ...@@ -2,40 +2,44 @@
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view class="page-scroll-view"> <scroll-view class="page-scroll-view">
<!-- #endif --> <!-- #endif -->
<page-head title="getCurrentPages"></page-head> <view>
<view class="uni-padding-wrap"> <page-head title="getCurrentPages"></page-head>
<button @click="_getCurrentPages">getCurrentPages</button> <view class="uni-padding-wrap">
<view v-if="pages.length" style="padding: 15px 0px"> <button @click="_getCurrentPages">getCurrentPages</button>
<text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text> <view v-if="pages.length" style="padding: 15px 0px">
<template v-for="(page, index) in pages" :key="page.route"> <text>当前页面栈中 {{ pages.length }} 个页面，列表如下：</text>
<text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text> <template v-for="(page, index) in pages" :key="page.route">
</template> <text style="margin-top: 5px">index: {{ index }}, route: {{ page.route }}</text>
</template>
</view>
</view> </view>
</view>
<page-head title="currentPageStyle"></page-head> <page-head title="currentPageStyle"></page-head>
<template v-for="(item, index) in PageStyleArray"> <template v-for="(item, index) in PageStyleArray">
<view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index"> <view class="page-style-item" v-if="currentPageStyle[item.key]!=null" :key="index">
<view class="item-text"> <view class="item-text">
<text class="item-text-key">{{item.key}}:</text> <text class="item-text-key">{{item.key}}:</text>
<text class="item-text-value">{{currentPageStyle[item.key]}}</text> <text class="item-text-value">{{currentPageStyle[item.key]}}</text>
</view> </view>
<view class="set-value" v-if="item.type == 'boolean'"> <view class="set-value" v-if="item.type == 'boolean'">
<switch :checked="currentPageStyle.getBoolean(item.key)" <switch :checked="currentPageStyle.getBoolean(item.key)"
@change="switchChange(item.key, $event as UniSwitchChangeEvent)"> @change="switchChange(item.key, $event as UniSwitchChangeEvent)">
</switch> </switch>
</view> </view>
<view class="set-value" v-else-if="item.type == 'number'"> <view class="set-value" v-else-if="item.type == 'number'">
<slider :value="currentPageStyle.getNumber(item.key)" :show-value="true" <slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
@change="sliderChange(item.key, $event as UniSliderChangeEvent)" /> @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>
<view class="set-value" v-else-if="item.type == 'string'"> </template>
<radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)"> <button style='margin: 10px;' @click="goSetDisablePullDownRefresh">go set disable pullDownRefresh</button>
<radio class="radio-value" v-for="(item2, index2) in item.value" :key="index2" :value="item2" >{{item2}}</radio> </view>
</radio-group>
</view>
</view>
</template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
...@@ -117,6 +121,11 @@ ...@@ -117,6 +121,11 @@
const currentPage = pages[pages.length - 1]; const currentPage = pages[pages.length - 1];
currentPage.$setPageStyle(style); currentPage.$setPageStyle(style);
}, },
goSetDisablePullDownRefresh() {
uni.navigateTo({
url: '/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh'
});
}
// getCurrentPage(): Page { // getCurrentPage(): Page {
// const pages = getCurrentPages(); // const pages = getCurrentPages();
// const currentPage = pages[pages.length - 1]; // const currentPage = pages[pages.length - 1];
...@@ -163,7 +172,7 @@ ...@@ -163,7 +172,7 @@
flex-direction: row; flex-direction: row;
} }
.radio-value { .radio-value {
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.uvue
浏览文件 @ a54fc111
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<button class="btn btn-get-page-style" type="default" @click="getPageStyle">getPageStyle</button> <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-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">当前 PageStyle</text>
<text class="page-style-value">{{pageStyleText}}</text> <text class="page-style-value">{{pageStyleText}}</text>
<text class="status">状态：</text> <text class="status">状态：</text>
<view class="status-list"> <view class="status-list">
<text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text> <text>enablePullDownRefresh: {{enablePullDownRefreshStatus}}</text>
</view> </view>
<text class="tips">当前版本仅支持设置属性 enablePullDownRefresh</text> <text class="tips">当前版本仅支持设置属性 enablePullDownRefresh</text>
</view> </view>
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
return { return {
checked: false, checked: false,
pages: [] as Page[], pages: [] as Page[],
currentPageStyle: {} as UTSJSONObject, currentPageStyle: {} as UTSJSONObject,
// TODO // TODO
enablePullDownRefreshStatus: true enablePullDownRefreshStatus: true
} }
}, },
...@@ -52,11 +52,11 @@ ...@@ -52,11 +52,11 @@
const currentPage = pages[pages.length - 1]; const currentPage = pages[pages.length - 1];
currentPage.$setPageStyle({ currentPage.$setPageStyle({
enablePullDownRefresh: enable enablePullDownRefresh: enable
}); });
this.enablePullDownRefreshStatus = enable this.enablePullDownRefreshStatus = enable
}, },
startPullDownRefresh() { startPullDownRefresh() {
uni.startPullDownRefresh() uni.startPullDownRefresh()
} }
}, },
} }
...@@ -66,28 +66,28 @@ ...@@ -66,28 +66,28 @@
<style> <style>
.btn { .btn {
margin-top: 10px; margin-top: 10px;
} }
.page-style { .page-style {
margin-top: 15px; margin-top: 15px;
} }
.page-style-value { .page-style-value {
margin-top: 5px; margin-top: 5px;
padding: 5px; padding: 5px;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
/* #ifdef WEB */ /* #ifdef WEB */
overflow-wrap: break-word; overflow-wrap: break-word;
/* #endif */ /* #endif */
} }
.status { .status {
margin-top: 20px; margin-top: 20px;
} }
.status-list { .status-list {
margin-top: 5px; margin-top: 5px;
} }
.tips { .tips {
......
pages/CSS/overflow/overflow-visible-event.uvue
浏览文件 @ a54fc111
<template> <template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;"> <scroll-view style="flex: 1;">
<!-- #endif -->
<view> <view>
<text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text> <text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
<view class="backgroundview"> <view class="backgroundview">
...@@ -29,7 +31,9 @@ ...@@ -29,7 +31,9 @@
</view> </view>
</view> </view>
</view> </view>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<script> <script>
...@@ -131,7 +135,7 @@ ...@@ -131,7 +135,7 @@
background-color: green; background-color: green;
} }
.hover-class { .hover-class {
background-color: aqua; background-color: aqua;
} }
</style> </style>
pages/CSS/transform/rotate.uvue
浏览文件 @ a54fc111
<template> <template>
<scroll-view class="page"> <!-- #ifdef APP -->
<scroll-view class="page">
<view class="trace"> <!-- #endif -->
<view class="base reserve"> <view class="rotate-container">
<text class="reserve-text">rotate(20deg)</text> <view class="trace">
<text class="reserve-text">转变前位置</text> <view class="base reserve">
</view> <text class="reserve-text">rotate(20deg)</text>
<view class="base reserve"> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">rotateX(50deg)</text> </view>
<text class="reserve-text">转变前位置</text> <view class="base reserve">
</view> <text class="reserve-text">rotateX(50deg)</text>
<view class="base reserve"> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">rotateY(50deg)</text> </view>
<text class="reserve-text">转变前位置</text> <view class="base reserve">
</view> <text class="reserve-text">rotateY(50deg)</text>
<view class="base reserve"> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">rotateZ(50deg)</text> </view>
<text class="reserve-text">转变前位置</text> <view class="base reserve">
</view> <text class="reserve-text">rotateZ(50deg)</text>
</view> <text class="reserve-text">转变前位置</text>
</view>
<view class="base transform" style="transform: rotate(20deg)"> </view>
<text>rotate(20deg)</text>
<text>转变后位置</text> <view class="base transform" style="transform: rotate(20deg)">
</view> <text>rotate(20deg)</text>
<view class="base transform" style="transform: rotateX(50deg)"> <text>转变后位置</text>
<text>rotateX(50deg)</text> </view>
<text>转变后位置</text> <view class="base transform" style="transform: rotateX(50deg)">
</view> <text>rotateX(50deg)</text>
<view class="base transform" style="transform: rotateY(50deg)"> <text>转变后位置</text>
<text>rotateY(50deg)</text> </view>
<text>转变后位置</text> <view class="base transform" style="transform: rotateY(50deg)">
</view> <text>rotateY(50deg)</text>
<view class="base transform" style="transform: rotateZ(50deg)"> <text>转变后位置</text>
<text>rotateZ(50deg)</text> </view>
<text>转变后位置</text> <view class="base transform" style="transform: rotateZ(50deg)">
</view> <text>rotateZ(50deg)</text>
<text>转变后位置</text>
</scroll-view> </view>
</template>
</view>
<script lang="uts"> <!-- #ifdef APP -->
export default { </scroll-view>
data() { <!-- #endif -->
return { </template>
}
}, <script lang="uts">
methods: { export default {
}, data() {
} return {
</script> }
},
<style> methods: {
.page { },
flex: 1; }
align-items: center; </script>
}
.trace { <style>
position: absolute; .page {
top: 0px; flex: 1;
left: 0px; }
width: 100%;
align-items: center; .rotate-container {
} display: flex;
.base { align-items: center;
margin: 10px; }
width: 150px;
height: 150px; .trace {
align-items: center; position: absolute;
justify-content: center; top: 0px;
} left: 0px;
.reserve { width: 100%;
border: 1px dotted #588; align-items: center;
background-color: #DDD; }
}
.reserve-text { .base {
color: #CCC; margin: 10px;
} width: 150px;
.transform { height: 150px;
border: 1px solid #00F; align-items: center;
background-color: rgba(0,255,255,0.5); 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> </style>
pages/CSS/transform/scale.uvue
浏览文件 @ a54fc111
<template> <template>
<scroll-view class="page"> <!-- #ifdef APP -->
<view class="trace"> <scroll-view class="page">
<view class="base reserve"> <!-- #endif -->
<text class="reserve-text">scaleX(0.6)</text> <view class="scale-container">
<text class="reserve-text">转变前位置</text> <view class="trace">
</view> <view class="base reserve">
<view class="base reserve"> <text class="reserve-text">scaleX(0.6)</text>
<text class="reserve-text">scaleY(0.8)</text> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">转变前位置</text> </view>
</view> <view class="base reserve">
<view class="base reserve"> <text class="reserve-text">scaleY(0.8)</text>
<text class="reserve-text">scale(0.8,0.8)</text> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">转变前位置</text> </view>
</view> <view class="base reserve">
</view> <text class="reserve-text">scale(0.8,0.8)</text>
<text class="reserve-text">转变前位置</text>
<view class="base transform" style="transform: scaleX(0.6)"> </view>
<text>scaleX(0.6)</text> </view>
<text>转变后位置</text>
</view> <view class="base transform" style="transform: scaleX(0.6)">
<view class="base transform" style="transform: scaleY(0.6)"> <text>scaleX(0.6)</text>
<text>scaleY(0.6)</text> <text>转变后位置</text>
<text>转变后位置</text> </view>
</view> <view class="base transform" style="transform: scaleY(0.6)">
<view class="base transform" style="transform: scale(1.2,1.2)"> <text>scaleY(0.6)</text>
<text>scale(1.2,1.2)</text> <text>转变后位置</text>
<text>转变后位置</text> </view>
</view> <view class="base transform" style="transform: scale(1.2,1.2)">
<text>scale(1.2,1.2)</text>
<view class="base"> <text>转变后位置</text>
<text>通过scaleY(0.5)实现0.5px的线</text> </view>
<view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
</view> <view class="base">
<text>通过scaleY(0.5)实现0.5px的线</text>
</scroll-view> <view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
</template> </view>
</view>
<script lang="uts"> <!-- #ifdef APP -->
</script> </scroll-view>
<!-- #endif -->
<style> </template>
.page {
flex: 1; <script lang="uts">
align-items: center; </script>
}
<style>
.trace { .page {
position: absolute; flex: 1;
top: 0px; }
left: 0px;
width: 100%; .scale-container {
align-items: center; display: flex;
} align-items: center;
}
.base {
margin: 10px; .trace {
width: 150px; position: absolute;
height: 150px; top: 0px;
align-items: center; left: 0px;
justify-content: center; width: 100%;
} align-items: center;
}
.reserve {
border: 1px dotted #588; .base {
background-color: #DDD; margin: 10px;
} width: 150px;
height: 150px;
.reserve-text { align-items: center;
color: #CCC; justify-content: center;
} }
.transform { .reserve {
border: 1px solid #00F; border: 1px dotted #588;
background-color: rgba(0, 255, 255, 0.5); background-color: #DDD;
} }
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0, 255, 255, 0.5);
}
</style> </style>
pages/CSS/transform/translate.uvue
浏览文件 @ a54fc111
<template> <template>
<scroll-view class="page"> <!-- #ifdef APP -->
<view class="trace"> <scroll-view class="page">
<view class="base reserve"> <!-- #endif -->
<text class="reserve-text">translateX(80%)</text> <view class="translate-container">
<text class="reserve-text">转变前位置</text> <view class="trace">
</view> <view class="base reserve">
<view class="base reserve"> <text class="reserve-text">translateX(80%)</text>
<text class="reserve-text">translateY(50px)</text> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">转变前位置</text> </view>
</view> <view class="base reserve">
<view class="base reserve"> <text class="reserve-text">translateY(50px)</text>
<text class="reserve-text">translate(-50%,50%)</text> <text class="reserve-text">转变前位置</text>
<text class="reserve-text">转变前位置</text> </view>
</view> <view class="base reserve">
</view> <text class="reserve-text">translate(-50%,50%)</text>
<text class="reserve-text">转变前位置</text>
</view>
</view>
<view class="base transform" style="transform: translateX(80%)"> <view class="base transform" style="transform: translateX(80%)">
<text>translateX(80%)</text> <text>translateX(80%)</text>
<text>转变后位置</text> <text>转变后位置</text>
</view> </view>
<view class="base transform" style="transform: translateY(50px)"> <view class="base transform" style="transform: translateY(50px)">
<text>translateY(50px)</text> <text>translateY(50px)</text>
<text>转变后位置</text> <text>转变后位置</text>
</view> </view>
<view class="base transform" style="transform: translate(-50%, 50%)"> <view class="base transform" style="transform: translate(-50%, 50%)">
<text>translate(-50%,50%)</text> <text>translate(-50%,50%)</text>
<text>转变后位置</text> <text>转变后位置</text>
</view> </view>
</scroll-view> </view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
data() { data() {
return { return {
} }
}, },
methods: { methods: {
}, },
} }
</script> </script>
<style> <style>
.page { .page {
flex: 1; flex: 1;
align-items: center; }
}
.trace { .translate-container{
position: absolute; display: flex;
top: 0px; align-items: center;
left: 0px; }
width: 100%;
align-items: center; .trace {
} position: absolute;
.base { top: 0px;
margin: 10px; left: 0px;
width: 150px; width: 100%;
height: 150px; align-items: center;
align-items: center; }
justify-content: center;
} .base {
.reserve { margin: 10px;
border: 1px dotted #588; width: 150px;
background-color: #DDD; height: 150px;
} align-items: center;
.reserve-text { justify-content: center;
color: #CCC; }
}
.transform { .reserve {
border: 1px solid #00F; border: 1px dotted #588;
background-color: rgba(0,255,255,0.5); background-color: #DDD;
} }
.reserve-text {
color: #CCC;
}
.transform {
border: 1px solid #00F;
background-color: rgba(0, 255, 255, 0.5);
}
</style> </style>
pages/pages.test.js
浏览文件 @ a54fc111
...@@ -80,7 +80,8 @@ const pages = [ ...@@ -80,7 +80,8 @@ const pages = [
// '/pages/component/unicloud-db/unicloud-db/contacts/edit', // '/pages/component/unicloud-db/unicloud-db/contacts/edit',
// 动态内容 // 动态内容
// '/pages/component/unicloud-db/unicloud-db/contacts/detail', // '/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-properties/global-properties',
'/pages/component/global-events/global-events', '/pages/component/global-events/global-events',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或