Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 8a78ba06 编写于 作者: 张 张磊
浏览文件
操作

添加previewImage、transition、transform示例

上级 730a269e
隐藏空白更改
内联 并排
Showing with 330 addition and 6 deletion
pages.json
浏览文件 @ 8a78ba06
......@@ -416,6 +416,16 @@
"style": {
"navigationBarTitleText": "text-decoration-line"
}
},{
"path": "pages/CSS/transition/transition",
"style": {
"navigationBarTitleText": "Transition"
}
},{
"path": "pages/CSS/transform/transform",
"style": {
"navigationBarTitleText": "Transform"
}
}, {
"path": "pages/API/request/request",
"style": {
......@@ -486,6 +496,13 @@
"enablePullDownRefresh": false
}
}, {
"path": "pages/API/preview-image/preview-image",
"style": {
"navigationBarTitleText": "图片预览",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
......
pages/API/preview-image/preview-image.uvue 0 → 100644
浏览文件 @ 8a78ba06
<template>
<view style="padding-left: 16rpx;padding-right: 16rpx;">
<view>
<text class="text-desc">图片指示器样式</text>
<radio-group class="cell-ct" style="background-color: white;" @change="onIndicatorChanged">
<view class="indicator-it" v-for="(item,index) in indicator" :key="item.value">
<radio :checked="index === 0" :value="item.value">{{item.name}}</radio>
</view>
</radio-group>
</view>
<view>
<checkbox-group @change="onCheckboxChange" style="margin-top: 32rpx;margin-bottom: 32rpx;margin-left: 16rpx;">
<checkbox :checked="isLoop" style="margin-right: 30rpx;">循环播放</checkbox>
</checkbox-group>
</view>
<view style="background-color: white;">
<text class="text-desc">点击图片开始预览</text>
<view class="cell-ct" style="background-color: #eeeeee; padding: 16rpx;">
<view class="cell cell-choose-image" v-for="(image,index) in imageList" :key="index">
<image style="width: 210rpx;height: 210rpx;" mode="aspectFit" :src="image" @click="previewImage(index)"></image>
</view>
<image class="cell cell-choose-image" src="/static/plus.png" @click="chooseImage">
<view></view>
</image>
</view>
</view>
</view>
</template>
<script>
type ItemType = {
value: string,
name: string
}
export default {
data() {
return {
imageList: ["https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", "/static/logo.png"],
indicator: [{
value: "default",
name: "圆点"
}, {
value: "number",
name: "数字"
}, {
value: "none",
name: "不显示"
}] as ItemType[],
currentIndicator: "default",
isLoop: true
}
},
methods: {
previewImage(index: number) {
uni.previewImage({
urls: this.imageList,
current: index,
indicator: this.currentIndicator,
loop: this.isLoop
})
},
chooseImage() {
uni.chooseImage({
sourceType: ['album'],
success: (e) => {
this.imageList = this.imageList.concat(e.tempFilePaths)
},
fail(e) {
}
})
},
onIndicatorChanged(e: RadioGroupChangeEvent) {
this.currentIndicator = e.detail.value
},
onCheckboxChange(e: CheckboxGroupChangeEvent) {
this.isLoop = !this.isLoop
}
}
}
</script>
<style>
.text-desc {
margin-top: 32rpx;
margin-left: 16rpx;
margin-bottom: 32rpx;
font-weight: bold;
}
.cell-ct {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
margin-left: 14rpx;
width: 210rpx;
height: 210rpx;
}
.cell-choose-image {
border-width: 1px;
border-color: lightgray;
}
.indicator-it {
margin: 16rpx;
}
</style>
\ No newline at end of file
pages/CSS/transform/transform.uvue 0 → 100644
浏览文件 @ 8a78ba06
<template>
<view>
<view class="baseStyle" style="transform: translateX(120%);">translateX(120%)</view>
<view class="baseStyle" style="transform: translateY(-30rpx);">translateY(-30rpx)</view>
<view class="baseStyle" style="transform: translate(120%,50%);">translate(120%,50%)</view>
<view class="baseStyle" style="transform: scaleX(0.8);">scaleX(0.8)</view>
<view class="baseStyle" style="transform: scaleY(0.8);">scaleY(0.8)</view>
<view class="baseStyle" style="transform: scale(0.8,0.8);">scale(0.8,0.8)</view>
<view class="baseStyle" style="transform: rotate(20deg);">rotate(20deg)</view>
<view class="baseStyle" style="transform: rotateX(50deg);">rotateX(50deg)</view>
<view class="baseStyle" style="transform: rotateY(50deg);">rotateY(50deg)</view>
<view class="baseStyle" style="transform: rotateZ(50deg);">rotateZ(50deg)</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {}
},
methods: {
}
}
</script>
<style>
.baseStyle {
background-color: cadetblue;
margin: 10rpx;
width: 300rpx;
height: 300rpx;
align-items: center;
flex: 1;
justify-content: center;
}
</style>
\ No newline at end of file
pages/CSS/transition/transition.uvue 0 → 100644
浏览文件 @ 8a78ba06
<template>
<view>
<view class="container">
<text class="text">点击修改宽度</text>
<view class="base-style transition-width" :style="widthOrHeight" @click="changeWidthOrHeight"></view>
</view>
<view class="container">
<text class="text">点击修改Margin</text>
<view class="base-style transition-margin" :style="styleMargin" @click="changeMargin"></view>
</view>
<view class="container">
<text class="text">点击修改Padding</text>
<view class="base-style transition-padding" :style="stylePadding" @click="changePadding">
<view style="background-color: black;height: 50px;width: 50px;"></view>
</view>
</view>
<view class="container">
<text class="text">点击修改Background</text>
<view class="base-style transition-background" :style="styleBackground" @click="changeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改Transform</text>
<view class="base-style transition-transform" :style="styleTransform" @click="changeTransform"></view>
</view>
<view class="container">
<text class="text">点击修改Border</text>
<view class="base-style transition-border" :style="styleBorder" @click="changeBorder"></view>
</view>
<view class="container">
<text class="text">点击修改Position</text>
<view class="base-style transition-position" :style="stylePosition" @click="changestylePosition"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isTranstionWidthOrHeight: false,
widthOrHeight: "",
isTranstionChangeMargin: false,
styleMargin: "",
isTransitionStylePadding: false,
stylePadding: "",
isTransitionstyleBackground: false,
styleBackground: "",
isTransitionStyleTransform: false,
styleTransform: "",
isTransitionstyleBorder: false,
styleBorder: "",
isTransitionstylePosition: false,
stylePosition: ""
}
},
methods: {
changeWidthOrHeight() {
this.widthOrHeight = this.isTranstionWidthOrHeight ? "width:400rpx" : "width:600rpx"
this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
},
changeMargin() {
this.styleMargin = this.isTranstionChangeMargin ? "margin-top:0rpx;margin-left:0rpx" : "margin-top:100rpx;margin-left:100rpx"
this.isTranstionChangeMargin = !this.isTranstionChangeMargin
},
changePadding() {
this.stylePadding = this.isTransitionStylePadding ? "padding-top:0rpx;padding-left:0rpx" : "padding-top:100rpx;padding-left:100rpx"
this.isTransitionStylePadding = !this.isTransitionStylePadding
},
changeBackground() {
this.styleBackground = this.isTransitionstyleBackground ? "background-color: brown;opacity:1" : "background-color: black;opacity:0.5"
this.isTransitionstyleBackground = !this.isTransitionstyleBackground
},
changeTransform() {
this.styleTransform = this.isTransitionStyleTransform ? "transform: rotate(0deg)" : "transform: rotate(135deg)"
this.isTransitionStyleTransform = !this.isTransitionStyleTransform
},
changeBorder() {
this.styleBorder = this.isTransitionstyleBorder ? "border-color: brown;" : "border-color: yellow;"
this.isTransitionstyleBorder = !this.isTransitionstyleBorder
},
changestylePosition() {
this.stylePosition = this.isTransitionstylePosition ? "left:0rpx" : "left:150rpx;"
this.isTransitionstylePosition = !this.isTransitionstylePosition
}
}
}
</script>
<style>
.container {
margin: 15rpx;
background-color: white;
}
.text{
margin-top: 20rpx;
margin-bottom: 32rpx;
}
.base-style {
width: 400rpx;
height: 400rpx;
background-color: brown;
}
.transition-width {
transition-property: width;
transition-duration: 1000;
}
.transition-margin {
transition-property: margin-left, margin-top;
transition-duration: 1000;
}
.transition-padding {
transition-property: padding-left, padding-top;
transition-duration: 1000;
}
.transition-background {
transition-property: background-color, opacity;
transition-duration: 1000;
}
.transition-transform {
transition-property: transform;
transition-duration: 1000;
}
.transition-border {
border-width: 5px;
border-color: brown;
transition-property: border-color;
transition-duration: 1000;
}
.transition-position {
transition-property: left;
transition-duration: 1000;
}
</style>
\ No newline at end of file
pages/tabBar/API/API.uvue
浏览文件 @ 8a78ba06
......@@ -270,6 +270,11 @@
name: "图片",
url: "image",
},
{
name: "图片预览",
url: "preview-image",
enable: true
},
// #ifndef MP-LARK
{
name: "音频",
......
pages/tabBar/CSS/CSS.uvue
浏览文件 @ 8a78ba06
......@@ -5,19 +5,16 @@
</view>
<view class="uni-hello-text">
<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
:inWhiteList="true"></u-link>
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
</view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" class="uni-icon"></image>
</view>
<view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
......@@ -298,6 +295,22 @@
url: 'pages/CSS/text/text-decoration-line'
}
] as Page[]
}, {
id: 'animate',
name: '动画',
open: false,
pages: [
{
name: 'transition',
enable: true,
url: 'pages/CSS/transition/transition'
},
{
name: 'transform',
enable: true,
url: 'pages/CSS/transform/transform'
}
] as Page[]
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或