Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6408
Star 112
Fork 189
H
hello uni-app x
提交 ebb8674f 编写于 作者: H hdx
浏览文件
操作

component: 调整 rpx 为 px 基准 750

上级 75e933b2
隐藏空白更改
内联 并排
Showing with 744 addition and 961 deletion
pages/component/button/button.uvue
浏览文件 @ ebb8674f
......@@ -59,7 +59,7 @@
<style>
.main {
padding: 10rpx 0;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
......@@ -67,14 +67,14 @@
.main .list-item {
width: 100%;
height: 200rpx;
height: 100px;
border: 1px solid #666;
}
.custom-btn {
color: #ffffff;
background-color: #1AAD19;
border-color: #1AAD19;
}
.custom-btn {
color: #ffffff;
background-color: #1AAD19;
border-color: #1AAD19;
}
.is-hover {
......@@ -82,4 +82,4 @@
background-color: #179b16;
border-color: #179b16;
}
</style>
</style>
pages/component/checkbox/checkbox.uvue
浏览文件 @ ebb8674f
<script>
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff"
}
},
methods: {
checkboxChange: function (e : CheckboxGroupChangeEvent) {
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : CheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff"
}
},
methods: {
checkboxChange: function (e : CheckboxGroupChangeEvent) {
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : CheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<view class="main">
<checkbox
:disabled="disabled_boolean"
:checked="checked_boolean"
:color="color_input"
:backgroundColor="backgroundColor_input"
:borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input"
:activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input"
@click="checkbox_click"
@touchstart="checkbox_touchstart"
@touchmove="checkbox_touchmove"
@touchcancel="checkbox_touchcancel"
@touchend="checkbox_touchend"
@tap="checkbox_tap"
@longpress="checkbox_longpress"
><text>uni-app-x</text></checkbox
>
<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="checkbox_click" @touchstart="checkbox_touchstart"
@touchmove="checkbox_touchmove" @touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend"
@tap="checkbox_tap" @longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data
:defaultValue="false"
title="当前是否选中，可用来设置默认选中"
@change="change_checked_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否禁用"
@change="change_disabled_boolean"
></boolean-data>
<input-data
defaultValue="#007aff"
title="checkbox的颜色"
type="text"
@confirm="confirm_color_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="checkbox默认的背景颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<input-data
defaultValue="#d1d1d1"
title="checkbox默认的边框颜色"
type="text"
@confirm="confirm_borderColor_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="checkbox选中时的背景颜色"
type="text"
@confirm="confirm_activeBackgroundColor_input"
></input-data>
<input-data
defaultValue="#d1d1d1"
title="checkbox选中时的边框颜色"
type="text"
@confirm="confirm_activeBorderColor_input"
></input-data>
<input-data
defaultValue="#007aff"
title="checkbox的图标颜色，优先级大于color属性"
type="text"
@confirm="confirm_iconColor_input"
></input-data>
<boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#007aff" title="checkbox的图标颜色，优先级大于color属性" type="text"
@confirm="confirm_iconColor_input"></input-data>
</view>
<view>
......@@ -172,33 +127,12 @@ export default {
<text class="uni-title-text"> 默认样式 </text>
</view>
<view>
<checkbox-group
class="uni-flex uni-row checkbox-group"
@change="testChange"
style="flex-wrap: wrap"
>
<checkbox
value="cb"
:checked="checked"
:color="color"
style="margin-right: 30rpx"
class="checkbox cb"
>选中
<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
<checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx" class="checkbox cb">选中
</checkbox>
<checkbox
value="cb1"
style="margin-right: 30rpx"
class="checkbox cb1"
>{{ text }}</checkbox
>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
>禁用</checkbox
>
<checkbox
value="cb3"
style="margin-top: 20rpx"
class="checkbox cb3"
>
<checkbox value="cb1" style="margin-right: 30rpx" class="checkbox cb1">{{ text }}</checkbox>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
<checkbox value="cb3" style="margin-top: 20rpx" class="checkbox cb3">
{{ wrapText }}
</checkbox>
</checkbox-group>
......@@ -208,21 +142,10 @@ export default {
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group">
<checkbox
value="cb1"
:checked="true"
color="#FFCC33"
style="transform: scale(0.7); margin-right: 30rpx"
class="checkbox"
>选中
<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
class="checkbox">选中
</checkbox>
<checkbox
value="cb"
color="#FFCC33"
style="transform: scale(0.7)"
class="checkbox"
>未选中</checkbox
>
<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
</checkbox-group>
</view>
</view>
......@@ -234,14 +157,8 @@ export default {
</view>
<view class="uni-list uni-common-pl">
<checkbox-group @change="checkboxChange" class="checkbox-group">
<checkbox
class="uni-list-cell uni-list-cell-pd checkbox"
v-for="(item, index) in items"
:key="item.value"
:value="item.value"
:checked="item.checked"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
>
<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
:value="item.value" :checked="item.checked" :class="index < items.length - 1 ? 'uni-list-cell-line' : ''">
{{ item.name }}
</checkbox>
</checkbox-group>
......@@ -251,21 +168,21 @@ export default {
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
.uni-list-cell {
justify-content: flex-start;
}
</style>
pages/component/image/image-mode.uvue
浏览文件 @ ebb8674f
<template>
<scroll-view style="flex: 1;">
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的图片缩放模式示例</text>
</view>
<view v-for="(item,index) in data" :key="index">
<text class="uni-subtitle-text">{{item.mode}}: {{item.description}}</text>
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" :mode="item.mode" src="/static/shuijiao.jpg"></image>
</view>
</view>
<scroll-view style="flex: 1;">
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">其他示例</text>
<text class="uni-title-text">支持的图片缩放模式示例</text>
</view>
<view v-for="(item,index) in data" :key="index">
<text class="uni-subtitle-text">{{item.mode}}: {{item.description}}</text>
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" :mode="item.mode" src="/static/shuijiao.jpg"></image>
</view>
</view>
<view class="uni-title">
<text class="uni-title-text">其他示例</text>
</view>
<view>
<text class="uni-subtitle-text">同时设置mode和圆角</text>
<view class="uni-center" style="background:#FFFFFF;">
<image class="image radius" mode="heightFix" src="/static/shuijiao.jpg"></image>
<image class="image radius" mode="heightFix" src="/static/shuijiao.jpg"></image>
</view>
</view>
</view>
</scroll-view>
</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
title: 'image-mode',
data: [
{
mode: 'scaleToFill',
description: '不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'
},
{
mode: 'aspectFit',
description: '保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来'
},
{
mode: 'aspectFill',
description: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'
},
{
mode: 'top',
description: '不缩放图片，只显示图片的顶部区域'
},
{
mode: 'bottom',
description: '不缩放图片，只显示图片的底部区域'
},
{
mode: 'center',
description: '不缩放图片，只显示图片的中间区域'
},
{
mode: 'left',
description: '不缩放图片，只显示图片的左边区域'
},
{
mode: 'right',
description: '不缩放图片，只显示图片的右边区域'
},
{
mode: 'top left',
description: '不缩放图片，只显示图片的左上边区域'
},
{
mode: 'top right',
description: '不缩放图片，只显示图片的右上边区域'
},
{
mode: 'bottom left',
description: '不缩放图片，只显示图片的左下边区域'
},
{
mode: 'bottom right',
description: '不缩放图片，只显示图片的右下边区域'
},
{
mode: 'widthFix',
description: '宽度不变，高度自动变化，保持原图宽高比不变'
},
{
mode: 'heightFix',
description: '高度不变，宽度自动变化，保持原图宽高比不变'
}
] as Array<ImageMode>
}
}
}
type ImageMode = {
mode : string
description : string
}
export default {
data() {
return {
title: 'image-mode',
data: [
{
mode: 'scaleToFill',
description: '不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'
},
{
mode: 'aspectFit',
description: '保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来'
},
{
mode: 'aspectFill',
description: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'
},
{
mode: 'top',
description: '不缩放图片，只显示图片的顶部区域'
},
{
mode: 'bottom',
description: '不缩放图片，只显示图片的底部区域'
},
{
mode: 'center',
description: '不缩放图片，只显示图片的中间区域'
},
{
mode: 'left',
description: '不缩放图片，只显示图片的左边区域'
},
{
mode: 'right',
description: '不缩放图片，只显示图片的右边区域'
},
{
mode: 'top left',
description: '不缩放图片，只显示图片的左上边区域'
},
{
mode: 'top right',
description: '不缩放图片，只显示图片的右上边区域'
},
{
mode: 'bottom left',
description: '不缩放图片，只显示图片的左下边区域'
},
{
mode: 'bottom right',
description: '不缩放图片，只显示图片的右下边区域'
},
{
mode: 'widthFix',
description: '宽度不变，高度自动变化，保持原图宽高比不变'
},
{
mode: 'heightFix',
description: '高度不变，宽度自动变化，保持原图宽高比不变'
}
] as Array<ImageMode>
}
}
}
type ImageMode = {
mode : string
description : string
}
</script>
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
height: 200rpx;
background-color: #eeeeee;
}
.image {
margin: 20px auto;
width: 100px;
height: 100px;
background-color: #eeeeee;
}
.radius {
border-radius: 20rpx;
border-radius: 10px;
}
</style>
pages/component/image/image-path.uvue
浏览文件 @ ebb8674f
......@@ -109,7 +109,7 @@
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
margin: 20px auto;
width: 100px;
}
</style>
pages/component/image/image.uvue
浏览文件 @ ebb8674f
<template>
<view style="flex: 1;">
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" :fade-show="true" mode="widthFix" :src="imageSrc" @error="error"
@load="load"></image>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageFormat">图片格式示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageMode">图片缩放模式示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imagePath">图片路径示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageLarge">大图示例</button>
</view>
</view>
</view>
<view style="flex: 1;">
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" :fade-show="true" mode="widthFix" :src="imageSrc" @error="error" @load="load"></image>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageFormat">图片格式示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageMode">图片缩放模式示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imagePath">图片路径示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageLarge">大图示例</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'image',
imageSrc: "/static/test-image/logo.png",
loadError: false
}
},
methods: {
error(event : ImageErrorEvent) {
this.loadError = true
console.log(event.type, event.detail);
},
load(event : ImageLoadEvent) {
console.log(event.type, event.detail);
},
imageFormat() {
uni.navigateTo({
url: '/pages/component/image/image-format'
});
},
imageMode() {
uni.navigateTo({
url: '/pages/component/image/image-mode'
});
},
imagePath() {
uni.navigateTo({
url: '/pages/component/image/image-path'
});
},
imageLarge() {
uni.navigateTo({
url: '/pages/component/image/image-large'
});
}
}
}
export default {
data() {
return {
title: 'image',
imageSrc: "/static/test-image/logo.png",
loadError: false
}
},
methods: {
error(event : ImageErrorEvent) {
this.loadError = true
console.log(event.type, event.detail);
},
load(event : ImageLoadEvent) {
console.log(event.type, event.detail);
},
imageFormat() {
uni.navigateTo({
url: '/pages/component/image/image-format'
});
},
imageMode() {
uni.navigateTo({
url: '/pages/component/image/image-mode'
});
},
imagePath() {
uni.navigateTo({
url: '/pages/component/image/image-path'
});
},
imageLarge() {
uni.navigateTo({
url: '/pages/component/image/image-large'
});
}
}
}
</script>
<style>
.image {
margin: 40rpx auto;
width: 200rpx;
}
.image {
margin: 20px auto;
width: 100px;
}
</style>
pages/component/input/input.uvue
浏览文件 @ ebb8674f
......@@ -45,10 +45,12 @@
<text class="uni-title-text">占位符样式</text>
</view>
<view class="input-wrapper">
<input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle" placeholder="占位符文字颜色为红色" />
<input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle"
placeholder="占位符文字颜色为红色" />
</view>
<view class="input-wrapper">
<input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass" placeholder="占位符字体大小为10px" />
<input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass"
placeholder="占位符字体大小为10px" />
</view>
</view>
......@@ -66,7 +68,8 @@
<text class="uni-title-text">设置最大输入长度</text>
</view>
<view class="input-wrapper">
<input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10" :value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
<input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10"
:value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
</view>
</view>
......@@ -84,7 +87,8 @@
<text class="uni-title-text">自动获取焦点</text>
</view>
<view class="input-wrapper">
<input id="uni-input-focus" class="uni-input" :focus="focus" @keyboardheightchange="inputFocusKeyBoardChange"/>
<input id="uni-input-focus" class="uni-input" :focus="focus"
@keyboardheightchange="inputFocusKeyBoardChange" />
</view>
</view>
......@@ -132,13 +136,14 @@
<text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</text>
</view>
<view class="input-wrapper">
<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart" :selection-end="selectionEnd" />
<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart"
:selection-end="selectionEnd" />
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置光标颜色为红色</text>
<text class="uni-title-text">设置光标颜色为红色</text>
<switch style="margin-left: 10px;" @change="changeCursorColor" :checked="cursor_color=='red'"></switch>
</view>
<view class="input-wrapper">
......@@ -153,18 +158,18 @@
<view class="input-wrapper">
<input class="uni-input" :adjust-position="true" />
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置hold-keyboard</text>
<switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="holdKeyboard"></switch>
</view>
<view class="input-wrapper">
<input class="uni-input" :hold-keyboard="holdKeyboard" value="hold-keyboard" />
</view>
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置hold-keyboard</text>
<switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="holdKeyboard"></switch>
</view>
<view class="input-wrapper">
<input class="uni-input" :hold-keyboard="holdKeyboard" value="hold-keyboard" />
</view>
</view>
<view>
......@@ -200,7 +205,8 @@
<view>
<view class="uni-title">
<text class="uni-title-text">keyboardheightchange事件</text>
<text class="uni-subtitle-text" v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
<text class="uni-subtitle-text"
v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
</view>
<view class="input-wrapper">
<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" />
......@@ -224,7 +230,8 @@
</view>
<view class="input-wrapper">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'" @click="changePassword"></image>
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'"
@click="changePassword"></image>
</view>
</view>
</view>
......@@ -253,19 +260,19 @@
inputTypeTel: "tel",
inputPlaceHolderStyle: "color:red",
inputPlaceHolderClass: "uni-input-placeholder-class",
inputMaxLengthValue:"",
onMaxLengthInputValue:"",
inputMaxLengthFocus:false,
inputPasswordValue:"",
inputFocusKeyBoardChangeValue:true,
holdKeyboard:false
inputMaxLengthValue: "",
onMaxLengthInputValue: "",
inputMaxLengthFocus: false,
inputPasswordValue: "",
inputFocusKeyBoardChangeValue: true,
holdKeyboard: false
}
},
methods: {
inputFocusKeyBoardChange(e:InputKeyboardHeightChangeEvent) {
inputFocusKeyBoardChange(e : InputKeyboardHeightChangeEvent) {
this.inputFocusKeyBoardChangeValue = e.detail.height > 50
},
onMaxLengthInput(event:InputEvent) {
onMaxLengthInput(event : InputEvent) {
this.onMaxLengthInputValue = event.detail.value
},
setCursor: function (cursor : number) {
......@@ -312,22 +319,22 @@
console.log("键盘高度发生变化", JSON.stringify(event.detail));
this.keyboardHeightChangeEventDetail = JSON.stringify(event.detail);
},
test_check_input_value():number {
test_check_input_value() : number {
return this.onMaxLengthInputValue.length
},
changeCursorColor(event: SwitchChangeEvent){
const checked = event.detail.value;
if(checked){
this.cursor_color = "red"
}else{
this.cursor_color = "#3393E2"
}
const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
changeCursorColor(event : SwitchChangeEvent) {
const checked = event.detail.value;
if (checked) {
this.cursor_color = "red"
} else {
this.cursor_color = "#3393E2"
}
const input = uni.getElementById<UniInputElement>("uni-input-cursor-color")
input?.focus()
},
changeHoldKeyboard(event: SwitchChangeEvent){
const checked = event.detail.value;
this.holdKeyboard = checked
},
changeHoldKeyboard(event : SwitchChangeEvent) {
const checked = event.detail.value;
this.holdKeyboard = checked
}
}
}
......@@ -337,7 +344,7 @@
.input-wrapper {
display: flex;
padding: 8px 13px;
margin: 10rpx 0;
margin: 5px 0;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
......@@ -359,4 +366,4 @@
.uni-input-placeholder-class {
font-size: 10px;
}
</style>
</style>
pages/component/list-view/list-view.uvue
浏览文件 @ ebb8674f
......@@ -43,12 +43,12 @@
list_view_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
list_view_refresherpulling(e : RefresherEvent) {
console.log("下拉刷新控件被下拉")
if(this.reset) {
if(e.detail.dy > 45) {
this.state = 1
} else {
this.state = 0
}
if (this.reset) {
if (e.detail.dy > 45) {
this.state = 1
} else {
this.state = 0
}
}
},
list_view_refresherrefresh() {
......@@ -58,7 +58,7 @@
this.state = 2
this.reset = false;
setTimeout(() => {
this.refresher_triggered_boolean = false
this.refresher_triggered_boolean = false
}, 1500)
},
list_view_refresherrestore() {
......@@ -68,8 +68,8 @@
console.log("下拉刷新被复位")
},
list_view_refresherabort() { console.log("下拉刷新被中止") },
list_view_scrolltoupper(e:ScrollToUpperEvent) { console.log("滚动到顶部/左边，会触发 scrolltoupper 事件 direction="+e.detail.direction) },
list_view_scrolltolower(e:ScrollToLowerEvent) { console.log("滚动到底部/右边，会触发 scrolltolower 事件 direction="+e.detail.direction) },
list_view_scrolltoupper(e : ScrollToUpperEvent) { console.log("滚动到顶部/左边，会触发 scrolltoupper 事件 direction=" + e.detail.direction) },
list_view_scrolltolower(e : ScrollToLowerEvent) { console.log("滚动到底部/右边，会触发 scrolltolower 事件 direction=" + e.detail.direction) },
list_view_scroll() { console.log("滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}") },
list_item_click() { console.log("list-item组件被点击时触发") },
list_item_touchstart() { console.log("手指触摸list-item组件动作开始") },
......@@ -92,11 +92,11 @@
this.change_scroll_direction()
},
change_scroll_direction() {
if(this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {
if (this.scroll_y_boolean && this.scroll_x_boolean || this.scroll_y_boolean) {
this.scroll_direction = "vertical"
} else if(!this.scroll_y_boolean && !this.scroll_x_boolean) {
} else if (!this.scroll_y_boolean && !this.scroll_x_boolean) {
this.scroll_direction = "none"
} else if(!this.scroll_y_boolean && this.scroll_x_boolean){
} else if (!this.scroll_y_boolean && this.scroll_x_boolean) {
this.scroll_direction = "horizontal"
}
},
......@@ -105,27 +105,27 @@
confirm_scroll_top_input(value : number) { this.scroll_top_input = value },
confirm_scroll_left_input(value : number) { this.scroll_left_input = value },
confirm_refresher_background_input(value : string) { this.refresher_background_input = value },
item_change_size_enum(index : number) { this.scrollIntoView = "item---"+index },
item_change_size_enum(index : number) { this.scrollIntoView = "item---" + index },
//自动化测试例专用
check_scroll_height(): Boolean {
check_scroll_height() : Boolean {
var listElement = this.$refs["listview"] as Element
console.log("check_scroll_height--"+listElement.scrollHeight)
if(listElement.scrollHeight > 2000) {
console.log("check_scroll_height--" + listElement.scrollHeight)
if (listElement.scrollHeight > 2000) {
return true
}
return false
},
//自动化测试例专用
check_scroll_width(): Boolean {
check_scroll_width() : Boolean {
var listElement = this.$refs["listview"] as Element
console.log("check_scroll_width"+listElement.scrollWidth)
if(listElement.scrollWidth > 2000) {
console.log("check_scroll_width" + listElement.scrollWidth)
if (listElement.scrollWidth > 2000) {
return true
}
return false
},
change_refresher_style_boolean(checked : boolean) {
if(checked) {
if (checked) {
this.refresher_default_style_input = "none"
} else {
this.refresher_default_style_input = "black"
......@@ -137,23 +137,21 @@
<template>
<view class="main">
<list-view :direction="scroll_direction" :rebound="bounces_boolean"
:upper-threshold="upper_threshold_input" :lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input"
:scroll-left="scroll_left_input" :show-scrollbar="show_scrollbar_boolean" :scroll-into-view="scrollIntoView"
<list-view :direction="scroll_direction" :rebound="bounces_boolean" :upper-threshold="upper_threshold_input"
:lower-threshold="lower_threshold_input" :scroll-top="scroll_top_input" :scroll-left="scroll_left_input"
:show-scrollbar="show_scrollbar_boolean" :scroll-into-view="scrollIntoView"
:scroll-with-animation="scroll_with_animation_boolean" :refresher-enabled="refresher_enabled_boolean"
:refresher-background="refresher_background_input" :refresher-triggered="refresher_triggered_boolean"
:refresher-default-style="refresher_default_style_input"
@click="list_view_click" @touchstart="list_view_touchstart" @touchmove="list_view_touchmove"
@touchcancel="list_view_touchcancel" @touchend="list_view_touchend" @tap="list_view_tap"
@longpress="list_view_longpress" @refresherpulling="list_view_refresherpulling"
@refresherrefresh="list_view_refresherrefresh" @refresherrestore="list_view_refresherrestore"
@refresherabort="list_view_refresherabort" @scrolltoupper="list_view_scrolltoupper" ref="listview"
@scrolltolower="list_view_scrolltolower" @scroll="list_view_scroll" style="width:100%;" id="listview">
<list-item
v-for="key in scrollData" :key="key" :id="key" @click="list_item_click" @touchstart="list_item_touchstart"
@touchmove="list_item_touchmove" @touchcancel="list_item_touchcancel" @touchend="list_item_touchend"
@tap="list_item_tap" @longpress="list_item_longpress"
class="list-item">
:refresher-default-style="refresher_default_style_input" @click="list_view_click"
@touchstart="list_view_touchstart" @touchmove="list_view_touchmove" @touchcancel="list_view_touchcancel"
@touchend="list_view_touchend" @tap="list_view_tap" @longpress="list_view_longpress"
@refresherpulling="list_view_refresherpulling" @refresherrefresh="list_view_refresherrefresh"
@refresherrestore="list_view_refresherrestore" @refresherabort="list_view_refresherabort"
@scrolltoupper="list_view_scrolltoupper" ref="listview" @scrolltolower="list_view_scrolltolower"
@scroll="list_view_scroll" style="width:100%;" id="listview">
<list-item v-for="key in scrollData" :key="key" :id="key" @click="list_item_click"
@touchstart="list_item_touchstart" @touchmove="list_item_touchmove" @touchcancel="list_item_touchcancel"
@touchend="list_item_touchend" @tap="list_item_tap" @longpress="list_item_longpress" class="list-item">
<text>{{key}}</text>
</list-item>
<list-item slot="refresher" class="refresh-box">
......@@ -196,8 +194,8 @@
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, .06);
flex-direction: row;
justify-content: center;
......@@ -213,8 +211,8 @@
}
.tip-text {
color: #888;
font-size: 12px;
color: #888;
font-size: 12px;
}
.refresh-box {
......@@ -226,6 +224,6 @@
}
.button {
margin-top: 30rpx;
margin-top: 15px;
}
</style>
pages/component/picker-view/picker-view.uvue
浏览文件 @ ebb8674f
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title">
日期：{{year}}年{{month}}月{{day}}日
</view>
</view>
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
:mask-top-style="maskTopStyle" :mask-bottom-style="maskBottomStyle">
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in years" :key="index"><text class="text">{{item}}年</text></view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in months" :key="index"><text class="text">{{item}}月</text>
</view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in days" :key="index"><text class="text">{{item}}日</text></view>
</picker-view-column>
</picker-view>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title">
日期：{{year}}年{{month}}月{{day}}日
</view>
</view>
<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
:mask-top-style="maskTopStyle" :mask-bottom-style="maskBottomStyle">
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in years" :key="index"><text class="text">{{item}}年</text></view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in months" :key="index"><text class="text">{{item}}月</text>
</view>
</picker-view-column>
<picker-view-column class="picker-view-column">
<view class="item" v-for="(item,index) in days" :key="index"><text class="text">{{item}}日</text></view>
</picker-view-column>
</picker-view>
</view>
</template>
<script lang="uts">
export default {
data() {
const date = new Date()
const _years : number[] = []
const _year = date.getFullYear()
const _months : number[] = []
const _month : number = date.getMonth() + 1
const _days : number[] = []
const _day = date.getDate()
for (let i = 2000; i <= _year; i++) {
_years.push(i)
}
for (let i = 1; i <= 12; i++) {
_months.push(i)
}
for (let i = 1; i <= 31; i++) {
_days.push(i)
}
return {
title: 'picker-view',
years: _years as number[],
year: _year as number,
months: _months as number[],
month: _month as number,
days: _days as number[],
day: _day as number,
value: [_year - 2000, _month - 1, _day - 1] as number[],
result: [] as number[],
indicatorStyle: 'height: 50px;',
maskTopStyle: '',
maskBottomStyle: ''
}
},
methods: {
bindChange(e : PickerViewChangeEvent) {
const val = e.detail.value
this.result = val
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
},
setValue() {
this.value = [0, 0, 0] as number[]
},
setValue1() {
this.value = [10, 10, 10] as number[]
},
}
export default {
data() {
const date = new Date()
const _years : number[] = []
const _year = date.getFullYear()
const _months : number[] = []
const _month : number = date.getMonth() + 1
const _days : number[] = []
const _day = date.getDate()
for (let i = 2000; i <= _year; i++) {
_years.push(i)
}
for (let i = 1; i <= 12; i++) {
_months.push(i)
}
for (let i = 1; i <= 31; i++) {
_days.push(i)
}
return {
title: 'picker-view',
years: _years as number[],
year: _year as number,
months: _months as number[],
month: _month as number,
days: _days as number[],
day: _day as number,
value: [_year - 2000, _month - 1, _day - 1] as number[],
result: [] as number[],
indicatorStyle: 'height: 50px;',
maskTopStyle: '',
maskBottomStyle: ''
}
},
methods: {
bindChange(e : PickerViewChangeEvent) {
const val = e.detail.value
this.result = val
this.year = this.years[val[0]]
this.month = this.months[val[1]]
this.day = this.days[val[2]]
},
setValue() {
this.value = [0, 0, 0] as number[]
},
setValue1() {
this.value = [10, 10, 10] as number[]
},
}
}
</script>
<style>
.picker-view {
width: 100%;
height: 320px;
margin-top: 10px;
}
.picker-view {
width: 100%;
height: 320px;
margin-top: 10px;
}
.item {
height: 50px;
}
.item {
height: 50px;
}
.text {
line-height: 50px;
text-align: center;
}
.text {
line-height: 50px;
text-align: center;
}
</style>
pages/component/progress/progress.uvue
浏览文件 @ ebb8674f
<script>
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[],
curPercent: 0,
showInfo: true,
borderRadius: 0,
fontSize: 16,
strokeWidth: 3,
backgroundColor: '#EBEBEB',
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[],
curPercent: 0,
showInfo: true,
borderRadius: 0,
fontSize: 16,
strokeWidth: 3,
backgroundColor: '#EBEBEB',
// 组件属性 autotest
active_boolean: false,
show_info_boolean: false,
duration_input: 30,
percent_input: 0,
stroke_width_input: 6,
activeColor_input: "#09BB07",
backgroundColor_input: "#EBEBEB",
active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
active_mode_enum_current: 0
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
},
activeend(e : ProgressActiveendEvent) {
this.curPercent = e.detail.curPercent
},
progress_touchstart() { console.log("手指触摸动作开始") },
progress_touchmove() { console.log("手指触摸后移动") },
progress_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
progress_touchend() { console.log("手指触摸动作结束") },
progress_tap() { console.log("手指触摸后马上离开") },
change_active_boolean(checked : boolean) { this.active_boolean = checked },
change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },
confirm_duration_input(value : number) { this.duration_input = value },
confirm_percent_input(value : number) { this.percent_input = value },
confirm_stroke_width_input(value : number) { this.stroke_width_input = value },
confirm_activeColor_input(value : string) { this.activeColor_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
}
}
// 组件属性 autotest
active_boolean: false,
show_info_boolean: false,
duration_input: 30,
percent_input: 0,
stroke_width_input: 6,
activeColor_input: "#09BB07",
backgroundColor_input: "#EBEBEB",
active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
active_mode_enum_current: 0
}
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
},
activeend(e : ProgressActiveendEvent) {
this.curPercent = e.detail.curPercent
},
progress_touchstart() { console.log("手指触摸动作开始") },
progress_touchmove() { console.log("手指触摸后移动") },
progress_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
progress_touchend() { console.log("手指触摸动作结束") },
progress_tap() { console.log("手指触摸后马上离开") },
change_active_boolean(checked : boolean) { this.active_boolean = checked },
change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },
confirm_duration_input(value : number) { this.duration_input = value },
confirm_percent_input(value : number) { this.percent_input = value },
confirm_stroke_width_input(value : number) { this.stroke_width_input = value },
confirm_activeColor_input(value : string) { this.activeColor_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
}
}
</script>
<template>
<view class="main">
<progress
:duration="duration_input"
:percent="percent_input"
:show-info="show_info_boolean"
:stroke-width="stroke_width_input"
:activeColor="activeColor_input"
:backgroundColor="backgroundColor_input"
:active="active_boolean"
:active-mode="active_mode_enum[active_mode_enum_current].name"
@touchstart="progress_touchstart"
@touchmove="progress_touchmove"
@touchcancel="progress_touchcancel"
@touchend="progress_touchend"
@tap="progress_tap"
style="width: 80%"
>
<progress :duration="duration_input" :percent="percent_input" :show-info="show_info_boolean"
:stroke-width="stroke_width_input" :activeColor="activeColor_input" :backgroundColor="backgroundColor_input"
:active="active_boolean" :active-mode="active_mode_enum[active_mode_enum_current].name"
@touchstart="progress_touchstart" @touchmove="progress_touchmove" @touchcancel="progress_touchcancel"
@touchend="progress_touchend" @tap="progress_tap" style="width: 80%">
<text>uni-app-x</text>
</progress>
</view>
......@@ -76,90 +65,36 @@ export default {
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data
:defaultValue="false"
title="进度条从左往右的动画"
@change="change_active_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="在进度条右侧显示百分比"
@change="change_show_info_boolean"
></boolean-data>
<input-data
defaultValue="30"
title="进度增加1%所需毫秒数"
type="number"
@confirm="confirm_duration_input"
></input-data>
<input-data
defaultValue="0"
title="百分比0~100"
type="number"
@confirm="confirm_percent_input"
></input-data>
<input-data
defaultValue="6"
title="进度条线的宽度，单位px"
type="number"
@confirm="confirm_stroke_width_input"
></input-data>
<input-data
defaultValue="#09BB07"
title="已选择的进度条的颜色"
type="text"
@confirm="confirm_activeColor_input"
></input-data>
<input-data
defaultValue="#EBEBEB"
title="未选择的进度条的颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<enum-data
:items="active_mode_enum"
title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
@change="radio_change_active_mode_enum"
></enum-data>
<boolean-data :defaultValue="false" title="进度条从左往右的动画" @change="change_active_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
<input-data defaultValue="30" title="进度增加1%所需毫秒数" type="number" @confirm="confirm_duration_input"></input-data>
<input-data defaultValue="0" title="百分比0~100" type="number" @confirm="confirm_percent_input"></input-data>
<input-data defaultValue="6" title="进度条线的宽度，单位px" type="number"
@confirm="confirm_stroke_width_input"></input-data>
<input-data defaultValue="#09BB07" title="已选择的进度条的颜色" type="text"
@confirm="confirm_activeColor_input"></input-data>
<input-data defaultValue="#EBEBEB" title="未选择的进度条的颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<enum-data :items="active_mode_enum" title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
@change="radio_change_active_mode_enum"></enum-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress
:percent="pgList[0]"
:active="true"
:border-radius="borderRadius"
:show-info="showInfo"
:font-size="fontSize"
:stroke-width="strokeWidth"
:background-color="backgroundColor"
class="progress p"
@activeend="activeend"
/>
<progress :percent="pgList[0]" :active="true" :border-radius="borderRadius" :show-info="showInfo"
:font-size="fontSize" :stroke-width="strokeWidth" :background-color="backgroundColor" class="progress p"
@activeend="activeend" />
</view>
<view class="progress-box">
<progress
:percent="pgList[1]"
:stroke-width="3"
class="progress p1"
/>
<progress :percent="pgList[1]" :stroke-width="3" class="progress p1" />
</view>
<view class="progress-box">
<progress
:percent="pgList[2]"
:stroke-width="3"
class="progress p2"
/>
<progress :percent="pgList[2]" :stroke-width="3" class="progress p2" />
</view>
<view class="progress-box">
<progress
:percent="pgList[3]"
activeColor="#10AEFF"
:stroke-width="3"
class="progress p3"
/>
<progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
</view>
<view class="progress-control">
<button type="primary" @click="setProgress" class="button">
......@@ -175,26 +110,26 @@ export default {
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.progress-box {
height: 50rpx;
margin-bottom: 60rpx;
}
.progress-box {
height: 25px;
margin-bottom: 30px;
}
.button {
margin-top: 20rpx;
}
</style>
.button {
margin-top: 10px;
}
</style>
pages/component/radio/radio.uvue
浏览文件 @ ebb8674f
<script>
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : RadioGroupChangeEvent) {
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : RadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : RadioGroupChangeEvent) {
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : RadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<view class="main">
<radio
:disabled="disabled_boolean"
:checked="checked_boolean"
:color="color_input"
:backgroundColor="backgroundColor_input"
:borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input"
:activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input"
@click="radio_click"
@touchstart="radio_touchstart"
@touchmove="radio_touchmove"
@touchcancel="radio_touchcancel"
@touchend="radio_touchend"
@tap="radio_tap"
@longpress="radio_longpress"
>
<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
<text>uni-app-x</text>
</radio>
</view>
......@@ -110,52 +98,18 @@ export default {
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data
:defaultValue="false"
title="<radio/> 当前是否选中"
@change="change_checked_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否禁用"
@change="change_disabled_boolean"
></boolean-data>
<input-data
defaultValue="#007AFF"
title="radio的颜色"
type="text"
@confirm="confirm_color_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="radio默认的背景颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<input-data
defaultValue="#d1d1d1"
title="radio默认的边框颜色"
type="text"
@confirm="confirm_borderColor_input"
></input-data>
<input-data
defaultValue="#007AFF"
title="radio选中时的背景颜色，优先级大于color属性"
type="text"
@confirm="confirm_activeBackgroundColor_input"
></input-data>
<input-data
defaultValue=""
title="radio选中时的边框颜色"
type="text"
@confirm="confirm_activeBorderColor_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="radio的图标颜色"
type="text"
@confirm="confirm_iconColor_input"
></input-data>
<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
</view>
<view>
......@@ -164,18 +118,8 @@ export default {
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group
class="uni-flex uni-row radio-group"
@change="testChange"
style="flex-wrap: wrap"
>
<radio
value="r"
:checked="checked"
:color="color"
style="margin-right: 30rpx"
class="radio r"
>选中
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
<radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx" class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 30rpx" class="radio r1">{{
text
......@@ -192,21 +136,10 @@ export default {
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio
value="r1"
:checked="true"
color="#FFCC33"
style="transform: scale(0.7); margin-right: 30rpx"
class="radio"
>选中
<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 30rpx"
class="radio">选中
</radio>
<radio
value="r2"
color="#FFCC33"
style="transform: scale(0.7)"
class="radio"
>未选中</radio
>
<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
</radio-group>
</view>
......@@ -217,14 +150,9 @@ export default {
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio
class="uni-list-cell uni-list-cell-pd radio"
v-for="(item, index) in items"
:key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
:value="item.value"
:checked="index === current"
>
<radio class="uni-list-cell uni-list-cell-pd radio" 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>
......@@ -234,21 +162,21 @@ export default {
</template>
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main {
max-height: 500rpx;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 200rpx;
border: 1px solid #666;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
.uni-list-cell {
justify-content: flex-start;
}
</style>
pages/component/rich-text/rich-text.uvue
浏览文件 @ ebb8674f
......@@ -29,7 +29,7 @@
<style>
.text-box {
padding: 40rpx 0;
padding: 20px 0;
background-color: white;
}
</style>
\ No newline at end of file
</style>
pages/component/slider/slider.uvue
浏览文件 @ ebb8674f
......@@ -113,7 +113,8 @@
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="28" title="滑块的大小(block-size)，取值范围为 12 - 28" type="number"
@confirm="confirm_block_size_input"></input-data>
<input-data defaultValue="#ffffff" title="滑块颜色(block-color)" type="text" @confirm="confirm_block_color_input"></input-data>
<input-data defaultValue="#ffffff" title="滑块颜色(block-color)" type="text"
@confirm="confirm_block_color_input"></input-data>
</view>
<view class="uni-padding-wrap">
......@@ -154,8 +155,7 @@
<style>
.main {
max-height: 500rpx;
padding: 10rpx 0;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
......@@ -163,7 +163,7 @@
.main .list-item {
width: 100%;
height: 200rpx;
height: 100px;
border: 1px solid #666;
}
......
pages/component/sticky-header/sticky-header.uvue
浏览文件 @ ebb8674f
<template>
<list-view :scroll-y="true" class="page" rebound="false" show-scrollbar=false :scroll-top="scroll_top_input" :refresher-enabled="refresher_enabled_boolean"
:refresher-triggered="refresher_triggered_boolean" @refresherrefresh="list_view_refresherrefresh">
<list-item type = 1>
<list-view :scroll-y="true" class="page" rebound="false" show-scrollbar=false :scroll-top="scroll_top_input"
:refresher-enabled="refresher_enabled_boolean" :refresher-triggered="refresher_triggered_boolean"
@refresherrefresh="list_view_refresherrefresh">
<list-item type=1>
<swiper indicator-dots="true" circular="true">
<swiper-item v-for="i in 3" :item-id="i">
<swiper-item v-for="i in 3" :item-id="i">
<image src="/static/shuijiao.jpg" style="height: 240px;"></image>
<text style="position: absolute;">{{i}}</text>
</swiper-item>
</swiper>
</list-item>
<list-item class="content-item" type = 2>
<text class="text">向上滑动页面，体验sticky-header吸顶效果。</text>
</list-item>
<sticky-header>
<scroll-view style="background-color: #f5f5f5; flex-direction: row;" direction="horizontal" :show-scrollbar="false">
<list-item class="content-item" type=2>
<text class="text">向上滑动页面，体验sticky-header吸顶效果。</text>
</list-item>
<sticky-header>
<scroll-view style="background-color: #f5f5f5; flex-direction: row;" direction="horizontal"
:show-scrollbar="false">
<view class="flex-row" style="align-self: flex-start; flex-direction: row;">
<text ref="swipertab" class="sift-item"
v-for="(name,index) in sift_item" @click="clickTH(index)">
<text ref="swipertab" class="sift-item" v-for="(name,index) in sift_item" @click="clickTH(index)">
{{name}}
</text>
</view>
</scroll-view>
</sticky-header>
</sticky-header>
<list-item v-for="(item,index) in list_item" :key="index" class="content-item" type = 3>
<text class="text">{{item}}</text>
</list-item>
</list-view>
<list-item v-for="(item,index) in list_item" :key="index" class="content-item" type=3>
<text class="text">{{item}}</text>
</list-item>
</list-view>
</template>
<script>
export default {
data() {
return {
sift_item: ["排序", "筛选"],
list_item: [] as Array<string>,
refresher_enabled_boolean: true,
refresher_triggered_boolean: false,
scroll_top_input: 0
}
},
export default {
data() {
return {
sift_item: ["排序", "筛选"],
list_item: [] as Array<string>,
refresher_enabled_boolean: true,
refresher_triggered_boolean: false,
scroll_top_input: 0
}
},
onLoad() {
let lists : Array<string> = []
for (let i = 0; i < 40; i++) {
......@@ -47,46 +48,45 @@
}
this.list_item = lists
},
methods: {
list_view_refresherrefresh() {
console.log("下拉刷新被触发 ")
this.refresher_triggered_boolean = true
setTimeout(() => {
this.refresher_triggered_boolean = false
}, 1500)
},
confirm_scroll_top_input(value : number) {
this.scroll_top_input = value
},
clickTH(index:number){
methods: {
list_view_refresherrefresh() {
console.log("下拉刷新被触发 ")
this.refresher_triggered_boolean = true
setTimeout(() => {
this.refresher_triggered_boolean = false
}, 1500)
},
confirm_scroll_top_input(value : number) {
this.scroll_top_input = value
},
clickTH(index : number) {
console.log("点击表头：" + index);
}
}
}
}
}
</script>
<style>
.page {
flex: 1;
background-color: #f5f5f5;
}
.page {
flex: 1;
background-color: #f5f5f5;
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
.sift-item {
color: #555;
font-size: 16px;
padding: 12px 15px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或