Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6017
Star 91
Fork 164
H
hello uni-app x
提交 3e37c5fb 编写于 作者: 杜庆泉's avatar 杜庆泉
浏览文件
操作

Merge branch 'master' of http://git.dcloud.io/uni-app-x/hello-uniapp-x into master

上级 499b77e4 136f6fd7
显示空白变更内容
内联 并排
Showing with 627 addition and 45 deletion
pages.json
浏览文件 @ 3e37c5fb
...@@ -85,6 +85,24 @@ ...@@ -85,6 +85,24 @@
"navigationBarTitleText": "image" "navigationBarTitleText": "image"
} }
}, },
{
"path": "pages/component/image/image-format",
"style": {
"navigationBarTitleText": "image-format"
}
},
{
"path": "pages/component/image/image-mode",
"style": {
"navigationBarTitleText": "image-mode"
}
},
{
"path": "pages/component/image/image-path",
"style": {
"navigationBarTitleText": "image-path"
}
},
{ {
"path": "pages/component/web-view/web-view", "path": "pages/component/web-view/web-view",
"style": { "style": {
...@@ -416,6 +434,16 @@ ...@@ -416,6 +434,16 @@
"style": { "style": {
"navigationBarTitleText": "text-decoration-line" "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", "path": "pages/API/request/request",
"style": { "style": {
...@@ -486,6 +514,13 @@ ...@@ -486,6 +514,13 @@
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, {
"path": "pages/API/preview-image/preview-image",
"style": {
"navigationBarTitleText": "图片预览",
"enablePullDownRefresh": false
}
} }
], ],
"globalStyle": { "globalStyle": {
......
pages/API/preview-image/preview-image.uvue 0 → 100644
浏览文件 @ 3e37c5fb
<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
浏览文件 @ 3e37c5fb
<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
浏览文件 @ 3e37c5fb
<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/component/image/image-format.uvue 0 → 100644
浏览文件 @ 3e37c5fb
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的图片格式示例</text>
</view>
<view v-for="(item,index) in data" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" mode="widthFix" :src="item.src"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'image-format',
data: [{
format: 'png',
src: '/static/logo.png'
},
{
format: 'jpg',
src: '/static/logo.jpg'
},
{
format: 'webp',
src: '/static/logo.webp'
},
{
format: 'bmp',
src: '/static/logo.bmp'
},
{
format: 'gif',
src: '/static/logo.gif'
}
] as Array < ImageFormat >
}
}
}
class ImageFormat {
format: string;
src: string;
constructor(format: string, src: string) {
this.format = format;
this.src = src;
}
}
</script>
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
}
</style>
\ No newline at end of file
pages/component/image/image-mode.uvue 0 → 100644
浏览文件 @ 3e37c5fb
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的图片缩放模式示例</text>
</view>
<view v-for="(item,index) in data" :key="index">
<text class="uni-subtitle-text">{{item.mode}}: {{item.description}}</text>
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" :mode="item.mode" src="/static/shuijiao.jpg"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'image-mode',
data: [{
mode: 'scaleToFill',
description: '不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'
},
{
mode: 'aspectFit',
description: '保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来'
},
{
mode: 'aspectFill',
description: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'
},
{
mode: 'top',
description: '不缩放图片，只显示图片的顶部区域'
},
{
mode: 'bottom',
description: '不缩放图片，只显示图片的底部区域'
},
{
mode: 'center',
description: '不缩放图片，只显示图片的中间区域'
},
{
mode: 'left',
description: '不缩放图片，只显示图片的左边区域'
},
{
mode: 'right',
description: '不缩放图片，只显示图片的右边区域'
},
{
mode: 'top left',
description: '不缩放图片，只显示图片的左上边区域'
},
{
mode: 'top right',
description: '不缩放图片，只显示图片的右上边区域'
},
{
mode: 'bottom left',
description: '不缩放图片，只显示图片的左下边区域'
},
{
mode: 'bottom right',
description: '不缩放图片，只显示图片的右下边区域'
},
{
mode: 'widthFix',
description: '宽度不变，高度自动变化，保持原图宽高比不变'
},
{
mode: 'heightFix',
description: '高度不变，宽度自动变化，保持原图宽高比不变'
}
] as Array < ImageMode >
}
}
}
class ImageMode {
mode: string;
description: string;
constructor(mode: string, description: string) {
this.mode = mode;
this.description = description;
}
}
</script>
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
height: 200rpx;
background-color: #eeeeee;
}
</style>
\ No newline at end of file
pages/component/image/image-path.uvue 0 → 100644
浏览文件 @ 3e37c5fb
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的图片路径示例</text>
</view>
<view v-for="(item,index) in data" :key="index">
<text class="uni-subtitle-text">{{item.description}}</text>
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" mode="widthFix" :src="item.src"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'image-path',
data: [{
src: 'https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
description: '网络路径'
},
{
src: '/static/logo.png',
description: '本地相对路径'
},
{
src: 'file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/logo.png',
description: '本地绝对路径'
},
{
src: 'data:image/*;base64,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',
description: 'Base64'
}
] as Array < ImagePath >
}
}
}
class ImagePath {
src: string;
description: string;
constructor(src: string, description: string) {
this.src = src;
this.description = description;
}
}
</script>
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
}
</style>
\ No newline at end of file
pages/component/image/image.uvue
浏览文件 @ 3e37c5fb
...@@ -2,27 +2,18 @@ ...@@ -2,27 +2,18 @@
<view> <view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view class="uni-title"> <view class="uni-center" style="background:#FFFFFF;">
<text class="uni-title-text"> <image class="image" :fade-show="true" mode="widthFix" src="/static/logo.png" @error="error"
示例1 @load="load"></image>
</text>
<text class="uni-subtitle-text">
本地图片
</text>
</view> </view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;"> <view class="uni-btn-v">
<image class="image" mode="widthFix" src="/static/uni.png" /> <button type="primary" @tap="imageFormat">图片格式示例</button>
</view> </view>
<view class="uni-title"> <view class="uni-btn-v">
<text class="uni-title-text"> <button type="primary" @tap="imageMode">图片缩放模式示例</button>
示例2
</text>
<text class="uni-subtitle-text">
网络图片
</text>
</view> </view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;"> <view class="uni-btn-v">
<image class="image" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png" /> <button type="primary" @tap="imagePath">图片路径示例</button>
</view> </view>
</view> </view>
</view> </view>
...@@ -33,6 +24,29 @@ ...@@ -33,6 +24,29 @@
return { return {
title: 'image' title: 'image'
} }
},
methods: {
error(event: ImageErrorEvent) {
console.log(event.type, event.detail);
},
load(event: ImageLoadEvent) {
console.log(event.type, event.detail);
},
imageFormat() {
uni.navigateTo({
url: '/pages/component/image/image-format'
});
},
imageMode() {
uni.navigateTo({
url: '/pages/component/image/image-mode'
});
},
imagePath() {
uni.navigateTo({
url: '/pages/component/image/image-path'
});
}
} }
} }
</script> </script>
......
pages/tabBar/API/API.uvue
浏览文件 @ 3e37c5fb
...@@ -270,6 +270,11 @@ ...@@ -270,6 +270,11 @@
name: "图片", name: "图片",
url: "image", url: "image",
}, },
{
name: "图片预览",
url: "preview-image",
enable: true
},
// #ifndef MP-LARK // #ifndef MP-LARK
{ {
name: "音频", name: "音频",
......
pages/tabBar/CSS/CSS.uvue
浏览文件 @ 3e37c5fb
...@@ -5,19 +5,16 @@ ...@@ -5,19 +5,16 @@
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text> <text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link>
:inWhiteList="true"></u-link>
</view> </view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <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)"> <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> <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" <image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" class="uni-icon"></image>
class="uni-icon"></image>
</view> </view>
<view class="uni-panel-c" v-if="item.open"> <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)"> <view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" <text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
...@@ -298,6 +295,22 @@ ...@@ -298,6 +295,22 @@
url: 'pages/CSS/text/text-decoration-line' url: 'pages/CSS/text/text-decoration-line'
} }
] as Page[] ] 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[], ] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png', arrowUpIcon: '/static/icons/arrow-up.png',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或