home1022
This commit is contained in:
bwstudio
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="album">
|
||||
<view class="album__avatar">
|
||||
<image
|
||||
src="/static/uview/common/logo.png"
|
||||
mode=""
|
||||
style="width: 32px;height: 32px;"
|
||||
></image>
|
||||
</view>
|
||||
<view class="album__content">
|
||||
<u--text
|
||||
text="uView UI"
|
||||
type="primary"
|
||||
bold
|
||||
size="17"
|
||||
></u--text>
|
||||
<u--text
|
||||
margin="0 0 8px 0"
|
||||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
|
||||
></u--text>
|
||||
<u-album
|
||||
:urls="urls1"
|
||||
keyName="src2"
|
||||
></u-album>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">多图模式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="album">
|
||||
<view class="album__avatar">
|
||||
<image
|
||||
src="/static/uview/common/logo.png"
|
||||
mode=""
|
||||
style="width: 32px;height: 32px;"
|
||||
></image>
|
||||
</view>
|
||||
<view class="album__content">
|
||||
<u--text
|
||||
text="uView UI"
|
||||
type="primary"
|
||||
bold
|
||||
size="17"
|
||||
></u--text>
|
||||
<u--text
|
||||
margin="0 0 8px 0"
|
||||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
|
||||
></u--text>
|
||||
<u-album :urls="urls2"></u-album>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">图文对齐</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="album">
|
||||
<view class="album__avatar">
|
||||
<image
|
||||
src="/static/uview/common/logo.png"
|
||||
mode=""
|
||||
style="width: 32px;height: 32px;"
|
||||
></image>
|
||||
</view>
|
||||
<view class="album__content">
|
||||
<u--text
|
||||
text="uView UI"
|
||||
type="primary"
|
||||
bold
|
||||
size="17"
|
||||
></u--text>
|
||||
<view :style="{
|
||||
marginBottom: '8px',
|
||||
width: albumWidth + 'px'
|
||||
}">
|
||||
<u--text
|
||||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
|
||||
:customStyle="{
|
||||
width: albumWidth + 'px'
|
||||
}"
|
||||
></u--text>
|
||||
</view>
|
||||
<u-album
|
||||
:urls="urls2"
|
||||
@albumWidth="width => albumWidth = width"
|
||||
multipleSize="68"
|
||||
></u-album>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">更改裁剪模式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="album">
|
||||
<view class="album__avatar">
|
||||
<image
|
||||
src="/static/uview/common/logo.png"
|
||||
mode=""
|
||||
style="width: 32px;height: 32px;"
|
||||
></image>
|
||||
</view>
|
||||
<view class="album__content">
|
||||
<u--text
|
||||
text="uView UI"
|
||||
type="primary"
|
||||
bold
|
||||
size="17"
|
||||
></u--text>
|
||||
<u--text
|
||||
margin="0 0 8px 0"
|
||||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
|
||||
></u--text>
|
||||
<u-album
|
||||
:urls="urls3"
|
||||
rowCount="2"
|
||||
maxCount="4"
|
||||
multipleMode="scaleToFill"
|
||||
></u-album>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">更改图片大小</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="album">
|
||||
<view class="album__avatar">
|
||||
<image
|
||||
src="/static/uview/common/logo.png"
|
||||
mode=""
|
||||
style="width: 32px;height: 32px;"
|
||||
></image>
|
||||
</view>
|
||||
<view class="album__content">
|
||||
<u--text
|
||||
text="uView UI"
|
||||
type="primary"
|
||||
bold
|
||||
size="17"
|
||||
></u--text>
|
||||
<u--text
|
||||
margin="0 0 8px 0"
|
||||
text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
|
||||
></u--text>
|
||||
<u-album
|
||||
:urls="urls4"
|
||||
rowCount="2"
|
||||
maxCount="4"
|
||||
multipleSize="50"
|
||||
></u-album>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
albumWidth: 0,
|
||||
urls1: [{
|
||||
src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
}],
|
||||
urls2: [
|
||||
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||||
],
|
||||
urls3: [
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
],
|
||||
urls4: [
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album {
|
||||
@include flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&__avatar {
|
||||
background-color: $u-bg-color;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础演示</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-avatar :src="src1"></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">头像形状</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
:src="src2"
|
||||
shape="circle"
|
||||
@click="click"
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
:src="src3"
|
||||
shape="square"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">头像尺寸</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
:src="src4"
|
||||
size="30"
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
:src="src5"
|
||||
size="40"
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
:src="src6"
|
||||
size="50"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">图标头像</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
icon="red-packet-fill"
|
||||
fontSize="22"
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
icon="star-fill"
|
||||
fontSize="22"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">文字头像(自动背景色)</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
text="U"
|
||||
fontSize="20"
|
||||
randomBgColor
|
||||
:colorIndex="0"
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
text="邓"
|
||||
fontSize="18"
|
||||
randomBgColor
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
text="张"
|
||||
fontSize="18"
|
||||
randomBgColor
|
||||
></u-avatar>
|
||||
</view>
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
text="王"
|
||||
fontSize="18"
|
||||
randomBgColor
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">图片加载失败(显示默认头像)</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-avatar :src="src7"></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">小程序开放能力</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-avatar-item">
|
||||
<u-avatar
|
||||
mpAvatar
|
||||
size="60"
|
||||
></u-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">头像组</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-avatar-group
|
||||
:urls="urls"
|
||||
size="35"
|
||||
gap="0.4"
|
||||
></u-avatar-group>
|
||||
</view>
|
||||
<view class="u-demo-block__content" style="margin-top: 20px">
|
||||
<u-avatar-group
|
||||
:urls="urls"
|
||||
size="35"
|
||||
gap="0.6"
|
||||
></u-avatar-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src1: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
src2: 'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
src3: 'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
src4: 'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
src5: 'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
src6: 'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
src7: 'https://cdn.uviewui.com/uview/album/noExist.jpg',
|
||||
urls: [
|
||||
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg'
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
click(name) {
|
||||
console.log('click', name);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-demo-block__content {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.u-avatar-item {
|
||||
margin-right: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
title="日历"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
@click="showCalendar(index)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:label="values[index]"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-calendar
|
||||
:show="show1"
|
||||
defaultDate="2022-02-15"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show2"
|
||||
mode="multiple"
|
||||
:defaultDate="['2022-03-01']"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show3"
|
||||
mode="range"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show4"
|
||||
mode="range"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
color="#f56c6c"
|
||||
:defaultDate="customThemeDefaultDate"
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show5"
|
||||
mode="range"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
:defaultDate="customTextDefaultDate"
|
||||
startText="住店"
|
||||
endText="离店"
|
||||
confirmDisabledText="请选择离店日期"
|
||||
:formatter="formatter"
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show6"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
:maxDate="maxDate"
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show7"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
showLunar
|
||||
></u-calendar>
|
||||
<u-calendar
|
||||
:show="show8"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
mode="multiple"
|
||||
:defaultDate="defaultDateMultiple"
|
||||
></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const d = new Date()
|
||||
const year = d.getFullYear()
|
||||
let month = d.getMonth() + 1
|
||||
month = month < 10 ? `0${month}` : month
|
||||
const date = d.getDate()
|
||||
return {
|
||||
index: 0,
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false,
|
||||
show7: false,
|
||||
show8: false,
|
||||
values: ['','','','','','','',''],
|
||||
customThemeDefaultDate: [`${year}-${month}-${date}`, `${year}-${month}-${date + 5}`],
|
||||
customTextDefaultDate: [`${year}-${month}-${date}`],
|
||||
maxDate: `${year}-${month}-${date + 10}`,
|
||||
defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`],
|
||||
list: [{
|
||||
title: '单个日期',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/7.png'
|
||||
},
|
||||
{
|
||||
title: '多个日期',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/8.png'
|
||||
},
|
||||
{
|
||||
title: '日期范围',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/9.png'
|
||||
},
|
||||
{
|
||||
title: '自定义主题颜色',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/15.png'
|
||||
},{
|
||||
title: '自定义文案',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/14.png'
|
||||
},{
|
||||
title: '日期最大范围',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/13.png'
|
||||
},{
|
||||
title: '显示农历',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/5.png'
|
||||
},{
|
||||
title: '默认日期',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showCalendar(index) {
|
||||
this.index = index + 1
|
||||
this[`show${index + 1}`] = true
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
confirm(e) {
|
||||
this[`show${this.index}`] = false
|
||||
console.log(e);
|
||||
switch(this.index - 1) {
|
||||
case 0:
|
||||
this.values[this.index - 1] = e[0];
|
||||
break;
|
||||
case 1:
|
||||
e.forEach((value, index) => {
|
||||
index === 0 ? this.values[this.index - 1] = value : this.values[this.index - 1] += ';' + value
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
this.values[this.index - 1] = e[0] + '~' + e[e.length - 1];
|
||||
break;
|
||||
case 3:
|
||||
this.values[this.index - 1] = e[0] + '~' + e[e.length - 1];
|
||||
break;
|
||||
case 4:
|
||||
this.values[this.index - 1] = e[0] + '~' + e[e.length - 1];
|
||||
break;
|
||||
case 5:
|
||||
this.values[this.index - 1] = e[0];
|
||||
break;
|
||||
case 6:
|
||||
this.values[this.index - 1] = e[0];
|
||||
break;
|
||||
case 7:
|
||||
e.forEach((value, index) => {
|
||||
index === 0 ? this.values[this.index - 1] = value : this.values[this.index - 1] += ';' + value
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this[`show${this.index}`] = false
|
||||
},
|
||||
formatter(day) {
|
||||
const d = new Date()
|
||||
let month = d.getMonth() + 1
|
||||
const date = d.getDate()
|
||||
if(day.month == month && day.day == date + 3) {
|
||||
day.bottomInfo = '有优惠'
|
||||
day.dot = true
|
||||
}
|
||||
return day
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value1"
|
||||
:maxlength="4"
|
||||
@change="change"
|
||||
@finish="finish"
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">横线模式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value2"
|
||||
mode="line"
|
||||
:maxlength="4"
|
||||
:bold="true"
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">设置长度</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value3"
|
||||
:maxlength="6"
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">设置间距</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value4"
|
||||
mode="box"
|
||||
:space="0"
|
||||
:maxlength="4"
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">细边框</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value5"
|
||||
mode="box"
|
||||
:space="0"
|
||||
:maxlength="4"
|
||||
hairline
|
||||
></u-code-input>
|
||||
</view>
|
||||
<view
|
||||
class="u-demo-block__content"
|
||||
style="margin-top: 10px;"
|
||||
>
|
||||
<u-code-input
|
||||
v-model="value6"
|
||||
mode="line"
|
||||
:space="10"
|
||||
:maxlength="4"
|
||||
hairline
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">调整颜色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value7"
|
||||
mode="box"
|
||||
:space="0"
|
||||
:maxlength="4"
|
||||
hairline
|
||||
color="#f56c6c"
|
||||
borderColor="#f56c6c"
|
||||
></u-code-input>
|
||||
<view class="u-demo-block__content" style="margin-top: 10px;">
|
||||
<u-code-input
|
||||
v-model="value10"
|
||||
mode="line"
|
||||
size="30"
|
||||
:maxlength="4"
|
||||
hairline
|
||||
color="#3c9cff"
|
||||
borderColor="#3c9cff"
|
||||
></u-code-input>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">点模式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value8"
|
||||
mode="box"
|
||||
dot
|
||||
:space="0"
|
||||
:maxlength="4"
|
||||
hairline
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">预置内容</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-code-input
|
||||
v-model="value9"
|
||||
mode="box"
|
||||
:space="0"
|
||||
:maxlength="4"
|
||||
hairline
|
||||
fontSize="17"
|
||||
></u-code-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: '',
|
||||
value6: '',
|
||||
value7: '',
|
||||
value8: '',
|
||||
value9: '123',
|
||||
value10: '34'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('change', e);
|
||||
},
|
||||
finish(e) {
|
||||
console.log('finish', e);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
title="datetimePicker 时间日期选择器"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
@click="showDatetimePicker(index)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-datetime-picker
|
||||
:show="show1"
|
||||
v-model="value1"
|
||||
mode="datetime"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="show2"
|
||||
v-model="value2"
|
||||
mode="date"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="show3"
|
||||
v-model="value3"
|
||||
mode="year-month"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="show4"
|
||||
v-model="value4"
|
||||
mode="time"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="show5"
|
||||
v-model="value5"
|
||||
:filter="filter"
|
||||
mode="date"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="show6"
|
||||
v-model="value6"
|
||||
mode="date"
|
||||
:formatter="formatter"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
:show="show7"
|
||||
v-model="value7"
|
||||
mode="datetime"
|
||||
:minDate="1587524800000"
|
||||
:maxDate="1786778555000"
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@close="close"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const d = new Date()
|
||||
const year = d.getFullYear()
|
||||
let month = uni.$u.padZero(d.getMonth() + 1)
|
||||
const date = d.getDate()
|
||||
return {
|
||||
current: 0,
|
||||
value1: Number(new Date()),
|
||||
value2: Number(new Date()),
|
||||
value3: Number(new Date()),
|
||||
value4: '05:28',
|
||||
value5: Number(new Date()),
|
||||
value6: Number(new Date()),
|
||||
value7: Number(new Date()),
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false,
|
||||
show7: false,
|
||||
list: [{
|
||||
title: '完整日期时间',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png'
|
||||
},
|
||||
{
|
||||
title: '年月日',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png'
|
||||
},
|
||||
{
|
||||
title: '年月',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png'
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png'
|
||||
}, {
|
||||
title: '过滤器(保留偶数年)',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png'
|
||||
}, {
|
||||
title: '格式化',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png'
|
||||
}, {
|
||||
title: '限制最大最小值',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this[`show${this.current}`] = false
|
||||
},
|
||||
cancel() {
|
||||
this[`show${this.current}`] = false
|
||||
},
|
||||
confirm(e) {
|
||||
this[`show${this.current}`] = false
|
||||
this.result(e.value, e.mode)
|
||||
},
|
||||
change(e) {
|
||||
// console.log('change', e)
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
formatter(mode, value) {
|
||||
if (mode === 'year') {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (mode === 'month') {
|
||||
return `${value}月`;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
filter(mode, options) {
|
||||
if (mode === 'year') {
|
||||
return options.filter((option) => option % 2 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
showDatetimePicker(index) {
|
||||
this.current = index + 1
|
||||
this[`show${index + 1}`] = true
|
||||
},
|
||||
result(time, mode) {
|
||||
const timeFormat = uni.$u.timeFormat,
|
||||
toast = uni.$u.toast
|
||||
switch (mode) {
|
||||
case 'datetime':
|
||||
return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
|
||||
case 'date':
|
||||
return toast(timeFormat(time, 'yyyy-mm-dd'))
|
||||
case 'year-month':
|
||||
return toast(timeFormat(time, 'yyyy-mm'))
|
||||
case 'time':
|
||||
return toast(time)
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
filter(type, options) {
|
||||
if (type === 'year') {
|
||||
return options.filter((option) => option % 2 === 0)
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
title="表单"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||||
<u--form
|
||||
labelPosition="left"
|
||||
:model="model1"
|
||||
ref="form1"
|
||||
>
|
||||
<u-form-item
|
||||
label="姓名"
|
||||
prop="userInfo.name"
|
||||
borderBottom
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.userInfo.name"
|
||||
border="none"
|
||||
placeholder="姓名,只能为中文"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="性别"
|
||||
prop="userInfo.sex"
|
||||
borderBottom
|
||||
@click="showSex = true; hideKeyboard()"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.userInfo.sex"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择性别"
|
||||
border="none"
|
||||
></u--input>
|
||||
<u-icon
|
||||
slot="right"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="水果"
|
||||
prop="radiovalue1"
|
||||
borderBottom
|
||||
ref="item2"
|
||||
>
|
||||
<u-radio-group v-model="model1.radiovalue1">
|
||||
<u-radio
|
||||
:customStyle="{marginRight: '16px'}"
|
||||
v-for="(item, index) in radiolist1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.name"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="兴趣爱好"
|
||||
prop="checkboxValue1"
|
||||
borderBottom
|
||||
labelWidth="80"
|
||||
ref="item3"
|
||||
>
|
||||
<u-checkbox-group
|
||||
v-model="model1.checkboxValue1"
|
||||
shape="square"
|
||||
@change="change"
|
||||
>
|
||||
<u-checkbox
|
||||
:customStyle="{marginRight: '16px'}"
|
||||
v-for="(item, index) in checkboxList1"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:name="item.name"
|
||||
>
|
||||
</u-checkbox>
|
||||
</u-checkbox-group>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="简介"
|
||||
prop="intro"
|
||||
borderBottom
|
||||
ref="item3"
|
||||
>
|
||||
<u--textarea
|
||||
placeholder="不低于3个字"
|
||||
v-model="model1.intro"
|
||||
count
|
||||
></u--textarea>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="住店时间"
|
||||
prop="hotel"
|
||||
labelWidth="80"
|
||||
borderBottom
|
||||
@click="showCalendar = true; hideKeyboard()"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.hotel"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择住店和离店时间"
|
||||
border="none"
|
||||
></u--input>
|
||||
<u-icon
|
||||
slot="right"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="验证码"
|
||||
prop="code"
|
||||
labelWidth="80"
|
||||
borderBottom
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.code"
|
||||
border="none"
|
||||
placeholder="请填写验证码"
|
||||
></u--input>
|
||||
<u-button
|
||||
slot="right"
|
||||
@tap="getCode"
|
||||
:text="tips"
|
||||
type="success"
|
||||
size="mini"
|
||||
:disabled="disabled1"
|
||||
></u-button>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
label="生日"
|
||||
prop="userInfo.birthday"
|
||||
borderBottom
|
||||
@click="showBirthday = true; hideKeyboard()"
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
v-model="model1.userInfo.birthday"
|
||||
disabled
|
||||
disabledColor="#ffffff"
|
||||
placeholder="请选择生日"
|
||||
border="none"
|
||||
></u--input>
|
||||
<u-icon
|
||||
slot="right"
|
||||
name="arrow-right"
|
||||
></u-icon>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<u-button
|
||||
type="primary"
|
||||
text="提交"
|
||||
customStyle="margin-top: 50px"
|
||||
@click="submit"
|
||||
></u-button>
|
||||
<u-button
|
||||
type="error"
|
||||
text="重置"
|
||||
customStyle="margin-top: 10px"
|
||||
@click="reset"
|
||||
></u-button>
|
||||
<u-action-sheet
|
||||
:show="showSex"
|
||||
:actions="actions"
|
||||
title="请选择性别"
|
||||
description="如果选择保密会报错"
|
||||
@close="showSex = false"
|
||||
@select="sexSelect"
|
||||
>
|
||||
</u-action-sheet>
|
||||
<u-calendar
|
||||
:show="showCalendar"
|
||||
mode="range"
|
||||
@confirm="calendarConfirm"
|
||||
@close="calendarClose"
|
||||
startText="住店"
|
||||
endText="离店"
|
||||
confirmDisabledText="请选择离店日期"
|
||||
:formatter="formatter"
|
||||
></u-calendar>
|
||||
<u-code
|
||||
ref="uCode"
|
||||
@change="codeChange"
|
||||
seconds="20"
|
||||
@start="disabled1 = true"
|
||||
@end="disabled1 = false"
|
||||
></u-code>
|
||||
<u-datetime-picker
|
||||
:show="showBirthday"
|
||||
:value="birthday"
|
||||
mode="date"
|
||||
closeOnClickOverlay
|
||||
@confirm="birthdayConfirm"
|
||||
@cancel="birthdayClose"
|
||||
@close="birthdayClose"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fileList1: [],
|
||||
disabled1: false,
|
||||
tips: '',
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
showBirthday: false,
|
||||
model1: {
|
||||
userInfo: {
|
||||
name: '楼兰',
|
||||
sex: '',
|
||||
birthday: ''
|
||||
},
|
||||
radiovalue1: '苹果',
|
||||
checkboxValue1: [],
|
||||
intro: '',
|
||||
code: ''
|
||||
},
|
||||
showSex: false,
|
||||
birthday: Number(new Date()),
|
||||
actions: [{
|
||||
name: '男',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
},
|
||||
{
|
||||
name: '保密',
|
||||
},
|
||||
],
|
||||
rules: {
|
||||
'userInfo.name': [{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change']
|
||||
}, {
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
return uni.$u.test.chinese(value);
|
||||
},
|
||||
message: "姓名必须为中文",
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ["change", "blur"],
|
||||
}],
|
||||
code: {
|
||||
type: 'string',
|
||||
required: true,
|
||||
len: 4,
|
||||
message: '请填写4位验证码',
|
||||
trigger: ['blur']
|
||||
},
|
||||
'userInfo.sex': {
|
||||
type: 'string',
|
||||
max: 1,
|
||||
required: true,
|
||||
message: '请选择男或女',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
radiovalue1: {
|
||||
type: 'string',
|
||||
min: 1,
|
||||
max: 2,
|
||||
message: '橙子有毒',
|
||||
trigger: ['change']
|
||||
},
|
||||
checkboxValue1: {
|
||||
type: 'array',
|
||||
min: 2,
|
||||
required: true,
|
||||
message: '不能太宅，至少选两项',
|
||||
trigger: ['change']
|
||||
},
|
||||
intro: {
|
||||
type: 'string',
|
||||
min: 3,
|
||||
required: true,
|
||||
message: '不低于3个字',
|
||||
trigger: ['change']
|
||||
},
|
||||
hotel: {
|
||||
type: 'string',
|
||||
min: 2,
|
||||
required: true,
|
||||
message: '请选择住店时间',
|
||||
trigger: ['change']
|
||||
},
|
||||
'userInfo.birthday': {
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请选择生日',
|
||||
trigger: ['change']
|
||||
},
|
||||
},
|
||||
radiolist1: [{
|
||||
name: '苹果',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '香蕉',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '毒橙子',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
checkboxList1: [{
|
||||
name: '羽毛球',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '跑步',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '爬山',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||||
this.$refs.form1.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
afterRead(event) {
|
||||
this.fileList1.push({
|
||||
url: event.file,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
},
|
||||
groupChange(n) {
|
||||
// console.log('groupChange', n);
|
||||
},
|
||||
radioChange(n) {
|
||||
// console.log('radioChange', n);
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
sexSelect(e) {
|
||||
this.model1.userInfo.sex = e.name
|
||||
this.$refs.form1.validateField('userInfo.sex')
|
||||
},
|
||||
change(e) {
|
||||
// console.log(e);
|
||||
},
|
||||
formatter(day) {
|
||||
const d = new Date()
|
||||
let month = d.getMonth() + 1
|
||||
const date = d.getDate()
|
||||
if (day.month == month && day.day == date + 3) {
|
||||
day.bottomInfo = '有优惠'
|
||||
day.dot = true
|
||||
}
|
||||
return day
|
||||
},
|
||||
calendarConfirm(e) {
|
||||
this.showCalendar = false
|
||||
this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
|
||||
this.$refs.form1.validateField('hotel')
|
||||
},
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
calendarClose() {
|
||||
this.showCalendar = false
|
||||
this.$refs.form1.validateField('hotel')
|
||||
},
|
||||
birthdayClose() {
|
||||
this.showBirthday = false
|
||||
this.$refs.form1.validateField('userInfo.birthday')
|
||||
},
|
||||
birthdayConfirm(e) {
|
||||
this.showBirthday = false
|
||||
this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
||||
this.$refs.form1.validateField('userInfo.birthday')
|
||||
},
|
||||
submit() {
|
||||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||||
this.$refs.form1.validate().then(res => {
|
||||
uni.$u.toast('校验通过')
|
||||
}).catch(errors => {
|
||||
uni.$u.toast('校验失败')
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
|
||||
'hotel', 'code', 'userInfo.birthday']
|
||||
this.$refs.form1.resetFields()
|
||||
this.$refs.form1.clearValidate()
|
||||
setTimeout(()=>{
|
||||
this.$refs.form1.clearValidate(validateList)
|
||||
// 或者使用 this.$refs.form1.clearValidate()
|
||||
},10)
|
||||
},
|
||||
hideKeyboard() {
|
||||
uni.hideKeyboard()
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<u-index-list :indexList="indexList">
|
||||
<view slot="header" class="list">
|
||||
<view class="list__item">
|
||||
<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<text class="list__item__user-name">新的朋友</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="list__item">
|
||||
<u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<text class="list__item__user-name">标签</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="list__item">
|
||||
<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<text class="list__item__user-name">朋友圈</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="list__item">
|
||||
<u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar>
|
||||
<text class="list__item__user-name">QQ</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
<template v-for="(item, index) in itemArr">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
|
||||
<!-- #endif -->
|
||||
<u-index-item :key="index">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<u-index-anchor :text="indexList[index]"></u-index-anchor>
|
||||
<!-- #endif -->
|
||||
<view class="list" v-for="(item1, index1) in item" :key="index1">
|
||||
<view class="list__item">
|
||||
<image class="list__item__avatar" :src="item1.url"></image>
|
||||
<text class="list__item__user-name">{{item1.name}}</text>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
</view>
|
||||
</u-index-item>
|
||||
</template>
|
||||
<view slot="footer" class="u-safe-area-inset--bottom">
|
||||
<text class="list__footer">共305位好友</text>
|
||||
</view>
|
||||
</u-index-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const indexList = () => {
|
||||
const indexList = []
|
||||
const charCodeOfA = 'A'.charCodeAt(0)
|
||||
indexList.push("↑")
|
||||
indexList.push("☆")
|
||||
for (let i = 0; i < 26; i++) {
|
||||
indexList.push(String.fromCharCode(charCodeOfA + i))
|
||||
}
|
||||
indexList.push('#')
|
||||
return indexList
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
indexList: indexList(),
|
||||
urls: [
|
||||
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||||
],
|
||||
names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
|
||||
"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itemArr() {
|
||||
return this.indexList.map(item => {
|
||||
const arr = []
|
||||
for (let i = 0; i < 10; i++) {
|
||||
arr.push({
|
||||
name: this.names[uni.$u.random(0, this.names.length - 1)],
|
||||
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
|
||||
})
|
||||
}
|
||||
return arr
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
|
||||
&__item {
|
||||
@include flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
|
||||
&__avatar {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&__user-name {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
color: $u-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
color: $u-tips-color;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
v-model="value"
|
||||
@change="change"
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">可清空内容</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
clearable
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">数字键盘</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
type="number"
|
||||
clearable
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">密码类型</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
password
|
||||
clearable
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示下划线</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="请输入内容"
|
||||
border="bottom"
|
||||
clearable
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">禁用状态</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="禁用状态"
|
||||
border="surround"
|
||||
disabled
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">圆形</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="请输入内容"
|
||||
border="surround"
|
||||
shape="circle"
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">前后图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--input
|
||||
placeholder="前置图标"
|
||||
prefixIcon="search"
|
||||
prefixIconStyle="font-size: 22px;color: #909399"
|
||||
></u--input>
|
||||
</view>
|
||||
<view
|
||||
class="u-demo-block__content"
|
||||
style="margin-top: 15px;"
|
||||
>
|
||||
<u--input
|
||||
placeholder="后置图标"
|
||||
suffixIcon="map-fill"
|
||||
suffixIconStyle="color: #909399"
|
||||
></u--input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">前后插槽</text>
|
||||
<view class="u-demo-block__content">
|
||||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<u-input placeholder="前置插槽">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<u--input placeholder="前置插槽">
|
||||
<!-- #endif -->
|
||||
<u--text
|
||||
text="http://"
|
||||
slot="prefix"
|
||||
margin="0 3px 0 0"
|
||||
type="tips"
|
||||
></u--text>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
</u-input>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
</u--input>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view
|
||||
class="u-demo-block__content"
|
||||
style="margin-top: 15px;"
|
||||
>
|
||||
<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<u-input placeholder="后置插槽">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<u--input placeholder="后置插槽">
|
||||
<!-- #endif -->
|
||||
<template slot="suffix">
|
||||
<u-code
|
||||
ref="uCode"
|
||||
@change="codeChange"
|
||||
seconds="20"
|
||||
changeText="X秒重新获取哈哈哈"
|
||||
></u-code>
|
||||
<u-button
|
||||
@tap="getCode"
|
||||
:text="tips"
|
||||
type="success"
|
||||
size="mini"
|
||||
></u-button>
|
||||
</template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
</u-input>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
</u--input>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
<u-gap
|
||||
bgColor="#fff"
|
||||
height="50"
|
||||
></u-gap>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tips: '',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
// console.log('v-model', newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
uni.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
uni.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
console.log('change', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-row customStyle="margin-bottom: 10px">
|
||||
<u-col span="6">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row customStyle="margin-bottom: 10px">
|
||||
<u-col span="4">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view class="demo-layout bg-purple-dark"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row justify="space-between">
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">分栏间隔</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">混合布局</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="2">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="demo-layout bg-purple-dark"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">分栏偏移</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-row
|
||||
justify="space-between"
|
||||
customStyle="margin-bottom: 10px"
|
||||
>
|
||||
<u-col span="3" offset="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="3" offset="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="3" offset="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">对齐方式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-row
|
||||
justify="space-between"
|
||||
customStyle="margin-bottom: 10px"
|
||||
>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple-light"></view>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="demo-layout bg-purple"></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wrap {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.demo-layout {
|
||||
height: 25px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #ced7e1;
|
||||
}
|
||||
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
|
||||
.bg-purple-dark {
|
||||
background: #99a9bf;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-list
|
||||
@scrolltolower="scrolltolower"
|
||||
>
|
||||
<u-list-item
|
||||
v-for="(item, index) in indexList"
|
||||
:key="index"
|
||||
>
|
||||
<u-cell
|
||||
:title="`列表长度-${index + 1}`"
|
||||
>
|
||||
<u-avatar
|
||||
slot="icon"
|
||||
shape="square"
|
||||
size="35"
|
||||
:src="item.url"
|
||||
customStyle="margin: -3px 5px -3px 0"
|
||||
></u-avatar>
|
||||
</u-cell>
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
indexList: [],
|
||||
urls: [
|
||||
'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/2.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/3.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/4.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/5.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/6.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/7.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/8.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/9.jpg',
|
||||
'https://cdn.uviewui.com/uview/album/10.jpg',
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadmore()
|
||||
},
|
||||
methods: {
|
||||
scrolltolower() {
|
||||
this.loadmore()
|
||||
},
|
||||
loadmore() {
|
||||
for (let i = 0; i < 30; i++) {
|
||||
this.indexList.push({
|
||||
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
status="loading"
|
||||
:isDot="true"
|
||||
:iconSize="17"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">无更多数据</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
:line="true"
|
||||
status="nomore"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">加载更多(点击触发事件)</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
:line="true"
|
||||
status="loadmore"
|
||||
@loadmore="loadmore"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
status="loading"
|
||||
loadingIcon="circle"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示点</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
status="nomore"
|
||||
:isDot="true"
|
||||
:line="true"
|
||||
color="#909399"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义提示语</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
status="loading"
|
||||
loadingText="努力加载中,先喝杯茶"
|
||||
color="#909399"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义线条颜色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-loadmore
|
||||
loadmoreText="看,我和别人不一样"
|
||||
color="#1CD29B"
|
||||
lineColor="#1CD29B"
|
||||
dashed
|
||||
:line="true"
|
||||
></u-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadmore() {
|
||||
console.log('loadmore');
|
||||
uni.$u.toast('加载更多')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-navbar
|
||||
title="模态框"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<u-gap
|
||||
height="20"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
@click="showModal(index)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-modal
|
||||
:content="content"
|
||||
title="标题"
|
||||
:show="show1"
|
||||
@confirm="() => show1 = false"
|
||||
></u-modal>
|
||||
<u-modal
|
||||
:content="content"
|
||||
:show="show2"
|
||||
@confirm="() => show2 = false"
|
||||
></u-modal>
|
||||
<u-modal
|
||||
:content="content"
|
||||
:show="show3"
|
||||
showCancelButton
|
||||
closeOnClickOverlay
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@close="close"
|
||||
></u-modal>
|
||||
<u-modal
|
||||
:content="content"
|
||||
:show="show4"
|
||||
showCancelButton
|
||||
asyncClose
|
||||
@confirm="confirm4"
|
||||
@cancel="() => show4 = false"
|
||||
></u-modal>
|
||||
<u-modal
|
||||
:content="content"
|
||||
:show="show5"
|
||||
showCancelButton
|
||||
buttonReverse
|
||||
@confirm="() => show5 = false"
|
||||
@cancel="() => show5 = false"
|
||||
></u-modal>
|
||||
<u-modal
|
||||
:content="content"
|
||||
title="标题"
|
||||
:show="show6"
|
||||
closeOnClickOverlay
|
||||
@confirm="() => show6 = false"
|
||||
@close="() => show6 = false"
|
||||
></u-modal>
|
||||
<u-modal
|
||||
title="利剑出鞘,一统江湖"
|
||||
:show="show7"
|
||||
closeOnClickOverlay
|
||||
@confirm="() => show7 = false"
|
||||
>
|
||||
<image
|
||||
style="width: 80px;height: 80px;"
|
||||
src="/static/uview/common/logo.png"
|
||||
></image>
|
||||
</u-modal>
|
||||
<u-modal
|
||||
title="标题"
|
||||
:show="show8"
|
||||
:content="content"
|
||||
closeOnClickOverlay
|
||||
showCancelButton
|
||||
>
|
||||
<u-button
|
||||
slot="confirmButton"
|
||||
text="确定"
|
||||
type="success"
|
||||
shape="circle"
|
||||
@click="show8 = false"
|
||||
></u-button>
|
||||
</u-modal>
|
||||
<u-modal
|
||||
:content="content"
|
||||
title="标题"
|
||||
:show="show9"
|
||||
:zoom="false"
|
||||
@confirm="() => show9 = false"
|
||||
></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: '模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作',
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false,
|
||||
show7: false,
|
||||
show8: false,
|
||||
show9: false,
|
||||
list: [{
|
||||
title: '基础使用',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png'
|
||||
},
|
||||
{
|
||||
title: '无标题',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/5.png'
|
||||
},
|
||||
{
|
||||
title: '带取消按钮',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/2.png'
|
||||
},
|
||||
{
|
||||
title: '异步关闭',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/6.png'
|
||||
},
|
||||
{
|
||||
title: '对调取消和确认按钮',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/3.png'
|
||||
},
|
||||
{
|
||||
title: '允许点击遮罩关闭',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/7.png'
|
||||
},
|
||||
{
|
||||
title: '传入slot',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/1.png'
|
||||
},
|
||||
{
|
||||
title: '自定义按钮',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/8.png'
|
||||
},
|
||||
{
|
||||
title: '淡入淡出动画',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/9.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showModal(index) {
|
||||
this[`show${index + 1}`] = true
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
confirm4() {
|
||||
setTimeout(() => {
|
||||
this.show4 = false
|
||||
}, 2000)
|
||||
},
|
||||
confirm() {
|
||||
this.show3 = false
|
||||
console.log('confirm');
|
||||
},
|
||||
cancel() {
|
||||
this.show3 = false
|
||||
console.log('cancel');
|
||||
},
|
||||
close() {
|
||||
this.show3 = false
|
||||
console.log('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<!-- 2.0.19支持autoBack，默认为false -->
|
||||
<u-navbar
|
||||
title="导航栏"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
:autoBack="true"
|
||||
>
|
||||
</u-navbar>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">基础功能</text>
|
||||
<u-navbar
|
||||
title="个人中心"
|
||||
:safeAreaInsetTop="false"
|
||||
:fixed="false"
|
||||
@rightClick="rightClick"
|
||||
@leftClick="leftClick"
|
||||
>
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">自定义文本</text>
|
||||
<u-navbar
|
||||
:safeAreaInsetTop="false"
|
||||
title="个人中心"
|
||||
:fixed="false"
|
||||
left-text="返回"
|
||||
rightIcon="map"
|
||||
>
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view class="u-page__item">
|
||||
<text class="u-page__item__title">自定义插槽</text>
|
||||
<u-navbar
|
||||
leftText="返回"
|
||||
:fixed="false"
|
||||
title="个人中心"
|
||||
:safeAreaInsetTop="false"
|
||||
>
|
||||
<view
|
||||
class="u-nav-slot"
|
||||
slot="left"
|
||||
>
|
||||
<u-icon
|
||||
name="arrow-left"
|
||||
size="19"
|
||||
></u-icon>
|
||||
<u-line
|
||||
direction="column"
|
||||
:hairline="false"
|
||||
length="16"
|
||||
margin="0 8px"
|
||||
></u-line>
|
||||
<u-icon
|
||||
name="home"
|
||||
size="20"
|
||||
></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
</view>
|
||||
<u-gap height="50"></u-gap>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
rightClick() {
|
||||
console.log('rightClick');
|
||||
},
|
||||
leftClick() {
|
||||
console.log('leftClick');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
background-color: $u-bg-color;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
.u-page {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
background-color: $u-bg-color;
|
||||
|
||||
&__item {
|
||||
|
||||
&__title {
|
||||
color: $u-tips-color;
|
||||
background-color: $u-bg-color;
|
||||
padding: 15px;
|
||||
font-size: 15px;
|
||||
|
||||
&__slot-title {
|
||||
color: $u-primary;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-nav-slot {
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-width: 0.5px;
|
||||
border-radius: 100px;
|
||||
border-color: $u-border-color;
|
||||
padding: 3px 7px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-no-network
|
||||
@disconnected="disconnected"
|
||||
@connected="connected"
|
||||
@retry="retry"
|
||||
></u-no-network>
|
||||
<view class="u-content">
|
||||
<view class="u-content__circle">
|
||||
<u-icon
|
||||
name="checkbox-mark"
|
||||
color="#fff"
|
||||
size="30"
|
||||
></u-icon>
|
||||
</view>
|
||||
<text class="u-content__normal">网络正常</text>
|
||||
<text class="u-content__tips">请您断开设备的WiFi和数据连接(或开启飞行模式)，即可看到效果</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
disconnected() {
|
||||
console.log('disconnected');
|
||||
},
|
||||
connected() {
|
||||
console.log('connected');
|
||||
},
|
||||
retry() {
|
||||
console.log('retry');
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-content {
|
||||
padding: 150px 60px 0;
|
||||
@include flex(column);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__circle {
|
||||
background-color: $u-success;
|
||||
@include flex;
|
||||
border-radius: 100px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__normal {
|
||||
font-size: 15px;
|
||||
color: $u-success;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&__tips {
|
||||
color: $u-tips-color;
|
||||
font-size: 13px;
|
||||
margin-top: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<view class="u-page" ref="page">
|
||||
<u-navbar
|
||||
title="选择器"
|
||||
@leftClick="navigateBack"
|
||||
safeAreaInsetTop
|
||||
fixed
|
||||
placeholder
|
||||
></u-navbar>
|
||||
<u-cell-group>
|
||||
<u-cell
|
||||
@click="showPicker(index)"
|
||||
:title="item.title"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
isLink
|
||||
>
|
||||
<image
|
||||
slot="icon"
|
||||
class="u-cell-icon"
|
||||
:src="item.iconUrl"
|
||||
mode="widthFix"
|
||||
></image>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
<u-picker
|
||||
:show="show1"
|
||||
:columns="columns1"
|
||||
@change="change"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
:show="show2"
|
||||
:columns="columns2"
|
||||
:defaultIndex="[1]"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
@change="change"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
:show="show3"
|
||||
:columns="columns3"
|
||||
ref="uPicker3"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
@change="changeHandler1"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
:show="show4"
|
||||
:columns="columns4"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
:loading="loading"
|
||||
@change="changeHandler2"
|
||||
ref="uPicker4"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
:show="show5"
|
||||
:columns="columns5"
|
||||
title="标题太长就会显示省略号"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
@change="change"
|
||||
></u-picker>
|
||||
<u-picker
|
||||
:show="show6"
|
||||
:columns="columns6"
|
||||
closeOnClickOverlay
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
@close="close"
|
||||
@change="change"
|
||||
></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
loading: false,
|
||||
columnData: [
|
||||
['深圳', '厦门', '上海', '拉萨'],
|
||||
['得州', '华盛顿', '纽约', '阿拉斯加']
|
||||
],
|
||||
columns1: [
|
||||
['中国', '美国', '日本']
|
||||
],
|
||||
columns2: [
|
||||
['中国', '美国', '日本']
|
||||
],
|
||||
columns3: [
|
||||
['中国', '美国'],
|
||||
['深圳', '厦门', '上海', '拉萨']
|
||||
],
|
||||
columns4: [
|
||||
['中国', '美国'],
|
||||
['深圳', '厦门', '上海', '拉萨']
|
||||
],
|
||||
columns5: [
|
||||
['中国', '美国', '日本']
|
||||
],
|
||||
columns6: [
|
||||
['中国', '美国', '日本']
|
||||
],
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: false,
|
||||
list: [{
|
||||
title: '基础使用',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/2.png'
|
||||
},
|
||||
{
|
||||
title: '设置默认项',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/5.png'
|
||||
},
|
||||
{
|
||||
title: '多列联动',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/1.png'
|
||||
},
|
||||
{
|
||||
title: '加载中状态(切换第一列)',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/3.png'
|
||||
},
|
||||
{
|
||||
title: '设置标题',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/4.png'
|
||||
}, {
|
||||
title: '允许点击遮罩关闭',
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/picker/6.png'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeHandler1(e) {
|
||||
this.change(e)
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker3
|
||||
} = e
|
||||
if (columnIndex === 0) {
|
||||
picker.setColumnValues(1, this.columnData[index])
|
||||
}
|
||||
},
|
||||
changeHandler2(e) {
|
||||
this.change(e)
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker4
|
||||
} = e
|
||||
if (columnIndex === 0) {
|
||||
this.loading = true
|
||||
uni.$u.sleep(1500).then(() => {
|
||||
picker.setColumnValues(1, this.columnData[index])
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
navigateBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
change(e) {
|
||||
// console.log('change', e);
|
||||
},
|
||||
showPicker(index) {
|
||||
this.index = index + 1
|
||||
this[`show${index + 1}`] = true
|
||||
},
|
||||
close() {
|
||||
// console.log('close');
|
||||
this[`show${this.index}`] = false
|
||||
},
|
||||
confirm(e) {
|
||||
// console.log('confirm', e);
|
||||
this[`show${this.index}`] = false
|
||||
},
|
||||
cancel() {
|
||||
// console.log('cancel');
|
||||
this[`show${this.index}`] = false
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<u-read-more
|
||||
ref="uReadMore"
|
||||
:showHeight="showHeight"
|
||||
toggle
|
||||
@open="open"
|
||||
@close="close"
|
||||
>
|
||||
<u-parse
|
||||
:content="content"
|
||||
@load="load"
|
||||
:tag-style="tagStyle"
|
||||
></u-parse>
|
||||
</u-read-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: `<p>浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
|
||||
忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
|
||||
沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
|
||||
我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。</p>`,
|
||||
showHeight: 200,
|
||||
tagStyle: {
|
||||
p: 'color: #606266; line-height: 24px;'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.$refs.uReadMore.init()
|
||||
},
|
||||
open(name) {
|
||||
console.log('open', name);
|
||||
},
|
||||
close(name) {
|
||||
console.log('close', name);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title" style="margin-bottom: 15px;">基础使用</text>
|
||||
<u-scroll-list
|
||||
indicatorColor="#fff0f0"
|
||||
indicatorActiveColor="#f56c6c"
|
||||
@right="right"
|
||||
@left="left"
|
||||
>
|
||||
<view
|
||||
class="scroll-list"
|
||||
style="flex-direction: row;"
|
||||
>
|
||||
<view
|
||||
class="scroll-list__goods-item"
|
||||
v-for="(item, index) in goodsArr"
|
||||
:key="index"
|
||||
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
|
||||
>
|
||||
<image
|
||||
class="scroll-list__goods-item__image"
|
||||
:src="goodsBaseUrl + item.thumbnail"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="scroll-list__show-more"
|
||||
@tap="showMore"
|
||||
>
|
||||
<text class="scroll-list__show-more__text">查看更多</text>
|
||||
<u-icon
|
||||
name="arrow-leftward"
|
||||
color="#f56c6c"
|
||||
size="12"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">多菜单扩展</text>
|
||||
<u-scroll-list>
|
||||
<view class="scroll-list">
|
||||
<view
|
||||
class="scroll-list__line"
|
||||
v-for="(item, index) in menuArr"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="scroll-list__line__item"
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
|
||||
>
|
||||
<image
|
||||
class="scroll-list__line__item__image"
|
||||
:src="menuBaseUrl + item1.icon"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="scroll-list__line__item__text">{{ item1.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
|
||||
menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
|
||||
goodsArr: [{
|
||||
price: '230.5',
|
||||
thumbnail: '1.jpg'
|
||||
},
|
||||
{
|
||||
price: '74.1',
|
||||
thumbnail: '2.jpg'
|
||||
},
|
||||
{
|
||||
price: '8457',
|
||||
thumbnail: '6.jpg'
|
||||
},
|
||||
{
|
||||
price: '1442',
|
||||
thumbnail: '5.jpg'
|
||||
},
|
||||
{
|
||||
price: '541',
|
||||
thumbnail: '2.jpg'
|
||||
},
|
||||
{
|
||||
price: '234',
|
||||
thumbnail: '3.jpg'
|
||||
},
|
||||
{
|
||||
price: '562',
|
||||
thumbnail: '4.jpg'
|
||||
},
|
||||
{
|
||||
price: '251.5',
|
||||
thumbnail: '1.jpg'
|
||||
}
|
||||
],
|
||||
menuArr: [
|
||||
[{
|
||||
name: '天猫新品',
|
||||
icon: '11.png'
|
||||
},
|
||||
{
|
||||
name: '今日爆款',
|
||||
icon: '9.png'
|
||||
}, {
|
||||
name: '天猫国际',
|
||||
icon: '17.png'
|
||||
}, {
|
||||
name: '饿了么',
|
||||
icon: '6.png'
|
||||
}, {
|
||||
name: '天猫超市',
|
||||
icon: '11.png'
|
||||
}, {
|
||||
name: '分类',
|
||||
icon: '2.png'
|
||||
}, {
|
||||
name: '天猫美食',
|
||||
icon: '3.png'
|
||||
}, {
|
||||
name: '阿里健康',
|
||||
icon: '12.png'
|
||||
}, {
|
||||
name: '口碑生活',
|
||||
icon: '7.png'
|
||||
}
|
||||
],
|
||||
[{
|
||||
name: '充值中心',
|
||||
icon: '8.png'
|
||||
},
|
||||
{
|
||||
name: '机票酒店',
|
||||
icon: '10.png'
|
||||
}, {
|
||||
name: '金币庄园',
|
||||
icon: '18.png'
|
||||
}, {
|
||||
name: '阿里拍卖',
|
||||
icon: '15.png'
|
||||
}, {
|
||||
name: '淘宝吃货',
|
||||
icon: '16.png'
|
||||
}, {
|
||||
name: '闲鱼',
|
||||
icon: '4.png'
|
||||
}, {
|
||||
name: '会员中心',
|
||||
icon: '6.png'
|
||||
}, {
|
||||
name: '造点新货',
|
||||
icon: '13.png'
|
||||
}, {
|
||||
name: '土货鲜食',
|
||||
icon: '14.png'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showMore() {
|
||||
uni.$u.toast('查看更多')
|
||||
},
|
||||
left() {
|
||||
console.log('left');
|
||||
},
|
||||
right() {
|
||||
console.log('right');
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scroll-list {
|
||||
@include flex(column);
|
||||
|
||||
&__goods-item {
|
||||
margin-right: 20px;
|
||||
|
||||
&__image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: #f56c6c;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__show-more {
|
||||
background-color: #fff0f0;
|
||||
border-radius: 3px;
|
||||
padding: 3px 6px;
|
||||
@include flex(column);
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
color: #f56c6c;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__line {
|
||||
@include flex;
|
||||
margin-top: 10px;
|
||||
|
||||
&__item {
|
||||
margin-right: 15px;
|
||||
|
||||
&__image {
|
||||
width: 61px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 5px;
|
||||
color: $u-content-color;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--no-margin-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
rows="3"
|
||||
title
|
||||
loading
|
||||
></u-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义段落行数</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
rows="2"
|
||||
title
|
||||
loading
|
||||
></u-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">设置段落宽度</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
rows="2"
|
||||
title
|
||||
:rowsWidth="['100%', '35%']"
|
||||
loading
|
||||
></u-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">设置段落高度</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
rows="3"
|
||||
title
|
||||
:rowsWidth="['100%', '100%', '100%']"
|
||||
:rowsHeight="['18px', '18px', '80px']"
|
||||
loading
|
||||
></u-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">是否开启动画</text>
|
||||
<u-switch
|
||||
v-model="switch1"
|
||||
space="2"
|
||||
inactiveColor="#e6e6e6"
|
||||
></u-switch>
|
||||
<u-gap
|
||||
height="15"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
:animate="switch1"
|
||||
rows="3"
|
||||
title
|
||||
loading
|
||||
></u-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">展示头像</text>
|
||||
<u-gap
|
||||
height="15"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
:animate="switch1"
|
||||
rows="3"
|
||||
title
|
||||
loading
|
||||
avatar
|
||||
></u-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">切换状态</text>
|
||||
<u-switch
|
||||
v-model="switch2"
|
||||
space="2"
|
||||
inactiveColor="#e6e6e6"
|
||||
></u-switch>
|
||||
<u-gap
|
||||
height="15"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<view class="u-demo-block__content">
|
||||
<u-skeleton
|
||||
rows="2"
|
||||
title
|
||||
:loading="switch2"
|
||||
avatar
|
||||
rowsHeight="14"
|
||||
>
|
||||
<!-- 需要在外部多嵌套一层占位view，否则在nvue下会导致样式失效 -->
|
||||
<view>
|
||||
<view class="u-skeleton-slot">
|
||||
<image
|
||||
src="/static/uview/common/logo.png"
|
||||
class="u-skeleton-slot__image"
|
||||
></image>
|
||||
<view class="u-skeleton-slot__content">
|
||||
<u--text
|
||||
text="利剑出鞘,一统江湖"
|
||||
type="main"
|
||||
size="16"
|
||||
></u--text>
|
||||
<u--text
|
||||
type="tips"
|
||||
size="14"
|
||||
customStyle="margin-top: 5px"
|
||||
text="众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-skeleton>
|
||||
</view>
|
||||
<u-gap height="50" bgColor="transparent"></u-gap>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switch1: true,
|
||||
switch2: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-skeleton-slot {
|
||||
@include flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&__image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础演示</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps :current="current1">
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示点类型</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps
|
||||
:current="1"
|
||||
dot
|
||||
>
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
<u-steps
|
||||
:current="1"
|
||||
dot
|
||||
direction="column"
|
||||
>
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">错误状态</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps :current="1">
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
error
|
||||
title="仓库着火"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="破产清算"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps
|
||||
:current="1"
|
||||
activeIcon="checkmark"
|
||||
inactiveIcon="arrow-right"
|
||||
>
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义插槽</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps :current="1">
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
<text class="slot-icon" slot="icon">运</text>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义颜色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps :current="1" activeColor="#3c9cff">
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">竖向展示</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-steps
|
||||
:current="1"
|
||||
direction="column"
|
||||
>
|
||||
<u-steps-item
|
||||
title="已下单"
|
||||
desc="10:30"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="已出库"
|
||||
desc="10:35"
|
||||
>
|
||||
</u-steps-item>
|
||||
<u-steps-item
|
||||
title="运输中"
|
||||
desc="11:40"
|
||||
>
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current1: 1
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.slot-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-color: $u-warning;
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 21px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-subsection
|
||||
:list="list"
|
||||
mode="subsection"
|
||||
:current="current1"
|
||||
@change="change1"
|
||||
></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">按钮模式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-subsection
|
||||
:list="list"
|
||||
mode="button"
|
||||
:current="current2"
|
||||
@change="change2"
|
||||
></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">更换主题</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-subsection
|
||||
:list="list"
|
||||
mode="subsection"
|
||||
:current="current3"
|
||||
activeColor="#f56c6c"
|
||||
@change="change3"
|
||||
></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">默认位置</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-subsection
|
||||
:list="list"
|
||||
mode="button"
|
||||
:current="current4"
|
||||
activeColor="#f9ae3d"
|
||||
@change="change4"
|
||||
></u-subsection>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current1: 0,
|
||||
current2: 0,
|
||||
current3: 0,
|
||||
current4: 1,
|
||||
list: ['未付款', '待评价', '已付款'],
|
||||
// 或者如下，也可以配置keyName参数修改对象键值
|
||||
// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change1(index) {
|
||||
this.current1 = index
|
||||
},
|
||||
change2(index) {
|
||||
this.current2 = index
|
||||
},
|
||||
change3(index) {
|
||||
this.current3 = index
|
||||
},
|
||||
change4(index) {
|
||||
this.current4 = index
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album {
|
||||
@include flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&__avatar {
|
||||
background-color: $u-bg-color;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<u-swiper
|
||||
:list="list1"
|
||||
@change="change"
|
||||
@click="click"
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">带标题</text>
|
||||
<u-swiper
|
||||
:list="list2"
|
||||
keyName="image"
|
||||
showTitle
|
||||
:autoplay="false"
|
||||
circular
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">带指示器</text>
|
||||
<u-swiper
|
||||
:list="list3"
|
||||
indicator
|
||||
indicatorMode="line"
|
||||
circular
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">加载中</text>
|
||||
<u-swiper
|
||||
:list="list3"
|
||||
loading
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">嵌入视频</text>
|
||||
<u-swiper
|
||||
:list="list4"
|
||||
keyName="url"
|
||||
:autoplay="false"
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义指示器</text>
|
||||
<u-swiper
|
||||
:list="list5"
|
||||
@change="e => current = e.current"
|
||||
:autoplay="false"
|
||||
>
|
||||
<view
|
||||
slot="indicator"
|
||||
class="indicator"
|
||||
>
|
||||
<view
|
||||
class="indicator__dot"
|
||||
v-for="(item, index) in list5"
|
||||
:key="index"
|
||||
:class="[index === current && 'indicator__dot--active']"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</u-swiper>
|
||||
<u-gap
|
||||
bgColor="transparent"
|
||||
height="15"
|
||||
></u-gap>
|
||||
<u-swiper
|
||||
:list="list6"
|
||||
@change="e => currentNum = e.current"
|
||||
:autoplay="false"
|
||||
indicatorStyle="right: 20px"
|
||||
>
|
||||
<view
|
||||
slot="indicator"
|
||||
class="indicator-num"
|
||||
>
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
|
||||
</view>
|
||||
</u-swiper>
|
||||
</view>
|
||||
<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">卡片式</text>
|
||||
<u-swiper
|
||||
:list="list3"
|
||||
previousMargin="30"
|
||||
nextMargin="30"
|
||||
circular
|
||||
:autoplay="false"
|
||||
radius="5"
|
||||
bgColor="#ffffff"
|
||||
></u-swiper>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
currentNum: 0,
|
||||
list: [{
|
||||
// image: 'https://cdn.uviewui.com/uview/resources/video.mp4',
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
|
||||
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
list1: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
],
|
||||
list2: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
|
||||
type: 'image',
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
list3: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
],
|
||||
list4: [{
|
||||
url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
|
||||
poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
},
|
||||
{
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
},
|
||||
{
|
||||
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||||
}
|
||||
],
|
||||
list5: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
],
|
||||
list6: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
// console.log('change', e);
|
||||
},
|
||||
click(e) {
|
||||
console.log('click', e);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.indicator {
|
||||
@include flex(row);
|
||||
justify-content: center;
|
||||
|
||||
&__dot {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
margin: 0 5px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&--active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-num {
|
||||
padding: 2px 0;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
border-radius: 100px;
|
||||
width: 35px;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
|
||||
&__text {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--form>
|
||||
<u-form-item label="电话"></u-form-item>
|
||||
</u--form>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础演示</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs :list="list1" @click="click" :current="3">
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-demo-block"
|
||||
style="margin-bottom: 0;"
|
||||
>
|
||||
<text class="u-demo-block__title">粘性布局</text>
|
||||
</view>
|
||||
<u-sticky bgColor="#fff">
|
||||
<u-tabs
|
||||
:list="list1"
|
||||
>
|
||||
</u-tabs>
|
||||
</u-sticky>
|
||||
<u-gap
|
||||
height="23"
|
||||
bgColor="#fff"
|
||||
></u-gap>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示徽标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs :list="list2">
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">禁止滚动</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs :list="list6" :scrollable="false">
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">禁用菜单</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs :list="list3">
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自定义样式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs
|
||||
:list="list4"
|
||||
lineWidth="30"
|
||||
lineColor="#f56c6c"
|
||||
:activeStyle="{
|
||||
color: '#303133',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}"
|
||||
:inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)'
|
||||
}"
|
||||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
|
||||
>
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">滑块设置背景图</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs
|
||||
:list="list4"
|
||||
lineWidth="20"
|
||||
lineHeight="7"
|
||||
:lineColor="`url(${lineBg}) 100% 100%`"
|
||||
:activeStyle="{
|
||||
color: '#303133',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}"
|
||||
:inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)'
|
||||
}"
|
||||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
|
||||
>
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">右侧自定义插槽</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tabs :list="list1">
|
||||
<view
|
||||
slot="right"
|
||||
style="padding-left: 4px;"
|
||||
@tap="$u.toast('插槽被点击')"
|
||||
>
|
||||
<u-icon
|
||||
name="list"
|
||||
size="21"
|
||||
bold
|
||||
></u-icon>
|
||||
</view>
|
||||
</u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=";
|
||||
export default {
|
||||
mixins: [uni.$u.mixin],
|
||||
data() {
|
||||
return {
|
||||
lineBg,
|
||||
list1: [{
|
||||
name: '关注',
|
||||
}, {
|
||||
name: '推荐',
|
||||
}, {
|
||||
name: '电影'
|
||||
}, {
|
||||
name: '科技'
|
||||
}, {
|
||||
name: '音乐'
|
||||
}, {
|
||||
name: '美食'
|
||||
}, {
|
||||
name: '文化'
|
||||
}, {
|
||||
name: '财经'
|
||||
}, {
|
||||
name: '手工'
|
||||
}],
|
||||
list2: [{
|
||||
name: '关注'
|
||||
}, {
|
||||
name: '推荐',
|
||||
badge: {
|
||||
isDot: true
|
||||
}
|
||||
}, {
|
||||
name: '电影',
|
||||
badge: {
|
||||
value: 5,
|
||||
}
|
||||
}, {
|
||||
name: '科技'
|
||||
}, {
|
||||
name: '音乐'
|
||||
}, {
|
||||
name: '美食'
|
||||
}, {
|
||||
name: '文化'
|
||||
}, {
|
||||
name: '财经'
|
||||
}, {
|
||||
name: '手工'
|
||||
}],
|
||||
list3: [{
|
||||
name: '关注'
|
||||
}, {
|
||||
name: '推荐',
|
||||
}, {
|
||||
name: '电影',
|
||||
disabled: true
|
||||
}, {
|
||||
name: '科技'
|
||||
}, {
|
||||
name: '音乐'
|
||||
}, {
|
||||
name: '美食'
|
||||
}, {
|
||||
name: '文化'
|
||||
}, {
|
||||
name: '财经'
|
||||
}, {
|
||||
name: '手工'
|
||||
}],
|
||||
list4: [{
|
||||
name: '关注'
|
||||
}, {
|
||||
name: '推荐',
|
||||
badge: {
|
||||
isDot: true
|
||||
}
|
||||
}, {
|
||||
name: '电影',
|
||||
}, {
|
||||
name: '科技'
|
||||
}, {
|
||||
name: '音乐'
|
||||
}, {
|
||||
name: '美食'
|
||||
}, {
|
||||
name: '文化'
|
||||
}, {
|
||||
name: '财经'
|
||||
}, {
|
||||
name: '手工'
|
||||
}],
|
||||
list6: [
|
||||
{
|
||||
name: '关注'
|
||||
}, {
|
||||
name: '推荐',
|
||||
}, {
|
||||
name: '电影',
|
||||
}, {
|
||||
name: '科技'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
click(item) {
|
||||
console.log('item', item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
padding-bottom: 500px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础功能</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text text="我用十年青春,赴你最后之约"></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">设置主题</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
text="主色"
|
||||
type="primary"
|
||||
></u--text>
|
||||
</view>
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
type="error"
|
||||
text="错误"
|
||||
></u--text>
|
||||
</view>
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
type="success"
|
||||
text="成功"
|
||||
></u--text>
|
||||
</view>
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
type="warning"
|
||||
text="警告"
|
||||
></u--text>
|
||||
</view>
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
type="info"
|
||||
text="信息"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">拨打电话</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
mode="phone"
|
||||
text="15019479320"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">日期格式化</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
mode="date"
|
||||
text="1612959739"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">姓名脱敏</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
mode="name"
|
||||
text="张三三"
|
||||
format="encrypt"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">超链接</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
mode="link"
|
||||
text="Go to uView docs"
|
||||
href="https://www.uviewui.com"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">显示金额</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
mode="price"
|
||||
text="728732.32"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">前后图标</text>
|
||||
<view class="u-demo-block__content">
|
||||
<view
|
||||
class="u-page__text-item"
|
||||
style="margin-right: 50px;"
|
||||
>
|
||||
<u--text
|
||||
prefixIcon="baidu"
|
||||
iconStyle="font-size: 19px"
|
||||
text="百度一下"
|
||||
></u--text>
|
||||
</view>
|
||||
<view class="u-page__text-item">
|
||||
<u--text
|
||||
suffixIcon="arrow-rightward"
|
||||
iconStyle="font-size: 18px"
|
||||
text="查看更多"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">超出隐藏</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--text
|
||||
:lines="2"
|
||||
text="关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它们表示感谢。"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">小程序开放能力</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--text
|
||||
text="分享到微信"
|
||||
openType="share"
|
||||
type="success"
|
||||
@click="clickHandler"
|
||||
></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {},
|
||||
methods: {
|
||||
clickHandler() {
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.$u.toast('请在微信小程序内查看效果')
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page__text-item {
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--textarea
|
||||
v-model="value1"
|
||||
placeholder="请输入内容"
|
||||
></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">字数统计</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--textarea
|
||||
v-model="value2"
|
||||
placeholder="请输入内容"
|
||||
count
|
||||
></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自动增高</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--textarea
|
||||
v-model="value3"
|
||||
placeholder="请输入内容"
|
||||
autoHeight
|
||||
></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">禁用状态</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--textarea
|
||||
v-model="value4"
|
||||
placeholder="文本域已被禁用"
|
||||
disabled
|
||||
count
|
||||
></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">下划线模式</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u--textarea
|
||||
v-model="value5"
|
||||
placeholder="请输入内容"
|
||||
border="bottom"
|
||||
></u--textarea>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '统计字数',
|
||||
value3: '',
|
||||
value4: '',
|
||||
value5: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatter(value) {
|
||||
return value.replace(/[^0-9]/ig,"")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="u-page">
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">基础使用</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tooltip
|
||||
:text="text1"
|
||||
overlay
|
||||
></u-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">下方显示</text>
|
||||
<view class="u-demo-block__content" style="padding-bottom: 30px;">
|
||||
<u-tooltip
|
||||
:text="text2"
|
||||
direction="bottom"
|
||||
></u-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">扩展按钮</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tooltip
|
||||
:text="text3"
|
||||
:buttons="buttons1"
|
||||
@click="click"
|
||||
></u-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">自动调整位置</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tooltip
|
||||
:text="text4"
|
||||
:buttons="buttons2"
|
||||
></u-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-demo-block">
|
||||
<text class="u-demo-block__title">高亮选中文本背景色</text>
|
||||
<view class="u-demo-block__content">
|
||||
<u-tooltip
|
||||
:text="text5"
|
||||
:buttons="buttons3"
|
||||
bgColor="#e3e4e6"
|
||||
></u-tooltip>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
text1: '长按文本，上方提示',
|
||||
text2: '长按文本，下方提示',
|
||||
text3: '显示多个扩展按钮',
|
||||
text4: '自动调整气泡位置',
|
||||
text5: '长按文本，显示背景色',
|
||||
buttons1: ['扩展'],
|
||||
buttons2: ['扩展', '搜索', '翻译'],
|
||||
buttons3: ['扩展', '搜索', '翻译']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
click(index) {
|
||||
console.log('index', index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-page {
|
||||
|
||||
}
|
||||
|
||||
.u-demo-block__content {
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user