Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

feat(App): add scroll-view

上级 e61c2cd6
展开全部 隐藏空白更改
内联 并排
Showing with 5156 addition and 3978 deletion
pages/API/download-file/download-file.uvue
浏览文件 @ 19359274
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view v-if="imageSrc" class="image-container">
<image class="img" :src="imageSrc" mode="center" />
</view>
<view v-else style="margin-top: 50px;">
<view class="uni-hello-text">
点击按钮下载服务端示例图片（下载网络文件到本地临时目录）
</view>
<view class="uni-btn-v">
<button type="primary" @tap="downloadImage">下载</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view v-if="imageSrc" class="image-container">
<image class="img" :src="imageSrc" mode="center" />
</view>
<view v-else style="margin-top: 50px">
<view class="uni-hello-text">
点击按钮下载服务端示例图片（下载网络文件到本地临时目录）
</view>
<view class="uni-btn-v">
<button type="primary" @tap="downloadImage">下载</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import DownloadTask from 'uts.sdk.modules.DCloudUniNetwork.DownloadTask';
export default {
data() {
return {
title: 'downloadFile',
imageSrc: '',
task: null as DownloadTask | null,
pageVisible: false
}
},
onLoad() {
this.pageVisible = true;
},
onUnload() {
this.imageSrc = '';
this.pageVisible = false;
uni.hideLoading();
this.task?.abort();
},
methods: {
downloadImage: function() {
uni.showLoading({
title: '下载中'
})
var self = this
this.task = uni.downloadFile({
url: "https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
success(res) {
if (this.pageVisible) {
console.log('downloadFile success, res is', res)
self.imageSrc = res.tempFilePath;
uni.hideLoading();
}
},
fail: (err) => {
if (this.pageVisible) {
console.log('downloadFile fail, err is:', err)
uni.hideLoading();
}
import DownloadTask from 'uts.sdk.modules.DCloudUniNetwork.DownloadTask';
export default {
data() {
return {
title: 'downloadFile',
imageSrc: '',
task: null as DownloadTask | null,
pageVisible: false
}
},
onLoad() {
this.pageVisible = true;
},
onUnload() {
this.imageSrc = '';
this.pageVisible = false;
uni.hideLoading();
this.task?.abort();
},
methods: {
downloadImage: function() {
uni.showLoading({
title: '下载中'
})
var self = this
this.task = uni.downloadFile({
url: "https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
success(res) {
if (this.pageVisible) {
console.log('downloadFile success, res is', res)
self.imageSrc = res.tempFilePath;
uni.hideLoading();
}
});
this.task?.onProgressUpdate((update) => {
},
fail: (err) => {
if (this.pageVisible) {
console.log("progress : ", update.progress);
console.log('downloadFile fail, err is:', err)
uni.hideLoading();
}
})
}
}
});
this.task?.onProgressUpdate((update) => {
if (this.pageVisible) {
console.log("progress : ", update.progress);
}
})
}
}
}
</script>
<style>
.img {
width: 500rpx;
height: 500rpx;
margin: 0 auto;
}
.img {
width: 500rpx;
height: 500rpx;
margin: 0 auto;
}
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
pages/API/event-bus/event-bus.uvue
浏览文件 @ 19359274
<template>
<view>
<button @click="on">开始监听</button>
<button @click="once">监听一次</button>
<button @click="off">取消监听</button>
<button @click="emit">触发监听</button>
<button @click="clear">清空消息</button>
<view class="box">
<view>收到的消息：</view>
<view>
<view v-for="(item, index) in log" :key="index">{{ item }}</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<button @click="on">开始监听</button>
<button @click="once">监听一次</button>
<button @click="off">取消监听</button>
<button @click="emit">触发监听</button>
<button @click="clear">清空消息</button>
<view class="box">
<view>收到的消息：</view>
<view>
<view v-for="(item, index) in log" :key="index">{{ item }}</view>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {
log: [] as string[]
log: [] as string[],
}
},
methods: {
......@@ -39,8 +45,8 @@ export default {
},
clear() {
this.log.length = 0
}
}
},
},
}
</script>
......@@ -48,4 +54,4 @@ export default {
.box {
padding: 10px;
}
</style>
\ No newline at end of file
</style>
pages/API/get-device-info/get-device-info.uvue
浏览文件 @ 19359274
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list">
<view class="uni-list-cell" v-for="(item,_) in items" style="align-items: center;">
<view class="uni-pd">
<view class="uni-label" style="width:180px;">{{item.label}}</view>
</view>
<view class="uni-list-cell-db">
<textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
</view>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" @tap="getDeviceInfo">获取设备信息</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list">
<view
class="uni-list-cell"
v-for="(item, _) in items"
style="align-items: center"
>
<view class="uni-pd">
<view class="uni-label" style="width: 180px">{{
item.label
}}</view>
</view>
<view class="uni-list-cell-db">
<textarea
:auto-height="true"
:disabled="true"
placeholder="未获取"
:value="item.value"
/>
</view>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" @tap="getDeviceInfo">获取设备信息</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type Item = {
label : string,
value : string,
}
export default {
data() {
return {
title: 'getDeviceInfo',
items: [] as Item[],
}
},
onUnload:function(){
},
methods: {
getDeviceInfo: function () {
const res = uni.getDeviceInfo();
//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
const json = JSON.stringify(res);
const result = JSON.parse<Map<string, any>>(json);
this.items = [] as Item[];
result.forEach((value, key) => {
const item = {
label: key,
value: "" + value
} as Item;
this.items.push(item);
})
}
<script>
type Item = {
label : string,
value : string,
}
export default {
data() {
return {
title: 'getDeviceInfo',
items: [] as Item[],
}
},
onUnload:function(){
},
methods: {
getDeviceInfo: function () {
const res = uni.getDeviceInfo();
//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
const json = JSON.stringify(res);
const result = JSON.parse<Map<string, any>>(json);
this.items = [] as Item[];
result.forEach((value, key) => {
const item = {
label: key,
value: "" + value
} as Item;
this.items.push(item);
})
}
}
}
</script>
<style>
.uni-pd {
padding-left: 30rpx;
}
.uni-pd {
padding-left: 30rpx;
}
</style>
pages/API/get-system-info/get-system-info.uvue
浏览文件 @ 19359274
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell" v-for="(item,_) in items" style="align-items: center;">
<view class="uni-pd">
<view class="uni-label" style="width:180px;">{{item.label}}</view>
</view>
<view class="uni-list-cell-db">
<textarea :auto-height="true" :disabled="true" placeholder="未获取" :value="item.value" />
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" @tap="getSystemInfo">获取设备系统信息</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view
class="uni-list-cell"
v-for="(item, _) in items"
style="align-items: center"
>
<view class="uni-pd">
<view class="uni-label" style="width: 180px">{{
item.label
}}</view>
</view>
<view class="uni-list-cell-db">
<textarea
:auto-height="true"
:disabled="true"
placeholder="未获取"
:value="item.value"
/>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" @tap="getSystemInfo">
获取设备系统信息
</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type Item = {
label : string,
value : string,
}
export default {
data() {
return {
title: 'getSystemInfo',
items: [] as Item[],
}
},
onUnload: function () {
},
methods: {
getSystemInfo: function () {
uni.getSystemInfo({
success: (res) => {
//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
const json = JSON.stringify(res);
const result = JSON.parse<Map<string, any>>(json);
this.items = [] as Item[];
result.forEach((value, key) => {
const item = {
label: key,
value: "" + value
} as Item;
this.items.push(item);
})
},
})
}
type Item = {
label : string,
value : string,
}
export default {
data() {
return {
title: 'getSystemInfo',
items: [] as Item[],
}
},
onUnload: function () {
},
methods: {
getSystemInfo: function () {
uni.getSystemInfo({
success: (res) => {
//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
const json = JSON.stringify(res);
const result = JSON.parse<Map<string, any>>(json);
this.items = [] as Item[];
result.forEach((value, key) => {
const item = {
label: key,
value: "" + value
} as Item;
this.items.push(item);
})
},
})
}
}
}
</script>
<style>
.uni-pd {
padding-left: 30rpx;
}
</style>
\ No newline at end of file
.uni-pd {
padding-left: 30rpx;
}
</style>
pages/API/modal/modal.uvue
浏览文件 @ 19359274
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-list">
<radio-group @change="radioChange">
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value"
:checked="index === current">
{{item.name}}
</radio>
</radio-group>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-list">
<radio-group @change="radioChange">
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
:checked="index === current">
{{ item.name }}
</radio>
</radio-group>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否显示取消按钮</view>
<switch :checked="showCancelSelect" @change="showCancelChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">定制取消文案</view>
<switch :checked="cancelTextSelect" @change="cancelTextChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">定制确认文案</view>
<switch :checked="confirmTextSelect" @change="confirmTextChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否显示输入框</view>
<switch :checked="editableSelect" @change="editableChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否定制输入提示词</view>
<switch :checked="placeholderTextSelect" @change="placeholderTextChange" />
</view>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button class="uni-btn-v" type="default" @tap="modalTap">
modal测试
</button>
</view>
<text>{{ exeRet }}</text>
</view>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否显示取消按钮</view>
<switch :checked="showCancelSelect" @change="showCancelChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">定制取消文案</view>
<switch :checked="cancelTextSelect" @change="cancelTextChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">定制确认文案</view>
<switch :checked="confirmTextSelect" @change="confirmTextChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否显示输入框</view>
<switch :checked="editableSelect" @change="editableChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否定制输入提示词</view>
<switch :checked="placeholderTextSelect" @change="placeholderTextChange"/>
</view>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button class="uni-btn-v" type="default" @tap="modalTap">modal测试</button>
</view>
<text>{{exeRet}}</text>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
type ItemType = {
value : string,
name : string,
value : string,
name : string,
}
export default {
data() {
return {
title: 'modal',
showCancelSelect:false,
cancelTextSelect:false,
confirmTextSelect:false,
editableSelect:false,
placeholderTextSelect:false,
exeRet:"",
export default {
data() {
return {
title: 'modal',
showCancelSelect: false,
cancelTextSelect: false,
confirmTextSelect: false,
editableSelect: false,
placeholderTextSelect: false,
exeRet: "",
items: [{
value: '标题',
name: '有标题'
value: '标题',
name: '有标题'
},
{
value: '',
name: '无标题'
value: '',
name: '无标题'
},
{
value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
name: '超长标题'
value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
name: '超长标题'
}
] as ItemType[],
current: 0
}
},
methods: {
}
},
methods: {
showCancelChange: function (e : SwitchChangeEvent) {
this.showCancelSelect = e.detail.value
},
......@@ -89,60 +96,56 @@
this.placeholderTextSelect = e.detail.value
},
radioChange(e : RadioGroupChangeEvent) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e.detail.value) {
this.current = i;
break;
}
}
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e.detail.value) {
this.current = i;
break;
}
}
},
modalTap: function () {
let cancelTextVal:string
modalTap: function () {
let cancelTextVal : string
let cancelColorVal = ''
if(this.cancelTextSelect){
if (this.cancelTextSelect) {
cancelTextVal = "修改后的取消文本"
cancelColorVal = "#ff00ff"
}else{
} else {
cancelTextVal = "取消"
}
let confirmTextVal = '确定'
let confirmColorVal = ''
if(this.confirmTextSelect){
if (this.confirmTextSelect) {
confirmTextVal = "修改后的确定文本"
confirmColorVal = "#00ffff"
}
let placeholderTextVal = ''
let contentVal = "弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内"
if(this.placeholderTextSelect){
if (this.placeholderTextSelect) {
placeholderTextVal = "定制提示信息"
contentVal = ""
}
uni.showModal({
title: this.items[this.current].value,
editable:this.editableSelect,
placeholderText:placeholderTextVal,
content: contentVal,
showCancel: this.showCancelSelect,
cancelText:cancelTextVal,
cancelColor:cancelColorVal,
confirmText:confirmTextVal,
confirmColor:confirmColorVal,
success:function(res){
title: this.items[this.current].value,
editable: this.editableSelect,
placeholderText: placeholderTextVal,
content: contentVal,
showCancel: this.showCancelSelect,
cancelText: cancelTextVal,
cancelColor: cancelColorVal,
confirmText: confirmTextVal,
confirmColor: confirmColorVal,
success: function (res) {
this.exeRet = JSON.stringify(res)
},
fail:function(res){
fail: function (res) {
this.exeRet = JSON.stringify(res)
}
})
}
}
}
}
}
}
</script>
\ No newline at end of file
pages/API/navigator/navigator.uvue
浏览文件 @ 19359274
<template>
<scroll-view>
<page-head title="navigate"></page-head>
<view class="uni-padding-wrap uni-common-mt uni-common-mb">
<view class="direction-row">
<text class="label">onLoad触发时间戳:</text>
<text>{{ onLoadTime }}</text>
</view>
<view class="direction-row">
<text class="label">onShow触发时间戳:</text>
<text>{{ onShowTime }}</text>
</view>
<view class="direction-row">
<text class="label">onReady触发时间戳:</text>
<text>{{ onReadyTime }}</text>
</view>
<view class="direction-row">
<text class="label">onHide触发时间戳:</text>
<text>{{ onHideTime }}</text>
</view>
<view class="direction-row">
<text class="label">onBackPress触发时间戳:</text>
<text>见控制台</text>
</view>
<view class="direction-row">
<text class="label">onUnload触发时间戳:</text>
<text>见控制台</text>
</view>
<view class="uni-btn-v">
<button @tap="navigateTo" class="uni-btn">
跳转新页面，并传递数据
</button>
<button @tap="navigateBack" class="uni-btn">返回上一页</button>
<button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
<button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
<button @tap="reLaunch" class="uni-btn">关闭所有页面，打开首页</button>
<button @tap="customAnimation" class="uni-btn">
使用自定义动画打开页面
</button>
<button @tap="navigateToErrorPage" class="uni-btn">
打开不存在的页面
</button>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head title="navigate"></page-head>
<view class="uni-padding-wrap uni-common-mt uni-common-mb">
<view class="direction-row">
<text class="label">onLoad触发时间戳:</text>
<text>{{ onLoadTime }}</text>
</view>
<view class="direction-row">
<text class="label">onShow触发时间戳:</text>
<text>{{ onShowTime }}</text>
</view>
<view class="direction-row">
<text class="label">onReady触发时间戳:</text>
<text>{{ onReadyTime }}</text>
</view>
<view class="direction-row">
<text class="label">onHide触发时间戳:</text>
<text>{{ onHideTime }}</text>
</view>
<view class="direction-row">
<text class="label">onBackPress触发时间戳:</text>
<text>见控制台</text>
</view>
<view class="direction-row">
<text class="label">onUnload触发时间戳:</text>
<text>见控制台</text>
</view>
<view class="uni-btn-v">
<button @tap="navigateTo" class="uni-btn">
跳转新页面，并传递数据
</button>
<button @tap="navigateBack" class="uni-btn">返回上一页</button>
<button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
<button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
<button @tap="reLaunch" class="uni-btn">
关闭所有页面，打开首页
</button>
<button @tap="customAnimation" class="uni-btn">
使用自定义动画打开页面
</button>
<button @tap="navigateToErrorPage" class="uni-btn">
打开不存在的页面
</button>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
......
pages/API/navigator/new-page/new-page-2.uvue
浏览文件 @ 19359274
<template>
<scroll-view class="uni-padding-wrap">
<view class="container">
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="uni-padding-wrap container">
<page-head title="new-page-2" />
<button @click="scrollToBottom">scrollToBottom</button>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
......
pages/API/page-scroll-to/page-scroll-to.uvue
浏览文件 @ 19359274
<template>
<view class="uni-padding-wrap">
<page-head :title="title"></page-head>
<button type="default" class="btn-scrollTo" @click="scrollTo">scrollTo</button>
<button type="default" class="btn-scrollToElement" @click="scrollToElement">scrollToElement</button>
<view class="uni-list" v-for="(_, index) in 10" :key="index">
<view class="uni-list-cell list-item">{{ index }}</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="uni-padding-wrap">
<page-head :title="title"></page-head>
<button type="default" class="btn-scrollTo" @click="scrollTo">
scrollTo
</button>
<button
type="default"
class="btn-scrollToElement"
@click="scrollToElement"
>
scrollToElement
</button>
<view class="uni-list" v-for="(_, index) in 10" :key="index">
<view class="uni-list-cell list-item">{{ index }}</view>
</view>
<view class="custom-element">scrollTo-custom-element</view>
<view class="uni-list" v-for="(_, index2) in 10" :key="index2">
<view class="uni-list-cell list-item">{{ index2 }}</view>
</view>
</view>
<view class="custom-element">scrollTo-custom-element</view>
<view class="uni-list" v-for="(_, index2) in 10" :key="index2">
<view class="uni-list-cell list-item">{{ index2 }}</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {
title: 'pageScrollTo'
}
},
methods: {
scrollTo() {
uni.pageScrollTo({
scrollTop: 100,
duration: 300,
success: () => {
console.log('success')
}
})
},
scrollToElement() {
uni.pageScrollTo({
selector: '.custom-element',
duration: 300,
success: () => {
console.log('success')
}
})
}
export default {
data() {
return {
title: 'pageScrollTo',
}
}
},
methods: {
scrollTo() {
uni.pageScrollTo({
scrollTop: 100,
duration: 300,
success: () => {
console.log('success')
},
})
},
scrollToElement() {
uni.pageScrollTo({
selector: '.custom-element',
duration: 300,
success: () => {
console.log('success')
},
})
},
},
}
</script>
<style>
.list-item {
height: 100px;
padding-left: 30px;
}
</style>
\ No newline at end of file
.list-item {
height: 100px;
padding-left: 30px;
}
</style>
pages/API/preview-image/preview-image.uvue
浏览文件 @ 19359274
<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>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type ItemType = {
value: string,
name: string
}
type ItemType = {
value: string,
name: string
}
export default {
data() {
return {
imageList: ["https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", "/static/uni.png"],
indicator: [{
value: "default",
name: "圆点"
}, {
value: "number",
name: "数字"
}, {
value: "none",
name: "不显示"
}] as ItemType[],
currentIndicator: "default",
isLoop: true
}
export default {
data() {
return {
imageList: ["https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png", "/static/uni.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(_) {
}
})
},
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(_) {
}
})
},
onIndicatorChanged(e: RadioGroupChangeEvent) {
this.currentIndicator = e.detail.value
},
onCheckboxChange(_: CheckboxGroupChangeEvent) {
this.isLoop = !this.isLoop
}
onIndicatorChanged(e: RadioGroupChangeEvent) {
this.currentIndicator = e.detail.value
},
onCheckboxChange(_: CheckboxGroupChangeEvent) {
this.isLoop = !this.isLoop
}
}
}
</script>
<style>
.text-desc {
margin-top: 32rpx;
margin-left: 16rpx;
margin-bottom: 32rpx;
font-weight: bold;
}
.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-ct {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
margin-left: 14rpx;
width: 210rpx;
height: 210rpx;
}
.cell {
margin-left: 14rpx;
width: 210rpx;
height: 210rpx;
}
.cell-choose-image {
border-width: 1px;
border-color: lightgray;
}
.cell-choose-image {
border-width: 1px;
border-color: lightgray;
}
.indicator-it {
margin: 16rpx;
}
</style>
\ No newline at end of file
.indicator-it {
margin: 16rpx;
}
</style>
pages/API/storage/storage.uvue
浏览文件 @ 19359274
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-line">
<view class="uni-list-cell-left">
<view class="uni-label">key</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
@input="keyChange" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">value</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
@input="dataChange" />
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="uni-btn" type="primary" @tap="getStorageInfo">获取存储概述-同步</button>
<button class="uni-btn" @tap="getStorageInfoSync">获取存储概述-异步</button>
</view>
<text>{{storageInfo}}</text>
<view class="uni-flex uni-row">
<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="strMock">填充字符串</button>
<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="complexMock">填充复杂对象</button>
</view>
<view class="uni-flex uni-row">
<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="numberMock">填充整型</button>
<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="floatMock">填充浮点型</button>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据-异步</button>
<button class="uni-btn" @tap="getStorage">读取数据-异步</button>
<button class="uni-btn" @tap="removeStorage">移除数据-异步</button>
<button class="uni-btn" @tap="clearStorage">清理数据-异步</button>
</view>
<view class="uni-btn-v">
<button type="primary" class="uni-btn btn-setstorage" @tap="setStorageSync">存储数据-同步</button>
<button class="uni-btn" @tap="getStorageSync">读取数据-同步</button>
<button class="uni-btn" @tap="removeStorageSync">移除数据-同步</button>
<button class="uni-btn" @tap="clearStorageSync">清理数据-同步</button>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-line">
<view class="uni-list-cell-left">
<view class="uni-label">key</view>
</view>
<view class="uni-list-cell-db">
<input
class="uni-input"
type="text"
placeholder="请输入key"
name="key"
:value="key"
@input="keyChange"
/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">value</view>
</view>
<view class="uni-list-cell-db">
<input
class="uni-input"
type="text"
placeholder="请输入value"
name="data"
:value="data"
@input="dataChange"
/>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="uni-btn" type="primary" @tap="getStorageInfo">
获取存储概述-同步
</button>
<button class="uni-btn" @tap="getStorageInfoSync">
获取存储概述-异步
</button>
</view>
<text>{{ storageInfo }}</text>
<view class="uni-flex uni-row">
<button
type="default"
style="-webkit-flex: 1; flex: 1"
@tap="strMock"
>
填充字符串
</button>
<button
type="default"
style="-webkit-flex: 1; flex: 1"
@tap="complexMock"
>
填充复杂对象
</button>
</view>
<view class="uni-flex uni-row">
<button
type="default"
style="-webkit-flex: 1; flex: 1"
@tap="numberMock"
>
填充整型
</button>
<button
type="default"
style="-webkit-flex: 1; flex: 1"
@tap="floatMock"
>
填充浮点型
</button>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button
type="primary"
class="uni-btn btn-setstorage"
@tap="setStorage"
>
存储数据-异步
</button>
<button class="uni-btn" @tap="getStorage">读取数据-异步</button>
<button class="uni-btn" @tap="removeStorage">移除数据-异步</button>
<button class="uni-btn" @tap="clearStorage">清理数据-异步</button>
</view>
</view>
</view>
</view>
<view class="uni-btn-v">
<button
type="primary"
class="uni-btn btn-setstorage"
@tap="setStorageSync"
>
存储数据-同步
</button>
<button class="uni-btn" @tap="getStorageSync">读取数据-同步</button>
<button class="uni-btn" @tap="removeStorageSync">
移除数据-同步
</button>
<button class="uni-btn" @tap="clearStorageSync">
清理数据-同步
</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {
title: 'get/set/clearStorage',
key: '',
data: '' as any,
storageInfo: ''
}
},
methods: {
getStorageInfo(){
uni.getStorageInfo({
success: function (res) {
this.storageInfo = JSON.stringify(res)
}
});
},
getStorageInfoSync(){
try {
const res = uni.getStorageInfoSync();
this.storageInfo = JSON.stringify(res)
} catch (e) {
// error
console.log(e)
}
},
strMock() {
this.key = "key_" + Math.random();
this.data = "测试字符串数据，长度为16个字符"
},
complexMock() {
this.key = "key_" + Math.random();
let jsonObj = {
'name': '张三',
'age': 12,
'classMate': [{
'id': 1001,
'name': '李四'
}, {
'id': 1002,
'name': 'jack ma'
}]
}
this.data = jsonObj
},
numberMock() {
this.key = "key_" + Math.random();
this.data = 10011
},
floatMock() {
this.key = "key_" + Math.random();
this.data = 3.1415926535893384626
},
export default {
data() {
return {
title: 'get/set/clearStorage',
key: '',
data: '' as any,
storageInfo: '',
}
},
methods: {
getStorageInfo() {
uni.getStorageInfo({
success: function (res) {
this.storageInfo = JSON.stringify(res)
},
})
},
getStorageInfoSync() {
try {
const res = uni.getStorageInfoSync()
this.storageInfo = JSON.stringify(res)
} catch (e) {
// error
console.log(e)
}
},
strMock() {
this.key = 'key_' + Math.random()
this.data = '测试字符串数据，长度为16个字符'
},
complexMock() {
this.key = 'key_' + Math.random()
let jsonObj = {
name: '张三',
age: 12,
classMate: [
{
id: 1001,
name: '李四',
},
{
id: 1002,
name: 'jack ma',
},
],
}
this.data = jsonObj
},
numberMock() {
this.key = 'key_' + Math.random()
this.data = 10011
},
floatMock() {
this.key = 'key_' + Math.random()
this.data = 3.1415926535893384626
},
keyChange: function (e : InputEvent) {
this.key = e.detail.value
},
dataChange: function (e : InputEvent) {
this.data = e.detail.value
},
getStorage: function () {
var key = this.key;
if (key.length == 0) {
uni.showModal({
title: '读取数据失败',
content: "key 不能为空",
showCancel: false
})
} else {
uni.getStorage({
key: key,
success: (res) => {
uni.showModal({
title: '读取数据成功',
content: "data: '" + res.data + "'",
showCancel: false
})
},
fail: () => {
uni.showModal({
title: '读取数据失败',
content: "找不到 key 对应的数据",
showCancel: false
})
}
})
}
},
getStorageSync: function () {
var key = this.key;
if (key.length == 0) {
uni.showModal({
title: '读取数据失败',
content: "key 不能为空",
showCancel: false
})
} else {
let ret = uni.getStorageSync(key)
uni.showModal({
title: '读取数据成功',
content: "data: '" + ret + "'",
showCancel: false
})
}
},
setStorage: function () {
var key = this.key
var data = this.data
if (key.length == 0) {
uni.showModal({
title: '保存数据失败',
content: 'key 不能为空',
showCancel: false
})
} else {
uni.setStorage({
key: key,
data: data,
success: () => {
uni.showModal({
title: '存储数据成功',
showCancel: false
})
},
fail: () => {
uni.showModal({
title: '储存数据失败!',
showCancel: false
})
}
})
}
},
setStorageSync: function () {
var key = this.key
var data = this.data
if (key.length == 0) {
uni.showModal({
title: '保存数据失败',
content: 'key 不能为空',
showCancel: false
})
} else {
uni.setStorageSync(key,data)
uni.showModal({
title: '存储数据成功',
showCancel: false
})
}
},
removeStorage: function () {
uni.removeStorage({
key:this.key,
success: () => {
uni.showModal({
title: '移除数据成功',
showCancel: false
})
},
fail: () => {
uni.showModal({
title: '移除数据失败',
showCancel: false
})
}
})
},
removeStorageSync: function () {
uni.removeStorageSync(this.key)
uni.showModal({
title: '移除数据成功',
showCancel: false
})
},
clearStorage: function () {
this.key = ''
this.data = ''
uni.clearStorage({
success:function(_){
uni.showModal({
title: '清除数据成功',
showCancel: false
})
},
fail:function(_){
uni.showModal({
title: '清除数据失败',
showCancel: false
})
},
})
},
clearStorageSync: function () {
this.key = ''
this.data = ''
uni.clearStorageSync()
uni.showModal({
title: '清除数据成功',
content: ' ',
showCancel: false
})
}
}
}
keyChange: function (e: InputEvent) {
this.key = e.detail.value
},
dataChange: function (e: InputEvent) {
this.data = e.detail.value
},
getStorage: function () {
var key = this.key
if (key.length == 0) {
uni.showModal({
title: '读取数据失败',
content: 'key 不能为空',
showCancel: false,
})
} else {
uni.getStorage({
key: key,
success: (res) => {
uni.showModal({
title: '读取数据成功',
content: "data: '" + res.data + "'",
showCancel: false,
})
},
fail: () => {
uni.showModal({
title: '读取数据失败',
content: '找不到 key 对应的数据',
showCancel: false,
})
},
})
}
},
getStorageSync: function () {
var key = this.key
if (key.length == 0) {
uni.showModal({
title: '读取数据失败',
content: 'key 不能为空',
showCancel: false,
})
} else {
let ret = uni.getStorageSync(key)
uni.showModal({
title: '读取数据成功',
content: "data: '" + ret + "'",
showCancel: false,
})
}
},
setStorage: function () {
var key = this.key
var data = this.data
if (key.length == 0) {
uni.showModal({
title: '保存数据失败',
content: 'key 不能为空',
showCancel: false,
})
} else {
uni.setStorage({
key: key,
data: data,
success: () => {
uni.showModal({
title: '存储数据成功',
showCancel: false,
})
},
fail: () => {
uni.showModal({
title: '储存数据失败!',
showCancel: false,
})
},
})
}
},
setStorageSync: function () {
var key = this.key
var data = this.data
if (key.length == 0) {
uni.showModal({
title: '保存数据失败',
content: 'key 不能为空',
showCancel: false,
})
} else {
uni.setStorageSync(key, data)
uni.showModal({
title: '存储数据成功',
showCancel: false,
})
}
},
removeStorage: function () {
uni.removeStorage({
key: this.key,
success: () => {
uni.showModal({
title: '移除数据成功',
showCancel: false,
})
},
fail: () => {
uni.showModal({
title: '移除数据失败',
showCancel: false,
})
},
})
},
removeStorageSync: function () {
uni.removeStorageSync(this.key)
uni.showModal({
title: '移除数据成功',
showCancel: false,
})
},
clearStorage: function () {
this.key = ''
this.data = ''
uni.clearStorage({
success: function (_) {
uni.showModal({
title: '清除数据成功',
showCancel: false,
})
},
fail: function (_) {
uni.showModal({
title: '清除数据失败',
showCancel: false,
})
},
})
},
clearStorageSync: function () {
this.key = ''
this.data = ''
uni.clearStorageSync()
uni.showModal({
title: '清除数据成功',
content: ' ',
showCancel: false,
})
},
},
}
</script>
<style>
.btn-setstorage {
background-color: #007aff;
color: #ffffff;
}
.btn-setstorage {
background-color: #007aff;
color: #ffffff;
}
.button-sp-area {
flex-direction: row;
margin: 0 auto;
}
</style>
\ No newline at end of file
.button-sp-area {
flex-direction: row;
margin: 0 auto;
}
</style>
pages/API/upload-file/upload-file.uvue
浏览文件 @ 19359274
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="demo">
<image v-if="imageSrc" :src="imageSrc" class="image" mode="widthFix"></image>
<view v-else class="uni-hello-addfile" @click="chooseImage">+ 选择图片</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="demo">
<image
v-if="imageSrc"
:src="imageSrc"
class="image"
mode="widthFix"
></image>
<view v-else class="uni-hello-addfile" @click="chooseImage"
>+ 选择图片</view
>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
import UploadTask from 'uts.sdk.modules.DCloudUniNetwork.UploadTask';
export default {
data() {
return {
title: 'uploadFile',
imageSrc: '',
task: null as UploadTask | null,
pageVisible: false
}
},
onLoad() {
this.pageVisible = true;
},
onUnload() {
this.imageSrc = '';
this.pageVisible = false;
uni.hideLoading();
this.task?.abort();
},
methods: {
chooseImage: function() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
console.log('chooseImage success, temp path is', res.tempFilePaths[0])
var imageSrc = res.tempFilePaths[0]
uni.showLoading({
title: '上传中'
})
this.task = uni.uploadFile({
url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
filePath: imageSrc,
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
if (this.pageVisible) {
console.log('uploadImage success, res is:', res)
uni.hideLoading();
uni.showToast({
title: '上传成功',
icon: 'success',
duration: 1000
})
this.imageSrc = imageSrc
}
},
fail: (err) => {
if (this.pageVisible) {
console.log('uploadImage fail', err);
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
},
});
},
fail: (err) => {
console.log('chooseImage fail', err)
}
})
}
import UploadTask from 'uts.sdk.modules.DCloudUniNetwork.UploadTask';
export default {
data() {
return {
title: 'uploadFile',
imageSrc: '',
task: null as UploadTask | null,
pageVisible: false
}
},
onLoad() {
this.pageVisible = true;
},
onUnload() {
this.imageSrc = '';
this.pageVisible = false;
uni.hideLoading();
this.task?.abort();
},
methods: {
chooseImage: function() {
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
console.log('chooseImage success, temp path is', res.tempFilePaths[0])
var imageSrc = res.tempFilePaths[0]
uni.showLoading({
title: '上传中'
})
this.task = uni.uploadFile({
url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
filePath: imageSrc,
name: 'file',
formData: {
'user': 'test'
},
success: (res) => {
if (this.pageVisible) {
console.log('uploadImage success, res is:', res)
uni.hideLoading();
uni.showToast({
title: '上传成功',
icon: 'success',
duration: 1000
})
this.imageSrc = imageSrc
}
},
fail: (err) => {
if (this.pageVisible) {
console.log('uploadImage fail', err);
uni.hideLoading();
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
},
});
},
fail: (err) => {
console.log('chooseImage fail', err)
}
})
}
}
}
</script>
<style>
.image {
width: 100%;
}
.image {
width: 100%;
}
.demo {
background: #FFF;
padding: 50rpx;
justify-content: center;
align-items: center;
}
.demo {
background: #fff;
padding: 50rpx;
justify-content: center;
align-items: center;
}
.uni-hello-addfile {
text-align: center;
line-height: 300rpx;
background: #FFF;
padding: 50rpx;
margin-top: 10px;
font-size: 38rpx;
color: #808080;
}
</style>
\ No newline at end of file
.uni-hello-addfile {
text-align: center;
line-height: 300rpx;
background: #fff;
padding: 50rpx;
margin-top: 10px;
font-size: 38rpx;
color: #808080;
}
</style>
pages/CSS/background/background-color.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>background-color: red</text>
<view class="common" style="background-color: red;"></view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>background-color: red</text>
<view class="common" style="background-color: red"></view>
</view>
<view>
<text>background-color: #ff0000</text>
<view class="common" style="background-color: #ff0000;"></view>
</view>
<view>
<text>background-color: #f00</text>
<view class="common" style="background-color: #f00;"></view>
</view>
<view>
<text>background-color: #ff0000</text>
<view class="common" style="background-color: #ff0000"></view>
</view>
<view>
<text>background-color: rgb(255, 0, 0)</text>
<view class="common" style="background-color: rgb(255, 0, 0);"></view>
</view>
<view>
<text>background-color: rgba(255, 0, 0, 0.5)</text>
<view class="common" style="background-color: rgba(255, 0, 0, 0.5);"></view>
</view>
</view>
</template>
<view>
<text>background-color: #f00</text>
<view class="common" style="background-color: #f00"></view>
</view>
<script>
<view>
<text>background-color: rgb(255, 0, 0)</text>
<view class="common" style="background-color: rgb(255, 0, 0)"></view>
</view>
</script>
<view>
<text>background-color: rgba(255, 0, 0, 0.5)</text>
<view
class="common"
style="background-color: rgba(255, 0, 0, 0.5)"
></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.common {
width: 500rpx;
height: 500rpx;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
}
</style>
pages/CSS/border/border-color.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>border-color: red</text>
<view class="common" style="border-width: 10rpx;border-color: red;"></view>
</view>
<view>
<text>border-left-color: red</text>
<view class="common" style="border-left-width: 10rpx;border-left-color: red;"></view>
</view>
<view>
<text>border-top-color: green</text>
<view class="common" style="border-top-width: 10rpx;border-top-color: green;"></view>
</view>
<view>
<text>border-right-color: yellow</text>
<view class="common" style="border-right-width: 10rpx;border-right-color: yellow;"></view>
</view>
<view>
<text>border-bottom-color: blue</text>
<view class="common" style="border-bottom-width: 10rpx;border-bottom-color: blue;"></view>
</view>
</view>
</template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>border-color: red</text>
<view
class="common"
style="border-width: 10rpx; border-color: red"
></view>
</view>
<view>
<text>border-left-color: red</text>
<view
class="common"
style="border-left-width: 10rpx; border-left-color: red"
></view>
</view>
<script>
<view>
<text>border-top-color: green</text>
<view
class="common"
style="border-top-width: 10rpx; border-top-color: green"
></view>
</view>
</script>
<view>
<text>border-right-color: yellow</text>
<view
class="common"
style="border-right-width: 10rpx; border-right-color: yellow"
></view>
</view>
<view>
<text>border-bottom-color: blue</text>
<view
class="common"
style="border-bottom-width: 10rpx; border-bottom-color: blue"
></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
pages/CSS/border/border-radius.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>border-radius: 20rpx</text>
<view class="common" style="border-radius: 20rpx;"></view>
</view>
<view>
<text>border-top-left-radius: 20rpx</text>
<view class="common" style="border-top-left-radius: 20rpx;"></view>
</view>
<view>
<text>border-top-right-radius: 20rpx</text>
<view class="common" style="border-top-right-radius: 20rpx;"></view>
</view>
<view>
<text>border-bottom-left-radius: 20rpx</text>
<view class="common" style="border-bottom-left-radius: 20rpx;"></view>
</view>
<view>
<text>border-bottom-right-radius: 20rpx</text>
<view class="common" style="border-bottom-right-radius: 20rpx;"></view>
</view>
</view>
</template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>border-radius: 20rpx</text>
<view class="common" style="border-radius: 20rpx"></view>
</view>
<view>
<text>border-top-left-radius: 20rpx</text>
<view class="common" style="border-top-left-radius: 20rpx"></view>
</view>
<script>
<view>
<text>border-top-right-radius: 20rpx</text>
<view class="common" style="border-top-right-radius: 20rpx"></view>
</view>
</script>
<view>
<text>border-bottom-left-radius: 20rpx</text>
<view class="common" style="border-bottom-left-radius: 20rpx"></view>
</view>
<view>
<text>border-bottom-right-radius: 20rpx</text>
<view class="common" style="border-bottom-right-radius: 20rpx"></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
pages/CSS/border/border-style.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>border-style: dashed</text>
<view class="common" style="border-width: 10rpx;border-style: dashed;"></view>
</view>
<view>
<text>border-left-style: dashed</text>
<view class="common" style="border-left-width: 10rpx;border-left-style: dashed;"></view>
</view>
<view>
<text>border-top-style: dashed</text>
<view class="common" style="border-top-width: 10rpx;border-top-style: dashed;"></view>
</view>
<view>
<text>border-right-style: dotted</text>
<view class="common" style="border-right-width: 10rpx;border-right-style: dotted;"></view>
</view>
<view>
<text>border-bottom-style: dotted</text>
<view class="common" style="border-bottom-width: 10rpx;border-bottom-style: dotted;"></view>
</view>
</view>
</template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>border-style: dashed</text>
<view
class="common"
style="border-width: 10rpx; border-style: dashed"
></view>
</view>
<view>
<text>border-left-style: dashed</text>
<view
class="common"
style="border-left-width: 10rpx; border-left-style: dashed"
></view>
</view>
<script>
<view>
<text>border-top-style: dashed</text>
<view
class="common"
style="border-top-width: 10rpx; border-top-style: dashed"
></view>
</view>
</script>
<view>
<text>border-right-style: dotted</text>
<view
class="common"
style="border-right-width: 10rpx; border-right-style: dotted"
></view>
</view>
<view>
<text>border-bottom-style: dotted</text>
<view
class="common"
style="border-bottom-width: 10rpx; border-bottom-style: dotted"
></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
pages/CSS/border/border-width.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>border-width: 10rpx</text>
<view class="common" style="border-width: 10rpx;"></view>
</view>
<view>
<text>border-left-width: 10rpx</text>
<view class="common" style="border-left-width: 10rpx;"></view>
</view>
<view>
<text>border-top-width: 20rpx</text>
<view class="common" style="border-top-width: 20rpx;"></view>
</view>
<view>
<text>border-right-width: 30rpx</text>
<view class="common" style="border-right-width: 30rpx;"></view>
</view>
<view>
<text>border-bottom-width: 40rpx</text>
<view class="common" style="border-bottom-width: 40rpx;"></view>
</view>
</view>
</template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>border-width: 10rpx</text>
<view class="common" style="border-width: 10rpx"></view>
</view>
<view>
<text>border-left-width: 10rpx</text>
<view class="common" style="border-left-width: 10rpx"></view>
</view>
<script>
<view>
<text>border-top-width: 20rpx</text>
<view class="common" style="border-top-width: 20rpx"></view>
</view>
</script>
<view>
<text>border-right-width: 30rpx</text>
<view class="common" style="border-right-width: 30rpx"></view>
</view>
<view>
<text>border-bottom-width: 40rpx</text>
<view class="common" style="border-bottom-width: 40rpx"></view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
pages/CSS/box-shadow/box-shadow.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 10px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: -5px -5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 10px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: inset -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset -5px -5px 5px black;"></view>
</view>
</view>
<view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px black"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 10px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 125rpx;box-shadow: 5px 5px 5px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="border-radius: 125rpx;box-shadow: -5px -5px 5px black;"></view>
</view>
</view>
<view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view class="common" style="border-radius: 125rpx;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);"></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 10px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: -5px -5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px black</text>
<view class="backgroundview">
<view class="common" style="box-shadow: inset 5px 5px black"></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 10px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset 5px 10px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: inset 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset 5px 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: inset -5px -5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: inset -5px -5px 5px black"
></view>
</view>
</view>
<view>
<text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view
class="common"
style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 125rpx; box-shadow: 5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 125rpx; box-shadow: 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 10px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 125rpx; box-shadow: 5px 10px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 5px 5px 5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 125rpx; box-shadow: 5px 5px 5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: -5px -5px 5px black</text>
<view class="backgroundview">
<view
class="common"
style="border-radius: 125rpx; box-shadow: -5px -5px 5px black"
></view>
</view>
</view>
<view>
<text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
<view class="backgroundview">
<view
class="common"
style="
border-radius: 125rpx;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
"
></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 250rpx;
height: 250rpx;
background-color: brown;
}
.backgroundview {
width: 500rpx;
height: 500rpx;
background-color: white;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
.common {
width: 250rpx;
height: 250rpx;
background-color: brown;
}
.backgroundview {
width: 500rpx;
height: 500rpx;
background-color: white;
justify-content: center;
align-items: center;
}
</style>
pages/CSS/flex/align-content.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>align-content: center</text>
<view class="common" style="align-content: center;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>align-content: center</text>
<view class="common" style="align-content: center">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-content: flex-start</text>
<view class="common" style="align-content: flex-start;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: flex-start</text>
<view class="common" style="align-content: flex-start">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-content: flex-end</text>
<view class="common" style="align-content: flex-end;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: flex-end</text>
<view class="common" style="align-content: flex-end">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-content: space-between</text>
<view class="common" style="align-content: space-between;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: space-between</text>
<view class="common" style="align-content: space-between">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-content: space-around</text>
<view class="common" style="align-content: space-around;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-content: stretch</text>
<view class="common" style="align-content: stretch;">
<view style="width: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
<view>
<text>align-content: space-around</text>
<view class="common" style="align-content: space-around">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-content: stretch</text>
<view class="common" style="align-content: stretch">
<view style="width: 100rpx; background-color: red"></view>
<view style="width: 100rpx; background-color: green"></view>
<view style="width: 100rpx; background-color: blue"></view>
<view style="width: 100rpx; background-color: red"></view>
<view style="width: 100rpx; background-color: green"></view>
<view style="width: 100rpx; background-color: blue"></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-flow: row wrap;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-flow: row wrap;
}
</style>
pages/CSS/flex/align-items.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>align-items: center</text>
<view class="common" style="align-items: center;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>align-items: center</text>
<view class="common" style="align-items: center">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-items: flex-start</text>
<view class="common" style="align-items: flex-start;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-items: flex-start</text>
<view class="common" style="align-items: flex-start">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-items: flex-end</text>
<view class="common" style="align-items: flex-end;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>align-items: flex-end</text>
<view class="common" style="align-items: flex-end">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>align-items: stretch</text>
<view class="common" style="align-items: stretch;">
<view style="width: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
<view>
<text>align-items: stretch</text>
<view class="common" style="align-items: stretch">
<view style="width: 100rpx; background-color: red"></view>
<view style="width: 100rpx; background-color: green"></view>
<view style="width: 100rpx; background-color: blue"></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-direction: row;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-direction: row;
}
</style>
pages/CSS/flex/flex-basis.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-basis</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex-basis: 300rpx;">
<text>300rpx</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
<view style="flex-grow: 1">
<view>
<text>flex-basis</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="flex-basis: 300rpx">
<text>300rpx</text>
</view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
.common {
width: 100rpx;
height: 100rpx;
background-color: red;
justify-content: center;
align-items: center;
}
</style>
pages/CSS/flex/flex-direction.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-direction: row</text>
<view class="common" style="flex-direction: row;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>flex-direction: row</text>
<view class="common" style="flex-direction: row">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>flex-direction: row-reverse</text>
<view class="common" style="flex-direction: row-reverse;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex-direction: row-reverse</text>
<view class="common" style="flex-direction: row-reverse">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>flex-direction: column</text>
<view class="common" style="flex-direction: column;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex-direction: column</text>
<view class="common" style="flex-direction: column">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>flex-direction: column-reverse</text>
<view class="common" style="flex-direction: column-reverse;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
<view>
<text>flex-direction: column-reverse</text>
<view class="common" style="flex-direction: column-reverse">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
pages/CSS/flex/flex-flow.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-flow: row nowrap</text>
<view class="common" style="flex-flow: row nowrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>flex-flow: row nowrap</text>
<view class="common" style="flex-flow: row nowrap">
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
</view>
</view>
<view>
<text>flex-flow: row wrap</text>
<view class="common" style="flex-flow: row wrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
<view>
<text>flex-flow: row wrap</text>
<view class="common" style="flex-flow: row wrap">
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
</view>
</view>
<view>
<text>flex-flow: column nowrap</text>
<view class="common" style="flex-flow: column nowrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
<view>
<text>flex-flow: column nowrap</text>
<view class="common" style="flex-flow: column nowrap">
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
</view>
</view>
<view>
<text>flex-flow: column wrap</text>
<view class="common" style="flex-flow: column wrap;">
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;flex-shrink: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;flex-shrink: 0;"></view>
</view>
</view>
</view>
<view>
<text>flex-flow: column wrap</text>
<view class="common" style="flex-flow: column wrap">
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: red;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: green;
flex-shrink: 0;
"
></view>
<view
style="
width: 100rpx;
height: 100rpx;
background-color: blue;
flex-shrink: 0;
"
></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
}
</style>
pages/CSS/flex/flex-grow.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-grow</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="background-color: red;flex-grow: 0.5;">
<text>0.5</text>
</view>
<view class="common" style="background-color: green;flex-grow: 1;">
<text>1</text>
</view>
<view class="common" style="background-color: blue;flex-grow: 2">
<text>2</text>
</view>
</view>
</view>
</view>
<view style="flex-grow: 1">
<view>
<text>flex-grow</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="background-color: red; flex-grow: 0.5">
<text>0.5</text>
</view>
<view class="common" style="background-color: green; flex-grow: 1">
<text>1</text>
</view>
<view class="common" style="background-color: blue; flex-grow: 2">
<text>2</text>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
.common {
width: 100rpx;
height: 100rpx;
justify-content: center;
align-items: center;
}
</style>
pages/CSS/flex/flex-shrink.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>flex-shrink</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="background-color: red;flex-shrink: 1;">
<text>1</text>
</view>
<view class="common" style="background-color: green;flex-shrink: 2;">
<text>2</text>
</view>
<view class="common" style="background-color: blue;flex-shrink: 3;">
<text>3</text>
</view>
</view>
</view>
</view>
<view style="flex-grow: 1">
<view>
<text>flex-shrink</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="background-color: red; flex-shrink: 1">
<text>1</text>
</view>
<view class="common" style="background-color: green; flex-shrink: 2">
<text>2</text>
</view>
<view class="common" style="background-color: blue; flex-shrink: 3">
<text>3</text>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style>
.common {
width: 250rpx;
height: 100rpx;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
.common {
width: 250rpx;
height: 100rpx;
justify-content: center;
align-items: center;
}
</style>
pages/CSS/flex/flex.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>flex: 0</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="min-width: 50rpx;flex: 0;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>flex: 0</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="min-width: 50rpx; flex: 0"></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>flex: 1</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex: 1"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex: 1</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="flex: 1"></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>flex: auto</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex: auto;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>flex: auto</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="flex: auto"></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>flex: none</text>
<view style="width: 500rpx;height: 300rpx;background-color: gray;flex-direction: row;">
<view class="common" style="flex: none;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
<view>
<text>flex: none</text>
<view
style="
width: 500rpx;
height: 300rpx;
background-color: gray;
flex-direction: row;
"
>
<view class="common" style="flex: none"></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
background-color: red;
}
</style>
\ No newline at end of file
.common {
width: 100rpx;
height: 100rpx;
background-color: red;
}
</style>
pages/CSS/flex/justify-content.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>justify-content: center</text>
<view class="common" style="justify-content: center;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>justify-content: center</text>
<view class="common" style="justify-content: center">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>justify-content: flex-start</text>
<view class="common" style="justify-content: flex-start;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: flex-start</text>
<view class="common" style="justify-content: flex-start">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>justify-content: flex-end</text>
<view class="common" style="justify-content: flex-end;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: flex-end</text>
<view class="common" style="justify-content: flex-end">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>justify-content: space-between</text>
<view class="common" style="justify-content: space-between;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
<view>
<text>justify-content: space-between</text>
<view class="common" style="justify-content: space-between">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
<view>
<text>justify-content: space-around</text>
<view class="common" style="justify-content: space-around;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</view>
</view>
</view>
<view>
<text>justify-content: space-around</text>
<view class="common" style="justify-content: space-around">
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-direction: row;
}
</style>
\ No newline at end of file
.common {
width: 500rpx;
height: 500rpx;
background-color: gray;
flex-direction: row;
}
</style>
pages/CSS/layout/position.uvue
浏览文件 @ 19359274
<template>
<view style="flex-grow: 1;">
<view>
<text>position: relative</text>
<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view class="common" style="position: relative;">
<text>relative</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</scroll-view>
</view>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view style="flex-grow: 1">
<view>
<text>position: relative</text>
<scroll-view
style="width: 500rpx; height: 500rpx; background-color: gray"
>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view class="common" style="position: relative">
<text>relative</text>
</view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</scroll-view>
</view>
<view>
<text>position: absolute</text>
<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view class="common" style="position: absolute;">
<text>absolute</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</scroll-view>
</view>
<view>
<text>position: absolute</text>
<scroll-view
style="width: 500rpx; height: 500rpx; background-color: gray"
>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view class="common" style="position: absolute">
<text>absolute</text>
</view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</scroll-view>
</view>
<view>
<text>position: fixed</text>
<scroll-view style="width: 500rpx;height: 500rpx;background-color: gray;">
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view class="common" style="position: fixed;">
<text>fixed</text>
</view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: red;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: green;"></view>
<view style="width: 100rpx;height: 100rpx;background-color: blue;"></view>
</scroll-view>
</view>
</view>
<view>
<text>position: fixed</text>
<scroll-view
style="width: 500rpx; height: 500rpx; background-color: gray"
>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view class="common" style="position: fixed">
<text>fixed</text>
</view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: red"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: green"
></view>
<view
style="width: 100rpx; height: 100rpx; background-color: blue"
></view>
</scroll-view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
</script>
<style>
.common {
width: 100rpx;
height: 100rpx;
background-color: green;
top: 50rpx;
left: 50rpx;
justify-content: center;
align-items: center;
}
</style>
\ No newline at end of file
.common {
width: 100rpx;
height: 100rpx;
background-color: green;
top: 50rpx;
left: 50rpx;
justify-content: center;
align-items: center;
}
</style>
pages/CSS/transform/transform.uvue
浏览文件 @ 19359274
<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>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {}
},
methods: {
}
}
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
.baseStyle {
background-color: cadetblue;
margin: 10rpx;
width: 300rpx;
height: 300rpx;
align-items: center;
flex: 1;
justify-content: center;
}
</style>
pages/CSS/transition/transition.uvue
浏览文件 @ 19359274
<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>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</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
},
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
}
}
}
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;
}
.container {
margin: 15rpx;
background-color: white;
}
.text {
margin-top: 20rpx;
margin-bottom: 32rpx;
}
.base-style {
width: 400rpx;
height: 400rpx;
background-color: brown;
}
.base-style {
width: 400rpx;
height: 400rpx;
background-color: brown;
}
.transition-width {
transition-property: width;
transition-duration: 1000;
}
.transition-width {
transition-property: width;
transition-duration: 1000;
}
.transition-margin {
transition-property: margin-left, margin-top;
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-padding {
transition-property: padding-left, padding-top;
transition-duration: 1000;
}
.transition-background {
transition-property: background-color, opacity;
transition-duration: 1000;
}
.transition-background {
transition-property: background-color, opacity;
transition-duration: 1000;
}
.transition-transform {
transition-property: transform;
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-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
.transition-position {
transition-property: left;
transition-duration: 1000;
}
</style>
pages/component/button/button.uvue
浏览文件 @ 19359274
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<button :type="type" :size="size" :plain="plain" :disabled="disabled" class="button test-button">页面主操作
Normal</button>
<!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
<button type="primary" :disabled="true" class="button">页面主操作 Disabled</button>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<button
:type="type"
:size="size"
:plain="plain"
:disabled="disabled"
class="button test-button"
>
页面主操作 Normal
</button>
<!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
<button type="primary" :disabled="true" class="button">
页面主操作 Disabled
</button>
<button type="default" class="button default-button" @click="addCount">页面次要操作 Normal</button>
<button type="default" :disabled="true" class="button disabled-button">页面次要操作 Disabled</button>
<button type="default" class="button default-button" @click="addCount">
页面次要操作 Normal
</button>
<button type="default" :disabled="true" class="button disabled-button">
页面次要操作 Disabled
</button>
<button type="warn" class="button">警告类操作 Normal</button>
<button type="warn" :disabled="true" class="button">警告类操作 Disabled</button>
<button type="warn" class="button">警告类操作 Normal</button>
<button type="warn" :disabled="true" class="button">
警告类操作 Disabled
</button>
<view class="button-sp-area">
<button type="primary" :plain="true" class="button text-button">{{text}}</button>
<button type="primary" :disabled="true" :plain="true" class="button">
不可点击的按钮
</button>
<view class="button-sp-area">
<button type="primary" :plain="true" class="button text-button">
{{ text }}
</button>
<button type="primary" :disabled="true" :plain="true" class="button">
不可点击的按钮
</button>
<button type="default" :plain="true" class="button">按钮 plain背景镂空</button>
<button type="default" :disabled="true" :plain="true" class="button">按钮 Disabled</button>
<button type="default" :plain="true" class="button">
按钮 plain背景镂空
</button>
<button type="default" :disabled="true" :plain="true" class="button">
按钮 Disabled
</button>
<view class="uni-flex uni-row">
<button class="button mini-btn" type="primary" size="mini">按钮 mini</button>
<button class="button mini-btn" type="default" size="mini">按钮 mini</button>
<button class="button mini-btn" type="warn" size="mini">按钮 mini</button>
</view>
</view>
<view class="uni-flex uni-row">
<button class="button mini-btn" type="primary" size="mini">
按钮 mini
</button>
<button class="button mini-btn" type="default" size="mini">
按钮 mini
</button>
<button class="button mini-btn" type="warn" size="mini">
按钮 mini
</button>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {
title: 'button',
loading: false,
_timer: 0,
text: '文字来自data绑定',
type: 'primary',
size: 'default',
plain: false,
disabled: false,
count: 0
}
},
onShow() {
// this.clearTimer();
// this._timer = setTimeout(() => {
// // this.loading = true;
// }, 300)
},
onUnload() {
// this.clearTimer();
// this.loading = false;
},
methods: {
// clearTimer() {
// if (this._timer != 0) {
// clearTimeout(this._timer);
// }
// }
addCount() {
this.count++
}
},
export default {
data() {
return {
title: 'button',
loading: false,
_timer: 0,
text: '文字来自data绑定',
type: 'primary',
size: 'default',
plain: false,
disabled: false,
count: 0,
}
},
onShow() {
// this.clearTimer();
// this._timer = setTimeout(() => {
// // this.loading = true;
// }, 300)
},
onUnload() {
// this.clearTimer();
// this.loading = false;
},
methods: {
// clearTimer() {
// if (this._timer != 0) {
// clearTimeout(this._timer);
// }
// }
addCount() {
this.count++
},
},
}
</script>
<style>
.button {
margin-top: 30rpx;
}
.button {
margin-top: 30rpx;
}
.button-sp-area {
margin: 0 auto;
width: 70%;
}
.button-sp-area {
margin: 0 auto;
width: 70%;
}
.mini-btn {
margin-right: 10rpx;
margin-bottom: 30rpx;
}
</style>
\ No newline at end of file
.mini-btn {
margin-right: 10rpx;
margin-bottom: 30rpx;
}
</style>
pages/component/input/input.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/component/radio/radio.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/component/slider-100/slider-100.uvue
浏览文件 @ 19359274
<template>
<view class="uni-padding-wrap">
<slider class="first-slider" @changing="sliderChanging" :value="sliderValue"
:backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
:show-value="true" />
<view class="flex-row">
<view class="flex-fill">
<slider v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging" :value="sliderValue"
:block-size="sliderBlockSize" :show-value="true" />
</view>
<view class="flex-fill">
<slider v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging" :value="sliderValue"
:block-size="sliderBlockSize" :show-value="true" />
</view>
<view class="flex-fill">
<slider v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging" :value="sliderValue"
:block-size="sliderBlockSize" :show-value="true" />
</view>
<view class="flex-fill">
<slider v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging" :value="sliderValue"
:block-size="sliderBlockSize" :show-value="true" />
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="uni-padding-wrap">
<slider
class="first-slider"
@changing="sliderChanging"
:value="sliderValue"
:backgroundColor="sliderBackgroundColor"
:activeColor="sliderActiveColor"
:blockColor="sliderBlockColor"
:show-value="true"
/>
<view class="flex-row">
<view class="flex-fill">
<slider
v-for="(_, index1) in 25"
:key="index1"
class="slider"
@changing="sliderChanging"
:value="sliderValue"
:block-size="sliderBlockSize"
:show-value="true"
/>
</view>
<view class="flex-fill">
<slider
v-for="(_, index2) in 25"
:key="index2"
class="slider"
@changing="sliderChanging"
:value="sliderValue"
:block-size="sliderBlockSize"
:show-value="true"
/>
</view>
<view class="flex-fill">
<slider
v-for="(_, index3) in 25"
:key="index3"
class="slider"
@changing="sliderChanging"
:value="sliderValue"
:block-size="sliderBlockSize"
:show-value="true"
/>
</view>
<view class="flex-fill">
<slider
v-for="(_, index4) in 25"
:key="index4"
class="slider"
@changing="sliderChanging"
:value="sliderValue"
:block-size="sliderBlockSize"
:show-value="true"
/>
</view>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="ts">
export default {
data() {
return {
title: 'slider 滑块 x 100',
sliderValue: 50,
sliderBlockSize: 20,
sliderBackgroundColor: '#000000',
sliderActiveColor: '#FFCC33',
sliderBlockColor: '#8A6DE9'
}
},
methods: {
sliderChanging(e : SliderChangeEvent) {
this.sliderValue = e.detail.value
}
export default {
data() {
return {
title: 'slider 滑块 x 100',
sliderValue: 50,
sliderBlockSize: 20,
sliderBackgroundColor: '#000000',
sliderActiveColor: '#FFCC33',
sliderBlockColor: '#8A6DE9',
}
}
},
methods: {
sliderChanging(e: SliderChangeEvent) {
this.sliderValue = e.detail.value
},
},
}
</script>
<style>
.flex-row {
flex-direction: row;
}
.flex-row {
flex-direction: row;
}
.flex-fill {
flex: 1;
}
.flex-fill {
flex: 1;
}
.first-slider {
margin: 12px 0;
background-color: rgba(0, 0, 0, 0.1);
}
.first-slider {
margin: 12px 0;
background-color: rgba(0, 0, 0, 0.1);
}
.slider {
margin: 2px 0.5px;
}
</style>
\ No newline at end of file
.slider {
margin: 2px 0.5px;
}
</style>
pages/component/swiper/swiper.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/component/view/view.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/tabBar/API.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/tabBar/CSS.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/tabBar/component.uvue
浏览文件 @ 19359274
此差异已折叠。
pages/tabBar/template.uvue
浏览文件 @ 19359274
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或