Skip to content

U
uni-app

weixin_45791545 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 072cbc02 编写于 作者: 蓝色的小猫咪's avatar 蓝色的小猫咪
浏览文件
操作

重构 hello-uniapp

上级 ea663a4e
展开全部 隐藏空白更改
内联 并排
Showing with 1890 addition and 2746 deletion
examples/hello-uniapp/App.vue
浏览文件 @ 072cbc02
......@@ -41,229 +41,36 @@
}
}
</script>
<style>
/* 这是页面的公用css */
/* uni.css - 通用组件、模板样式库，可以在创建项目后应用，当作一套ui库 */
@import "./common/uni.css";
/* 以下样式用于 hello uni-app 演示所需，新版本已经简化 */
page {
background-color: #F8F8F8;
background-color:#F4F5F6;
height: 100%;
font-size: 32upx;
line-height: 1.6;
}
checkbox,
radio {
margin-right: 10upx;
}
button {
margin-top: 20upx;
margin-bottom: 20upx;
}
form {
width: 100%;
}
/* page */
.container {
display: flex;
flex-direction: column;
min-height: 100%;
justify-content: space-between;
font-size: 32upx;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}
.page-head {
padding: 60upx 50upx 80upx;
text-align: center;
line-height: initial;
height: 60upx;
}
.page-head-title {
display: inline-block;
padding: 0 40upx;
font-size: 30upx;
height: 60upx;
line-height: 60upx;
color: #BEBEBE;
box-sizing: border-box;
border-bottom: 2upx solid #D8D8D8;
}
.page-head-desc {
padding-top: 20upx;
color: #9B9B9B;
font-size: 32upx;
}
.page-body {
width: 100%;
flex-grow: 1;
overflow-x: hidden;
}
.page-body-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.page-body-wording {
text-align: center;
padding: 200upx 100upx;
}
.page-body-info {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
width: 100%;
padding: 50upx 0 150upx 0;
}
.page-body-title {
margin-bottom: 100upx;
font-size: 32upx;
}
.page-body-text {
font-size: 30upx;
line-height: 52upx;
color: #ccc;
}
.page-body-text-small {
font-size: 24upx;
color: #000;
margin-bottom: 100upx;
}
.page-foot {
margin: 100upx 0 30upx 0;
text-align: center;
color: #1aad19;
font-size: 0;
}
.icon-foot {
width: 152upx;
height: 23upx;
}
.page-section {
width: 100%;
margin-bottom: 60upx;
}
.page-section_center {
display: flex;
flex-direction: column;
align-items: center;
}
.page-section:last-child {
margin-bottom: 0;
}
.page-section-gap {
box-sizing: border-box;
padding: 0 30upx;
}
.page-section-spacing {
box-sizing: border-box;
padding: 0 80upx;
}
.page-section-title {
font-size: 28upx;
color: #999999;
margin-top: 10upx;
margin-bottom: 10upx;
padding-left: 30upx;
padding-right: 30upx;
}
.page-section-gap .page-section-title {
padding-left: 0;
padding-right: 0;
}
/* example */
.index-hd {
padding: 90upx;
text-align: center;
}
.index-logo {
font-size:28upx;
line-height: 1.8;
},
.uni-header-logo{
padding:30upx;
text-align:center;
margin-top:10upx;
}
.uni-header-logo image{
width: 140upx;
height: 140upx;
}
.btn-area {
margin-top: 60upx;
box-sizing: border-box;
width: 100%;
padding: 0 30upx;
}
.image-plus {
width: 150upx;
height: 150upx;
border: 2upx solid #D9D9D9;
position: relative;
}
.image-plus-nb {
border: 0;
}
.image-plus-text {
color: #888888;
font-size: 28upx;
}
.image-plus-horizontal {
position: absolute;
top: 50%;
left: 50%;
background-color: #d9d9d9;
width: 4upx;
height: 80upx;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.image-plus-vertical {
position: absolute;
top: 50%;
left: 50%;
background-color: #d9d9d9;
width: 80upx;
height: 4upx;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.color1 {
background-color: #1AAD19;
color: #FFFFFF;
}
.color2 {
background-color: #2782D7;
color: #FFFFFF;
.uni-hello-text{
color:#7A7E83;
}
.color3 {
background-color: #F1F1F1;
color: #353535;
.uni-hello-addfile{
text-align:center;
line-height:300upx;
background:#FFF;
padding:50upx;
margin-top:10px;
font-size:38upx;
color:#808080;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/README.md
浏览文件 @ 072cbc02
# hello-uniapp
## 注意事项
* 运行本示例需要HBuilderX 1.1.0.20181030版本（或以上版本）
* [uni-app 尺寸单位更改及历史版本兼容说明](http://ask.dcloud.net.cn/article/35014)
* 运行本示例需要HBuilderX 0.1.49版本（或以上版本）
* [uni-app 尺寸单位更改及历史版本兼容说明](http://ask.dcloud.net.cn/article/35014)
\ No newline at end of file
examples/hello-uniapp/common/uni.css
浏览文件 @ 072cbc02
......@@ -5,84 +5,172 @@
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
/*通用 */
view{
font-size:28upx;
line-height:1.8;
}
progress, checkbox-group{
width: 100%;
}
form {
width: 100%;
}
.uni-flex {
display: flex;
flex-direction: row;
}
.uni-flex-item {
flex: 1;
}
.uni-row {
flex-direction: row;
}
.uni-column {
flex-direction: column;
}
.uni-h6 {
font-size: 24upx;
color: #8f8f94;
.uni-link{
color:#576B95;
font-size:26upx;
}
.uni-h5 {
font-size: 28upx;
color: #8f8f94;
.uni-center{
text-align:center;
}
.uni-h4 {
font-size: 36upx;
.uni-inline-item{
display: flex;
flex-direction: row;
}
.uni-h3 {
font-size: 48upx;
font-weight: 600;
/* page */
.uni-page-head{
padding:35upx;
text-align: center;
}
.uni-h2 {
font-size: 60upx;
font-weight: 600;
.uni-page-head-title {
display: inline-block;
padding: 0 40upx;
font-size: 30upx;
height: 88upx;
line-height: 88upx;
color: #BEBEBE;
box-sizing: border-box;
border-bottom: 2upx solid #D8D8D8;
}
.uni-h1 {
font-size: 72upx;
font-weight: 600;
.uni-page-body {
width: 100%;
flex-grow: 1;
overflow-x: hidden;
}
.uni-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.uni-padding-wrap{
width:690upx;
padding:0 30upx;
}
.uni-word {
text-align: center;
padding:200upx 100upx;
}
.uni-title {
font-size:30upx;
font-weight:500;
padding:20upx 0;
line-height:1.5;
}
.uni-title text{font-size:24upx; color:#888;}
.uni-text-gray{
color: #ccc;
}
.uni-text-small {
font-size:24upx;
}
.uni-common-mb{
margin-bottom:30upx;
}
.uni-common-pb{
padding-bottom:30upx;
}
.uni-common-pl{
padding-left:30upx;
}
.uni-common-mt{
margin-top:30upx;
}
/* 背景色 */
.uni-bg-red{
background:#F76260; color:#FFF;
}
.uni-bg-green{
background:#09BB07; color:#FFF;
}
.uni-bg-blue{
background:#007AFF; color:#FFF;
}
/* 标题 */
.uni-h1 {font-size: 80upx; font-weight:700;}
.uni-h2 {font-size: 60upx; font-weight:700;}
.uni-h3 {font-size: 48upx; font-weight:700;}
.uni-h4 {font-size: 36upx; font-weight:700;}
.uni-h5 {font-size: 28upx; color: #8f8f94;}
.uni-h6 {font-size: 24upx; color: #8f8f94;}
.uni-bold{font-weight:bold;}
.uni-input {
height: 50upx;
min-height: 50upx;
padding: 15upx 0;
line-height: 50upx;
/* 文本溢出隐藏 */
.uni-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
/* 竖向百分百按钮 */
.uni-btn-v{
padding:10upx 0;
}
.uni-btn-v button{margin:20upx 0;}
/* 表单 */
.uni-form-item{
display:flex;
width:100%;
padding:10upx 0;
}
.uni-form-item .title{
padding:10upx 25upx;
}
.uni-label {
width: 210upx;
word-wrap: break-word;
word-break: break-all;
text-indent:20upx;
}
.uni-input {
height: 50upx;
padding: 15upx 25upx;
line-height:50upx;
font-size:28upx;
background:#FFF;
flex: 1;
}
radio-group, checkbox-group{
width:100%;
}
radio-group label, checkbox-group label{
padding-right:20upx;
}
.uni-form-item .with-fun{
display:flex;
flex-wrap:nowrap;
background:#FFFFFF;
}
.uni-form-item .with-fun .uni-icon{
width:40px;
height:80upx;
line-height:80upx;
flex-shrink:0;
}
/* loadmore */
.uni-loadmore{
height:80upx;
line-height:80upx;
text-align:center;
padding-bottom:30upx;
}
/*数字角标*/
.uni-badge,
.uni-badge-default {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
......@@ -94,115 +182,86 @@
border-radius: 100px;
background-color: rgba(0, 0, 0, .15);
}
.uni-badge.uni-badge-inverted {
padding: 0 5px 0 0;
color: #929292;
background-color: transparent
}
.uni-badge-primary {
color: #fff;
background-color: #007aff
}
.uni-badge-blue.uni-badge-inverted,
.uni-badge-primary.uni-badge-inverted {
color: #007aff;
background-color: transparent
}
.uni-badge-green,
.uni-badge-success {
color: #fff;
background-color: #4cd964;
}
.uni-badge-green.uni-badge-inverted,
.uni-badge-success.uni-badge-inverted {
color: #4cd964;
background-color: transparent
}
.uni-badge-warning,
.uni-badge-yellow {
color: #fff;
background-color: #f0ad4e
}
.uni-badge-warning.uni-badge-inverted,
.uni-badge-yellow.uni-badge-inverted {
color: #f0ad4e;
background-color: transparent
}
.uni-badge-danger,
.uni-badge-red {
color: #fff;
background-color: #dd524d
}
.uni-badge-danger.uni-badge-inverted,
.uni-badge-red.uni-badge-inverted {
color: #dd524d;
background-color: transparent
}
.uni-badge-purple,
.uni-badge-royal {
color: #fff;
background-color: #8a6de9
}
.uni-badge-purple.uni-badge-inverted,
.uni-badge-royal.uni-badge-inverted {
color: #8a6de9;
background-color: transparent
}
/*折叠面板 */
.uni-collapse-content {
height: 0;
width: 100%;
overflow: hidden;
}
.uni-collapse-content.uni-active {
height: auto;
}
/*卡片视图 */
.uni-card {
background: #fff;
border-radius: 8upx;
margin: 20upx;
margin:20upx 0;
position: relative;
box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
}
.uni-card-content {
font-size: 30upx;
}
.uni-card-content-inner {
position: relative;
padding: 30upx;
}
.uni-card-footer,
.uni-card-header {
position: relative;
......@@ -212,15 +271,12 @@
justify-content: space-between;
align-items: center;
}
.uni-card-header {
font-size: 36upx;
}
.uni-card-footer {
color: #6d6d72;
}
.uni-card-footer:before,
.uni-card-header:after {
position: absolute;
......@@ -233,22 +289,18 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-card-header:after {
top: auto;
bottom: 0;
}
.uni-card-media {
justify-content: flex-start;
}
.uni-card-media-logo {
height: 84upx;
width: 84upx;
margin-right: 20upx;
}
.uni-card-media-body {
height: 84upx;
display: flex;
......@@ -256,27 +308,20 @@
justify-content: space-between;
align-items: flex-start;
}
.uni-card-media-text-top {
line-height: 36upx;
font-size: 34upx;
}
.uni-card-media-text-bottom {
line-height: 30upx;
font-size: 28upx;
color: #8f8f94;
}
.uni-card-link {
color: #007AFF;
}
/* 列表 */
.uni-list {
background-color: #FFFFFF;
position: relative;
......@@ -284,7 +329,6 @@
display: flex;
flex-direction: column;
}
.uni-list:after {
position: absolute;
z-index: 10;
......@@ -297,7 +341,6 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list:before {
position: absolute;
z-index: 10;
......@@ -310,7 +353,6 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list-cell {
position: relative;
display: flex;
......@@ -318,24 +360,20 @@
justify-content: space-between;
align-items: center;
}
.uni-list-cell-hover {
background-color: #eee;
}
.uni-list-cell-pd {
padding: 22upx 30upx;
}
.uni-list-cell-left {
font-size:28upx;
padding: 0 30upx;
}
.uni-list-cell-db,
.uni-list-cell-right {
flex: 1;
}
.uni-list-cell:after {
position: absolute;
right: 0;
......@@ -347,23 +385,19 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list .uni-list-cell:last-child:after {
height: 0upx;
}
.uni-list-cell-last.uni-list-cell:after {
height: 0upx;
}
.uni-list-cell-divider {
position: relative;
display: flex;
color: #999;
background-color: #f7f7f7;
padding: 10upx 20upx;
padding:15upx 20upx;
}
.uni-list-cell-divider:before {
position: absolute;
right: 0;
......@@ -375,7 +409,6 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list-cell-divider:after {
position: absolute;
right: 0;
......@@ -387,8 +420,8 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list-cell-navigate {
font-size:30upx;
padding: 22upx 30upx;
line-height: 48upx;
position: relative;
......@@ -399,15 +432,12 @@
justify-content: space-between;
align-items: center;
}
.uni-list-cell-navigate {
padding-right: 36upx;
}
.uni-navigate-badge {
padding-right: 50upx;
}
.uni-list-cell-navigate.uni-navigate-right:after {
font-family: uniicons;
content: '\e583';
......@@ -418,7 +448,6 @@
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.uni-list-cell-navigate.uni-navigate-bottom:after {
font-family: uniicons;
content: '\e581';
......@@ -429,7 +458,6 @@
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.uni-list-cell-navigate.uni-navigate-bottom.uni-active:after {
font-family: uniicons;
content: '\e580';
......@@ -440,40 +468,28 @@
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.uni-collapse.uni-list-cell {
flex-direction: column;
}
.uni-list-cell-navigate.uni-active {
background: #eee;
}
.uni-list.uni-collapse {
box-sizing: border-box;
height: 0;
overflow: hidden;
}
.uni-collapse .uni-list-cell {
padding-left: 36upx;
padding-left: 20upx;
}
.uni-collapse .uni-list-cell:after {
left: 52upx;
}
.uni-list.uni-active {
height: auto;
}
/* 三行列表 */
.uni-triplex-row {
display: flex;
flex: 1;
......@@ -482,29 +498,20 @@
flex-direction: row;
padding: 22upx 30upx;
}
.uni-triplex-right,
.uni-triplex-left {
display: flex;
flex-direction: column;
}
.uni-triplex-left {
width: 84%;
}
.uni-triplex-right {
width: 16%;
text-align: right;
}
/* 图文列表 */
.uni-media-list {
padding: 22upx 30upx;
box-sizing: border-box;
......@@ -512,31 +519,25 @@
width: 100%;
flex-direction: row;
}
.uni-navigate-right.uni-media-list {
padding-right: 74upx;
}
.uni-pull-right {
flex-direction: row-reverse;
}
.uni-pull-right>.uni-media-list-logo {
margin-right: 0upx;
margin-left: 20upx;
}
.uni-media-list-logo {
height: 84upx;
width: 84upx;
margin-right: 20upx;
}
.uni-media-list-logo image {
height: 100%;
width: 100%;
}
.uni-media-list-body {
height: 84upx;
display: flex;
......@@ -546,13 +547,11 @@
align-items: flex-start;
overflow: hidden;
}
.uni-media-list-text-top {
width: 100%;
line-height: 36upx;
font-size: 34upx;
}
.uni-media-list-text-bottom {
width: 100%;
line-height: 30upx;
......@@ -560,12 +559,7 @@
color: #8f8f94;
}
/* 九宫格 */
.uni-grid-9 {
background: #f2f2f2;
width: 750upx;
......@@ -574,7 +568,6 @@
flex-wrap: wrap;
border-top: 2upx solid #eee;
}
.uni-grid-9-item {
width: 250upx;
height: 200upx;
......@@ -587,16 +580,13 @@
border-color: #eee;
box-sizing: border-box;
}
.no-border-right {
border-right: none;
}
.uni-grid-9-image {
width: 100upx;
height: 100upx;
}
.uni-grid-9-text {
width: 250upx;
line-height: 4upx;
......@@ -604,64 +594,48 @@
text-align: center;
font-size: 30upx;
}
.uni-grid-9-item-hover {
background: rgba(0, 0, 0, 0.1);
}
/* 上传 */
.uni-uploader {
flex: 1;
flex-direction: column;
}
.uni-uploader-head {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.uni-uploader-info {
color: #B2B2B2;
}
.uni-uploader-body {
margin-top: 16upx;
}
.uni-uploader__files {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.uni-uploader__file {
float: left;
margin-right: 18upx;
margin-bottom: 18upx;
margin: 10upx;
width: 210upx;
height: 210upx;
}
.uni-uploader__img {
display: block;
width: 158upx;
height: 158upx;
width: 210upx;
height: 210upx;
}
.uni-uploader__input-box {
float: left;
position: relative;
margin-right: 18upx;
margin-bottom: 18upx;
width: 154upx;
height: 154upx;
margin:10upx;
width: 208upx;
height: 208upx;
border: 2upx solid #D9D9D9;
}
.uni-uploader__input-box:before,
.uni-uploader__input-box:after {
content: " ";
......@@ -672,26 +646,21 @@
transform: translate(-50%, -50%);
background-color: #D9D9D9;
}
.uni-uploader__input-box:before {
width: 4upx;
height: 79upx;
}
.uni-uploader__input-box:after {
width: 79upx;
height: 4upx;
}
.uni-uploader__input-box:active {
border-color: #999999;
}
.uni-uploader__input-box:active:before,
.uni-uploader__input-box:active:after {
background-color: #999999;
}
.uni-uploader__input {
position: absolute;
z-index: 1;
......@@ -702,12 +671,7 @@
opacity: 0;
}
/*问题反馈*/
.feedback-title {
display: flex;
flex-direction: row;
......@@ -717,17 +681,14 @@
color: #8f8f94;
font-size: 28upx;
}
.feedback-star-view.feedback-title {
justify-content: flex-start;
margin: 0;
}
.feedback-quick {
position: relative;
padding-right: 40upx;
}
.feedback-quick:after {
font-family: uniicons;
font-size: 40upx;
......@@ -739,11 +700,9 @@
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.feedback-body {
background: #fff;
}
.feedback-textare {
height: 200upx;
font-size: 34upx;
......@@ -752,7 +711,6 @@
box-sizing: border-box;
padding: 20upx 30upx 0;
}
.feedback-input {
font-size: 34upx;
height: 50upx;
......@@ -760,35 +718,98 @@
padding: 15upx 20upx;
line-height: 50upx;
}
.feedback-uploader {
padding: 22upx 20upx;
}
.feedback-star {
font-family: uniicons;
font-size: 40upx;
margin-left: 6upx;
}
.feedback-star-view {
margin-left: 20upx;
}
.feedback-star:after {
content: '\e408';
}
.feedback-star.active {
color: #FFB400;
}
.feedback-star.active:after {
content: '\e438';
}
.feedback-submit {
background: #007AFF;
color: #FFFFFF;
margin: 20upx;
}
}
/* input group */
.uni-input-group {
position: relative;
padding: 0;
border: 0;
background-color: #fff;
}
.uni-input-group:before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 2upx;
content: '';
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-input-group:after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2upx;
content: '';
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-input-row {
position: relative;
display: flex;
flex-direction: row;
font-size:28upx;
}
.uni-input-group .uni-input-row:after {
position: absolute;
right: 0;
bottom: 0;
left: 30upx;
height: 2upx;
content: '';
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-input-row {
padding: 22upx 30upx;
justify-content: space-between;
}
.uni-input-row label {
line-height: 70upx;
}
/* textarea */
.uni-textarea{
width:100%;
background:#FFF;
}
.uni-textarea textarea{
width:96%;
padding:18upx 2%;
line-height:1.6;
font-size:28upx;
height:150upx;
}
\ No newline at end of file
examples/hello-uniapp/components/number-box.vue
浏览文件 @ 072cbc02
<template>
<view class="uni-numbox">
<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="_calcValue('subtract')">-</view>
<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="_calcValue('add')">+</view>
<view class="uni-numbox-minus" :class="{'uni-numbox-disabled': disableSubtract}" @click="subtract">-</view>
<input class="uni-numbox-value" type="number" :disabled="disabled" v-model="value" @blur="handleBlur">
<view class="uni-numbox-plus" :class="{'uni-numbox-disabled': disableAdd}" @click="add">+</view>
</view>
</template>
<script>
......@@ -30,11 +30,6 @@
default: false
}
},
data() {
return {
inputValue: this.value
}
},
computed: {
disableSubtract() {
return this.value <= this.min
......@@ -43,42 +38,35 @@
return this.value >= this.max
}
},
watch: {
value(val) {
this.inputValue = val;
},
inputValue(val) {
this.$emit('change', val);
}
onUnload() {
this.value = 0,
this.step = 1,
this.max = Infinity,
this.min = -Infinity;
},
methods: {
_calcValue(type) {
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
subtract(evt) {
this._handleStep('subtract');
},
add(evt) {
this._handleStep('add');
},
_handleStep(type) {
let value = this.value;
if (type === 'subtract') {
value -= step
value -= this.step
} else if (type === 'add') {
value += step
value += this.step
}
if (value < this.min || value > this.max) {
return
}
this.inputValue = value / scale;
},
_getDecimalScale() {
let scale = 1;
// 浮点型
if (~~this.step !== this.step) {
scale = Math.pow(10, (this.step + '').split('.')[1].length);
}
return scale;
this.value = value
},
_onBlur(event) {
let value = event.detail.value;
handleBlur(evt) {
let value = evt.detail.value;
if (!value) {
this.inputValue = 0;
this.value = 0;
return
}
value = +value;
......@@ -87,7 +75,12 @@
} else if (value < this.min) {
value = this.min
}
this.inputValue = value
this.value = value
}
},
watch: {
value(val) {
this.$emit('update', val);
}
}
}
......@@ -97,16 +90,16 @@
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 70upx;
height: 60upx;
}
.uni-numbox-minus,
.uni-numbox-plus {
margin: 0;
background-color: #f9f9f9;
width: 80upx;
width: 60upx;
height: 100%;
line-height: 70upx;
line-height: 60upx;
text-align: center;
color: #555555;
}
......@@ -128,7 +121,7 @@
.uni-numbox-value {
border: 2upx solid #cccccc;
background-color: #ffffff;
width: 80upx;
width: 60upx;
height: 100%;
text-align: center;
}
......@@ -136,4 +129,4 @@
.uni-numbox-disabled {
color: #c0c0c0;
}
</style>
</style>
examples/hello-uniapp/components/page-head.vue
浏览文件 @ 072cbc02
<template name="page-head">
<view class="page-head">
<view class="page-head-title">{{title}}</view>
<view class="uni-page-head">
<view class="uni-page-head-title">{{title}}</view>
</view>
</template>
<script>
export default {
name: "page-head",
......
examples/hello-uniapp/components/segmented-control.vue
浏览文件 @ 072cbc02
<template>
<view class="segmented-control" :class="styleType" :style="wrapStyle">
<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === currentIndex ? activeStyle : itemStyle"
@click="onClick(index)">
<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === current ? activeStyle : itemStyle"
@click="onClick(index)">
{{item}}
</view>
</view>
......@@ -30,18 +30,6 @@
default: 'button'
}
},
data() {
return {
currentIndex: this.current
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val;
}
}
},
computed: {
wrapStyle() {
let styleString = '';
......@@ -82,8 +70,8 @@
},
methods: {
onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index;
if (this.current !== index) {
this.current = index;
this.$emit('clickItem', index);
}
}
......@@ -110,7 +98,7 @@
.segmented-control.text {
border: 0;
border-radius: 0upx;
border-radius: 0upx;
}
......@@ -132,4 +120,4 @@
.segmented-control-item:first-child {
border-left-width: 0;
}
</style>
</style>
examples/hello-uniapp/components/tab-nvue/mediaList.nvue
浏览文件 @ 072cbc02
......@@ -145,7 +145,7 @@
.info-text {
margin-right: 20px;
color: #999999;
font-size: 28px;
font-size: 24px;
}
.media-foot {
......
examples/hello-uniapp/components/tab-nvue/mediaList.vue
浏览文件 @ 072cbc02
......@@ -151,7 +151,7 @@
.info-text {
margin-right: 20upx;
color: #999999;
font-size: 28upx;
font-size: 24upx;
}
.media-foot {
......
examples/hello-uniapp/components/uni-icon.vue
浏览文件 @ 072cbc02
......@@ -16,7 +16,7 @@
/**
* 图标大小
*/
size: [Number, String]
size: Number
},
computed: {
fontSize() {
......
examples/hello-uniapp/components/uni-nav-bar.vue
浏览文件 @ 072cbc02
......@@ -160,6 +160,10 @@
background-color: #FFFFFF;
overflow: hidden;
}
.uni-navbar view{
line-height:2.75em;
}
.uni-navbar-shadow {
box-shadow: 0 1px 6px #ccc;
......
examples/hello-uniapp/pages/API/action-sheet/action-sheet.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="default" @tap="actionSheetTap">弹出action sheet</button>
</view>
</view>
......
examples/hello-uniapp/pages/API/animation/animation.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="animation-element-wrapper">
<view class="animation-element" :animation="animationData"></view>
</view>
<scroll-view class="animation-buttons" scroll-y="true">
<button class="animation-button" @tap="rotate">旋转</button>
<button class="animation-button" @tap="scale">缩放</button>
<button class="animation-button" @tap="translate">移动</button>
<button class="animation-button" @tap="skew">倾斜</button>
<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
<button class="animation-button" @tap="all">同时展示全部</button>
<button class="animation-button" @tap="allInQueue">顺序展示全部</button>
<button class="animation-button animation-button-reset" @tap="reset">还原</button>
</scroll-view>
<view class="uni-padding-wrap uni-common-mt">
<view class="animation-element-wrapper">
<view class="animation-element" :animation="animationData"></view>
</view>
<scroll-view class="animation-buttons" scroll-y="true">
<button class="animation-button" @tap="rotate">旋转</button>
<button class="animation-button" @tap="scale">缩放</button>
<button class="animation-button" @tap="translate">移动</button>
<button class="animation-button" @tap="skew">倾斜</button>
<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
<button class="animation-button" @tap="all">同时展示全部</button>
<button class="animation-button" @tap="allInQueue">顺序展示全部</button>
<button class="animation-button animation-button-reset" @tap="reset">还原</button>
</scroll-view>
</view>
</view>
</template>
<script>
......@@ -111,20 +108,19 @@
}
.animation-buttons {
padding: 30upx 50upx 10upx;
padding:30upx 0;
width: 100%;
height: 360upx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: 2;
width: 300upx;
margin: 15upx 12upx;
width: 44%;
margin: 15upx 3%;
}
.animation-button-reset {
width: 620upx;
width: 94%;
}
</style>
examples/hello-uniapp/pages/API/background-audio/background-audio.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-section">
<view class="page-body-info">
<view class="uni-padding-wrap">
<view class="uni-center">
<text class="time-big">{{formatedPlayTime}}</text>
</view>
<view class="uni-common-mt">
<slider class="slider" min="0" max="21" step="1" :value="playTime" @change="seek"></slider>
<view class="play-time">
<text>00:00</text>
<text>00:21</text>
</view>
</view>
<view class="page-body-text">注意：离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
<view class="play-time">
<text>00:00</text>
<text>00:21</text>
</view>
<view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
<view class="page-body-buttons">
<block v-if="playing">
<view class="page-body-button" @tap="stop">
......@@ -136,12 +138,12 @@
}
.slider {
width: 650upx;
width:630upx;
}
.play-time {
font-size: 28upx;
width: 700upx;
width:100%;
padding: 20upx 0;
display: flex;
justify-content: space-between;
......
examples/hello-uniapp/pages/API/canvas/canvas.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<canvas class="canvas-element" canvas-id="canvas"></canvas>
<scroll-view class="canvas-buttons" scroll-y="true">
<block v-for="(name, index) in names" :key="index">
<button class="canvas-button" @tap="handleCanvasButton(name)">{{name}}</button>
</block>
<button class="canvas-button" @tap="toTempFilePath" type="primary">toTempFilePath</button>
</scroll-view>
</view>
<view class="uni-common-mt">
<canvas class="canvas-element" canvas-id="canvas"></canvas>
<scroll-view class="canvas-buttons" scroll-y="true">
<block v-for="(name, index) in names" :key="index">
<button class="canvas-button" @tap="handleCanvasButton(name)">{{name}}</button>
</block>
<button class="canvas-button" @tap="toTempFilePath" type="primary">toTempFilePath</button>
</scroll-view>
</view>
</view>
</template>
......
examples/hello-uniapp/pages/API/choose-location/choose-location.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<text class="page-body-text-small">当前位置信息</text>
<block v-if="hasLocation === false">
<text class="page-body-text">未选择位置</text>
</block>
<block v-if="hasLocation === true">
<text class="page-body-text">{{locationAddress}}</text>
<view class="page-body-text-location">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>N: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="btn-area">
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40upx;">
<view class="uni-hello-text uni-center">当前位置信息</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-hello-text uni-center" style="margin-top:10px;">
{{locationAddress}}
</view>
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
......
examples/hello-uniapp/pages/API/clipboard/clipboard.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">请输入剪贴板内容</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"></input>
</view>
</view>
<view class="btn-area">
<button type="primary" @click="setClipboard">存储数据</button>
<button @tap="getClipboard">读取数据</button>
<view class="uni-padding-wrap">
<view class="uni-title">请输入剪贴板内容</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"></input>
</view>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setClipboard">存储数据</button>
<button @tap="getClipboard">读取数据</button>
</view>
</view>
</view>
</template>
......@@ -78,7 +76,5 @@
</script>
<style>
.uni-list-cell {
padding: 0upx 30upx;
}
</style>
examples/hello-uniapp/pages/API/download-file/download-file.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<image v-if="imageSrc" :src="imageSrc" mode="center" />
<view class="uni-padding-wrap uni-common-mt">
<image class="img" v-if="imageSrc" :src="imageSrc" mode="center" />
<block v-else>
<view class="page-body-wording">
<text class="page-body-text">
点击按钮下载服务端示例图片
</text>
<view class="uni-hello-text">
点击按钮下载服务端示例图片
</view>
<view class="btn-area">
<view class="uni-btn-v">
<button type="primary" @tap="downloadImage">下载</button>
</view>
</block>
......@@ -29,12 +27,16 @@
},
methods: {
downloadImage: function () {
uni.showLoading({
title:'下载中'
})
var self = this
uni.downloadFile({
url: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
success: (res) => {
console.log('downloadFile success, res is', res)
self.imageSrc = res.tempFilePath
self.imageSrc = res.tempFilePath;
uni.hideLoading();
},
fail: (err) => {
console.log('downloadFile fail, err is:', err)
......@@ -46,10 +48,9 @@
</script>
<style>
.page-body image {
width: 600upx;
height: 600upx;
margin: 0 75upx;
}
.img {
width: 500upx;
height: 500upx;
margin: 0 95upx;
}
</style>
examples/hello-uniapp/pages/API/file/file.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<block v-if="tempFilePath != ''">
<image :src="tempFilePath" class="image" mode="aspectFit"></image>
</block>
<block v-if="tempFilePath === '' && savedFilePath != ''">
<image :src="savedFilePath" class="image" mode="aspectFit"></image>
</block>
<block v-if="tempFilePath === '' && savedFilePath === ''">
<view class="image-plus image-plus-nb" @tap="chooseImage">
<view class="image-plus-horizontal"></view>
<view class="image-plus-vertical"></view>
</view>
<view class="image-plus-text">请选择文件</view>
</block>
</view>
<view class="btn-area">
<button class="btn-savefile" @tap="saveFile">保存文件</button>
<button @tap="clear">删除文件</button>
</view>
<view class="btn-area">
<button @tap="openDocument">打开pdf文件</button>
</view>
</view>
</view>
<view class="uni-padding-wrap uni-common-mt">
<block v-if="tempFilePath != ''">
<image :src="tempFilePath" class="image" mode="aspectFit"></image>
</block>
<block v-if="tempFilePath === '' && savedFilePath != ''">
<image :src="savedFilePath" class="image" mode="aspectFit"></image>
</block>
<block v-if="tempFilePath === '' && savedFilePath === ''">
<view class="uni-hello-addfile" @tap="chooseImage">+ 请选择文件</view>
</block>
<view class="uni-btn-v">
<button class="btn-savefile" @tap="saveFile">保存文件</button>
<button @tap="clear">删除文件</button>
</view>
<view class="btn-area">
<button @tap="openDocument">打开pdf文件</button>
</view>
</view>
</view>
</template>
<script>
......@@ -111,17 +103,6 @@
height: 360upx;
}
.page-body-info {
display: flex;
box-sizing: border-box;
padding: 30upx;
height: 420upx;
border-top: 1upx solid #D9D9D9;
border-bottom: 1upx solid #D9D9D9;
align-items: center;
justify-content: center;
}
.btn-savefile {
background-color: #007aff;
color: #ffffff;
......
examples/hello-uniapp/pages/API/get-location/get-location.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<text class="page-body-text-small">当前位置经纬度</text>
<block v-if="hasLocation === false">
<text class="page-body-text">未获取</text>
</block>
<block v-if="hasLocation === true">
<view class="page-body-text-location">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>N: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="btn-area">
<button type="primary" @tap="getLocation">获取位置</button>
<button @tap="clear">清空</button>
</view>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40upx;">
<view class="uni-hello-text uni-center">当前位置经纬度</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未获取</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="getLocation">获取位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
......@@ -52,22 +50,5 @@
</script>
<style>
.page-body-info {
height: 250upx;
}
.page-body-text-small {
font-size: 24upx;
color: #000;
margin-bottom: 100upx;
}
.page-body-text-location {
display: flex;
font-size: 50upx;
}
.page-body-text-location text {
margin: 10upx;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/pages/API/get-network-type/get-network-type.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<view class="page-body-title">网络状态</view>
<block v-if="hasNetworkType === false">
<text class="page-body-text">未获取</text>
<text class="page-body-text">点击绿色按钮可获取网络状态</text>
</block>
<block v-if="hasNetworkType === true">
<text class="page-body-text-network-type">{{networkType}}</text>
</block>
</view>
<view class="btn-area">
<button type="primary" @tap="getNetworkType">获取手机网络状态</button>
<button @tap="clear">清空</button>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view style="background:#FFFFFF; padding:40upx;">
<view class="uni-hello-text uni-center">网络状态</view>
<block v-if="hasNetworkType === false">
<view class="uni-h2 uni-center uni-common-mt">未获取</view>
<view class="uni-hello-text uni-center uni-common-mt">请点击下面按钮获取网络状态</view>
</block>
<block v-if="hasNetworkType === true">
<view class="uni-h2 uni-center uni-common-mt">{{networkType}}</view>
</block>
</view>
<view class="uni-btn-v uni-common-mt">
<button type="primary" @tap="getNetworkType">获取手机网络状态</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
......@@ -51,12 +49,5 @@
</script>
<style>
.page-body-info {
height: 200upx;
}
.page-body-text-network-type {
font-size: 80upx;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}
</style>
examples/hello-uniapp/pages/API/get-system-info/get-system-info.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">手机型号</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.model"></input>
</view>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">手机型号</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">语言</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.language"></input>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.model"></input>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">版本</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.version"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">语言</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.language"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">版本</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.version"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">屏幕宽度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowWidth"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">屏幕高度</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">屏幕宽度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowWidth"></input>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowHeight"></input>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">屏幕高度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.windowHeight"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">DPI</view>
</view>
<view class="uni-list-cell">
<view class="uni-pd">
<view class="uni-label">DPI</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.pixelRatio"></input>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" placeholder="未获取" :value="systemInfo.pixelRatio"></input>
</view>
</view>
<view class="btn-area">
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" @tap="getSystemInfo">获取手机系统信息</button>
</view>
</view>
......
examples/hello-uniapp/pages/API/get-user-info/get-user-info.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<view class="page-body-title">用户信息</view>
<block v-if="hasUserInfo === false">
<text class="page-body-text">未获取</text>
<text class="page-body-text">点击蓝色按钮可获取用户头像及昵称</text>
</block>
<block v-if="hasUserInfo === true">
<view class="uni-padding-wrap">
<view style="background:#FFF; padding:40upx;">
<block v-if="hasUserInfo === false">
<view class="uni-hello-text uni-center">
<text>请点击蓝色按钮获取用户头像及昵称</text>
</view>
</block>
<block v-if="hasUserInfo === true">
<view class="uni-h4 uni-center uni-common-mt">{{userInfo.nickName}}</view>
<view style="padding:30upx 0; text-align:center;">
<image class="userinfo-avatar" :src="userInfo.avatarUrl"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="btn-area">
<!-- #ifdef APP-PLUS -->
<button type="primary" @tap="getUserInfo">获取用户信息</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">获取用户信息</button>
<!-- #endif -->
<button @tap="clear">清空</button>
</view>
</view>
</block>
</view>
<view class="uni-btn-v">
<!-- #ifdef APP-PLUS -->
<button type="primary" @tap="getUserInfo">获取用户信息</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button type="primary" open-type="getUserInfo" @getuserinfo="wxGetUserInfo">获取用户信息</button>
<!-- #endif -->
<button @tap="clear">清空</button>
</view>
</view>
</view>
......@@ -92,19 +92,9 @@
</script>
<style>
.page-body-info {
padding-bottom: 0;
height: 460upx;
}
.userinfo-avatar {
border-radius: 128upx;
width: 128upx;
height: 128upx;
}
.userinfo-nickname {
margin-top: 20upx;
font-size: 38upx;
}
</style>
examples/hello-uniapp/pages/API/image/image.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="uni-common-mt">
<form>
<view class="page-section">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">图片来源</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">图片来源</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">图片质量</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
</picker>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">图片质量</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
</picker>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">数量限制</view>
</view>
<view class="uni-list-cell-right">
<picker :range="count" @change="countChange" mode="selector">
<view class="uni-input">{{count[countIndex]}}</view>
</picker>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">数量限制</view>
</view>
<view class="uni-list-cell-right">
<picker :range="count" @change="countChange" mode="selector">
<view class="uni-input">{{count[countIndex]}}</view>
</picker>
</view>
</view>
</view>
<view class="uni-list list-pd">
<view class="uni-list-cell cell-pd">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击可预览选好的图片</view>
<view class="uni-uploader-info">{{imageList.length}}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImage"></view>
<view class="uni-list list-pd">
<view class="uni-list-cell cell-pd">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击可预览选好的图片</view>
<view class="uni-uploader-info">{{imageList.length}}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</form>
</view>
......
examples/hello-uniapp/pages/API/login/login.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="uni-padding-wrap">
<view style="background:#FFF; padding:40upx;">
<block v-if="hasLogin === true">
<text class="page-body-title">已登录</text>
<text class="page-body-text">每个帐号仅需登录 1 次，后续每次进入页面即可自动拉取用户信息</text>
<view class="uni-h3 uni-center uni-common-mt">已登录</view>
<view class="uni-hello-text uni-center">
<text>每个帐号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
</view>
</block>
<block v-if="hasLogin === false">
<text class="page-body-text">每个帐号仅需登录一次</text>
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @tap="bindLogin(value)" :key="key">{{value.name}}</button>
<view class="uni-h3 uni-center uni-common-mt">未登录</view>
<view class="uni-hello-text uni-center">
请点击按钮登录
</view>
</block>
</view>
<view class="uni-btn-v uni- uni-common-mt">
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @tap="bindLogin(value)" :key="key">{{value.name}}</button>
</view>
</view>
</view>
</template>
......@@ -84,34 +91,6 @@
</script>
<style>
.page-section {
margin-top: 200upx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 50upx;
box-sizing: border-box;
}
.page-body-title {
font-size: 60upx;
line-height: 200upx;
}
.page-body-text {
color: #bbb;
font-size: 28upx;
line-height: 40upx;
margin: 0 0 100upx 0;
text-align: center;
}
.page-body-button {
width: 100%;
}
button {
background-color: #007aff;
color: #ffffff;
......
examples/hello-uniapp/pages/API/make-phone-call/make-phone-call.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="desc">请在下方输入电话号码</view>
<input class="input" type="number" name="input" @input="bindInput" />
<view class="btn-area">
<button @tap="makePhoneCall" type="primary" :disabled="disabled">拨打</button>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-hello-text uni-center">请在下方输入电话号码</view>
<input class="input uni-common-mt" type="number" name="input" @input="bindInput" />
<view class="uni-btn-v uni-common-mt">
<button @tap="makePhoneCall" type="primary" :disabled="disabled">拨打</button>
</view>
</view>
</view>
......@@ -42,27 +40,11 @@
</script>
<style>
.page-section {
width: auto;
margin: 30upx;
padding: 44upx 60upx 60upx;
background-color: #fff;
font-size: 28upx;
}
.desc {
margin-bottom: 20upx;
}
.input {
height: 119upx;
line-height: 119upx;
font-size: 78upx;
border-bottom: 1upx solid #E2E2E2;
text-align:center;
}
.btn-area {
padding: 0;
}
</style>
examples/hello-uniapp/pages/API/modal/modal.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button type="default" @tap="modalTap">有标题的modal</button>
<button type="default" @tap="noTitlemodalTap">无标题的modal</button>
</view>
......@@ -37,4 +37,4 @@
}
}
}
</script>
</script>
\ No newline at end of file
examples/hello-uniapp/pages/API/navigator/navigator.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="navigateTo">跳转新页面，并传递数据</button>
<button @tap="navigateBack">返回上一页</button>
<button @tap="redirectTo">在当前页面打开</button>
......
examples/hello-uniapp/pages/API/on-accelerometer-change/on-accelerometer-change.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<!-- #ifdef APP-PLUS -->
<view class="page-section-spacing">
<button class="shake" @tap="shake">摇一摇</button>
</view>
<!-- #endif -->
<view class="page-section-spacing">
<button type="primary" @tap="watchAcce">监听设备的加速度变化</button>
<button type="primary" @tap="stopAcce">停止监听设备的加速度变化</button>
</view>
<view class="uni-padding-wrap uni-common-mt">
<!-- #ifdef APP-PLUS -->
<view class="uni-btn-v">
<button class="shake" @tap="shake">摇一摇</button>
</view>
<view class="page-section">
<view class="page-section-spacing">
<textarea :value="value" />
</view>
<!-- #endif -->
<view class="uni-btn-v">
<button type="primary" @tap="watchAcce">监听设备的加速度变化</button>
<button type="primary" @tap="stopAcce">停止监听设备的加速度变化</button>
</view>
<view class="uni-textarea uni-common-mt">
<textarea :value="value" />
</view>
</view>
</view>
......@@ -60,12 +56,4 @@
color: #ffffff;
margin-bottom: 50upx;
}
textarea {
border: 2upx solid #7A7E83;
box-sizing: border-box;
width: 100%;
height: 288upx;
padding: 20upx;
}
</style>
examples/hello-uniapp/pages/API/on-compass-change/on-compass-change.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section_center">
<text class="page-body-text">旋转手机即可获取方位信息</text>
<view class="direction">
<view class="bg-compass-line"></view>
<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
<view class="direction-value">
<text>{{direction}}</text>
<text class="direction-degree">o</text>
</view>
<view class="uni-padding-wrap">
<view class="uni-hello-text uni-center" style="padding-bottom:50upx;">
旋转手机即可获取方位信息
</view>
<view class="direction">
<view class="bg-compass-line"></view>
<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
<view class="direction-value">
<text>{{direction}}</text>
<text class="direction-degree">o</text>
</view>
</view>
</view>
......@@ -45,6 +45,7 @@
height: 540upx;
align-items: center;
justify-content: center;
margin:0 auto;
}
.direction-value {
......
examples/hello-uniapp/pages/API/open-location/open-location.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<form @submit="openLocation">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">经度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"></input>
</view>
<view class="uni-common-mt">
<form @submit="openLocation">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">经度</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">纬度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"></input>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"></input>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">位置名称</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">纬度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"></input>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">位置名称</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">详细位置</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"></input>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"></input>
</view>
</view>
<view class="btn-area">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">详细位置</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"></input>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v uni-common-mt">
<button type="primary" formType="submit">查看位置</button>
</view>
</form>
</view>
</view>
</form>
</view>
</view>
</template>
......@@ -69,25 +69,6 @@
</script>
<style>
.page-body-info {
height: 250upx;
}
.page-body-text-small {
font-size: 24upx;
color: #000;
margin-bottom: 100upx;
}
.page-body-text-location {
display: flex;
font-size: 50upx;
}
.page-body-text-location text {
margin: 10upx;
}
.uni-list-cell-left {
padding: 0 30upx;
}
......
examples/hello-uniapp/pages/API/pull-down-refresh/pull-down-refresh.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<text class="page-body-text">下拉页面加载数据</text>
</view>
<view class="page-body-content">
<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view>
<view class="loadMore" v-if="showLoadMore">{{loadMoreText}}</view>
</view>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="text" v-for="(num,index) in data" :key="index">list - {{num}}</view>
<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
</view>
</view>
</template>
......@@ -18,17 +11,20 @@
export default {
data() {
return {
title: 'on/stopPullDownRefresh',
title: '下拉刷新 + 加载更多',
data: [],
loadMoreText: "加载更多...",
loadMoreText: "加载中...",
showLoadMore: false,
max: 0
}
},
onLoad() {
this.initData();
},
onUnload() {
this.max = 0,
this.data = [],
this.loadMoreText = "加载更多...",
this.loadMoreText = "加载更多",
this.showLoadMore = false;
},
onReachBottom() {
......@@ -44,30 +40,22 @@
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
if(this.max > 40){
this.loadMoreText = "没有更多数据了!";
uni.showToast({
title:"没有新内容了",
icon:"none",
})
uni.stopPullDownRefresh();
return;
}
setTimeout(() => {
if(this.max === 0){
this.setDate()
}else{
let data = []
this.max += 3;
for (var i = this.max + 1 ; i > this.max - 2; i--) {
data.push(i)
}
this.data.splice(0, 0, ...data);
}
uni.stopPullDownRefresh();
}, 300);
this.initData();
},
methods: {
initData(){
setTimeout(() => {
this.max = 0;
this.data = [];
let data = [];
this.max += 10;
for (var i = this.max - 9; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
uni.stopPullDownRefresh();
}, 300);
},
setDate() {
let data = [];
this.max += 10;
......@@ -81,26 +69,14 @@
</script>
<style>
.page-body-info {
background-color: transparent;
}
.page-body-content {
padding: 0 30upx;
}
.text {
margin: 16upx 0;
width: 690upx;
width:100%;
background-color: #fff;
height: 90upx;
line-height: 90upx;
height: 120upx;
line-height: 120upx;
text-align: center;
color: #555;
border-radius: 8upx;
}
.loadMore {
text-align: center;
}
</style>
examples/hello-uniapp/pages/API/request-payment/request-payment.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view>支付金额</view>
<view class="price"><text class="rmbLogo">￥</text>0.01</view>
<view class="desc">实际应用中可自定义金额</view>
<view class="btn-area">
<view class="uni-padding-wrap">
<view style="background:#FFF; padding:50upx 0;">
<view class="uni-hello-text uni-center">支付金额</text></view>
<view class="uni-h1 uni-center uni-common-mt"><text class="rmbLogo">￥</text>0.01</view>
<view class="uni-hello-text uni-center uni-common-mt">实际应用中可自定义金额</text></view>
</view>
<view class="uni-btn-v uni-common-mt">
<!-- #ifdef MP-WEIXIN -->
<button type="primary" @tap="weixinPay" :loading="loading">微信支付</button>
<!-- #endif -->
......@@ -181,33 +182,8 @@
</script>
<style>
.page-section {
width: auto;
margin: 30upx;
padding: 64upx 30upx;
background-color: #fff;
text-align: center;
font-size: 28upx;
}
.desc {
color: #B2B2B2;
}
.price {
margin-top: 30upx;
margin-bottom: 25upx;
position: relative;
display: inline-block;
font-size: 78upx;
line-height: 1;
}
.rmbLogo {
position: absolute;
font-size: 40upx;
top: 8upx;
left: -40upx;
}
button {
......
examples/hello-uniapp/pages/API/request/request.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-body-wording">
<text class="page-body-text">
点击向服务器发起请求
</text>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-hello-text">
请点击按钮向服务器发起请求
</view>
<view class="btn-area">
<button type="primary" @tap="makeRequest" :loading="loading">request</button>
<view class="uni-textarea uni-common-mt">
<textarea :value="res"></textarea>
</view>
<view class="uni-btn-v uni-common-mt">
<button type="primary" @tap="makeRequest" :loading="loading">发起请求</button>
</view>
</view>
</view>
......@@ -20,7 +21,8 @@
data() {
return {
title: 'request',
loading: false
loading: false,
res:""
}
},
methods: {
......@@ -38,6 +40,7 @@
mask: true,
duration: duration
})
this.res = '请求结果 : ' + JSON.stringify(res);
console.log('request success', res)
},
fail: (err) => {
......
examples/hello-uniapp/pages/API/scan-code/scan-code.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section-title">扫码结果</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">扫码结果</view>
<view class="uni-list">
<view class="uni-cell">
<view class="uni-input">{{result}}</view>
</view>
</view>
<view class="btn-area">
<view class="uni-btn-v">
<button type="primary" @tap="scanCode">扫一扫</button>
</view>
</view>
......@@ -40,8 +40,5 @@
</script>
<style>
.uni-input {
padding: 15upx 30upx;
word-break: break-all;
}
</style>
examples/hello-uniapp/pages/API/set-navigation-bar-title/set-navigation-bar-title.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<form class="page-body" @submit="setNaivgationBarTitle">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
页面标题
<view>
<form @submit="setNaivgationBarTitle">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
页面标题
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>
</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入页面标题并点击设置即可" name="title"></input>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" formType="submit">设置</button>
</view>
</view>
</view>
<view class="btn-area">
<button type="primary" formType="submit">设置</button>
</view>
</form>
</form>
</view>
</view>
</template>
<script>
......
examples/hello-uniapp/pages/API/share/share.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section-title">分享内容</view>
<view class="page-section">
<view class="textarea-wrp">
<textarea class="textarea" v-model="shareText" />
</view>
<view class="uni-padding-wrap">
<view class="uni-title">分享内容</view>
<view class="uni-textarea">
<textarea class="textarea" v-model="shareText" />
</view>
<view class="page-section-title">分享图片：</view>
<view class="page-section">
<view class="uni-uploader-body">
<view class="uni-uploader__input-box" v-if="!image" @tap="chooseImage"></view>
<image class="uni-uploader__img" v-if="image" :src="image"></image>
</view>
<view class="uni-title">分享图片：</view>
<view class="uni-uploader" style="padding:15upx; background:#FFF;">
<view class="uni-uploader__input-box" v-if="!image" @tap="chooseImage"></view>
<image class="uni-uploader__img" v-if="image" :src="image"></image>
</view>
<!-- #ifdef APP-PLUS -->
<view class="page-section-title">分享类型：</view>
<view class="page-section">
<view class="uni-uploader-body">
<radio-group @change="radioChange">
<label class="radio">
<radio value="1" checked="true"/>文字
</label>
<label class="radio">
<radio value="2" />图片
</label>
<label class="radio">
<radio value="0" />图文
</label>
<label class="radio">
<radio value="5" />小程序
</label>
</radio-group>
</view>
<view class="uni-title">分享类型：</view>
<view>
<radio-group @change="radioChange">
<label class="radio">
<radio value="1" checked="true"/>文字
</label>
<label class="radio">
<radio value="2" />图片
</label>
<label class="radio">
<radio value="0" />图文
</label>
<label class="radio">
<radio value="5" />小程序
</label>
</radio-group>
</view>
<view class="btn-area" v-if="providerList.length > 0">
<view class="uni-btn-v uni-common-mt" v-if="providerList.length > 0">
<block v-for="(value,index) in providerList" :key="index">
<button type="primary" v-if="value" :disabled="shareType === 5 && value.name !== '分享到微信好友'" @tap="share(value)">{{value.name}}</button>
</block>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="btn-area">
<view class="uni-btn-v uni-common-mt">
<button type="primary" open-type="share">分享</button>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
......@@ -263,32 +256,5 @@
</script>
<style>
.textarea-wrp {
padding: 0 20upx;
}
.page-section{
margin-bottom: 20upx;
}
.textarea {
border: 2upx solid #D8D8D8;
padding: 10upx;
height: 90upx;
width: 690upx;
}
.uni-input{
border: 2upx solid #D8D8D8;
padding: 0 10upx;
width: 690upx;
}
.uni-uploader-body {
display: flex;
justify-content: center;
}
radio-group{
box-sizing: border-box;
width: 100%;
padding: 0 30upx;
display: flex;
justify-content: space-between;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/pages/API/show-loading/show-loading.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<button class="btn-load" @tap="showLoading">显示 loading 提示框</button>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="btn-load" type="primary" @tap="showLoading">显示 loading 提示框</button>
<button @tap="hideLoading">隐藏 loading 提示框</button>
</view>
</view>
......@@ -28,8 +28,5 @@
</script>
<style>
.btn-load {
background-color: #007aff;
color: #ffffff;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/pages/API/storage/storage.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">key</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange"></input>
</view>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">key</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">value</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange"></input>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange"></input>
</view>
</view>
<view class="btn-area">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">value</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange"></input>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" class="btn-setstorage" @tap="setStorage">存储数据</button>
<button @tap="getStorage">读取数据</button>
<button @tap="clearStorage">清理数据</button>
......
examples/hello-uniapp/pages/API/toast/toast.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<view class="body-view">
<button type="default" @tap="toast1Tap">点击弹出默认toast</button>
</view>
<view class="body-view">
<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
</view>
<view class="body-view">
<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
</view>
<view class="body-view">
<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
</view>
<view class="body-view">
<button type="default" @tap="hideToast">点击隐藏toast</button>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="default" @tap="toast1Tap">点击弹出默认toast</button>
<button type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
<button type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
<button type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
<button type="default" @tap="hideToast">点击隐藏toast</button>
</view>
</view>
</view>
......
examples/hello-uniapp/pages/API/upload-file/upload-file.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-body-info">
<block v-if="imageSrc">
<image :src="imageSrc" class="image" mode="aspectFit"></image>
</block>
<block v-else>
<view class="image-plus image-plus-nb" @tap="chooseImage">
<view class="image-plus-horizontal"></view>
<view class="image-plus-vertical"></view>
</view>
<view class="image-plus-text">选择图片</view>
</block>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="demo">
<block v-if="imageSrc">
<image :src="imageSrc" class="image" mode="widthFix"></image>
</block>
<block v-else>
<view class="uni-hello-addfile" @tap="chooseImage">+ 选择图片</view>
</block>
</view>
</view>
</view>
......@@ -34,6 +26,7 @@
},
methods: {
chooseImage: function () {
uni.showLoading({});
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
......@@ -59,7 +52,8 @@
uni.showModal({
content:err.errMsg,
showCancel:false
})
});
uni.hideLoading();
},
complete: () => {
console.log("complate")
......@@ -69,6 +63,7 @@
},
fail: (err) => {
console.log('chooseImage fail', err)
uni.hideLoading();
}
})
}
......@@ -79,17 +74,10 @@
<style>
.image {
width: 100%;
height: 360upx;
}
.page-body-info {
display: flex;
box-sizing: border-box;
padding: 30upx;
height: 420upx;
border-top: 1upx solid #D9D9D9;
border-bottom: 1upx solid #D9D9D9;
align-items: center;
justify-content: center;
.demo{
background:#FFF;
padding:50upx;
}
</style>
examples/hello-uniapp/pages/API/video/video.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">视频来源</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex">
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">视频来源</view>
</view>
<view class="uni-list-cell-right">
<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex">
<view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
</view>
<view class="page-body-info">
<template v-if="!src">
<view class="image-plus image-plus-nb" @tap="chooseVideo">
<view class="image-plus-horizontal"></view>
<view class="image-plus-vertical"></view>
</view>
<view class="image-plus-text">添加视频</view>
</template>
<template v-else>
<video :src="src" class="video"></video>
</template>
</view>
</view>
</view>
<template v-if="!src">
<view class="uni-hello-addfile" @tap="chooseVideo">+ 添加视频</view>
</template>
<template v-else>
<video :src="src" class="video"></video>
</template>
</view>
</template>
<script>
......@@ -68,14 +60,5 @@
</script>
<style>
.page-body-info {
display: flex;
margin-top: 40upx;
padding: 0;
height: 360upx;
border-top: 1upx solid #D9D9D9;
border-bottom: 1upx solid #D9D9D9;
align-items: center;
justify-content: center;
}
</style>
.video{width:100%;}
</style>
\ No newline at end of file
examples/hello-uniapp/pages/API/voice/voice.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<block v-if="recording === false && playing === false && hasRecord === false">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
<view class="uni-padding-wrap">
<block v-if="recording === false && playing === false && hasRecord === false">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" @tap="startRecord">
<image src="../../../static/record.png"></image>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" @tap="startRecord">
<image src="../../../static/record.png"></image>
</view>
<view class="page-body-button"></view>
<view class="page-body-button"></view>
</view>
</block>
<block v-if="recording === true">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" @tap="stopRecord">
<view class="button-stop-record"></view>
</view>
</block>
<block v-if="recording === true">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
<view class="page-body-button"></view>
</view>
</block>
<block v-if="hasRecord === true && playing === false">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
<text class="time-small">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" @tap="playVoice">
<image src="../../../static/play.png"></image>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" @tap="stopRecord">
<view class="button-stop-record"></view>
</view>
<view class="page-body-button"></view>
<view class="page-body-button" @tap="clear">
<image src="../../../static/trash.png"></image>
</view>
</block>
<block v-if="hasRecord === true && playing === false">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
<text class="time-small">{{formatedRecordTime}}</text>
</view>
</block>
<block v-if="hasRecord === true && playing === true">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
<text class="time-small">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button" @tap="stopVoice">
<image src="../../../static/stop.png"></image>
</view>
<view class="page-body-buttons">
<view class="page-body-button"></view>
<view class="page-body-button" @tap="playVoice">
<image src="../../../static/play.png"></image>
</view>
<view class="page-body-button" @tap="clear">
<image src="../../../static/trash.png"></image>
</view>
<view class="page-body-button" @tap="clear">
<image src="../../../static/trash.png"></image>
</view>
</block>
<block v-if="hasRecord === true && playing === true">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
<text class="time-small">{{formatedRecordTime}}</text>
</view>
<view class="page-body-buttons">
<view class="page-body-button" @tap="stopVoice">
<image src="../../../static/stop.png"></image>
</view>
<view class="page-body-button" @tap="clear">
<image src="../../../static/trash.png"></image>
</view>
</view>
</block>
</view>
</view>
</block>
</view>
</view>
</template>
......
examples/hello-uniapp/pages/component/audio/audio.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap" style="text-align: center;">
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-center">
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author"
:action="audioAction" controls></audio>
</view>
......@@ -26,4 +26,4 @@
}
}
}
</script>
</script>
\ No newline at end of file
examples/hello-uniapp/pages/component/button/button.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area" id="buttonContainer">
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>
<button type="default">页面次要操作 Normal</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>
<button type="warn">警告类操作 Normal</button>
<button type="warn" disabled="true">警告类操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
<button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button>
<button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>
</view>
<!-- #ifdef MP-WEIXIN -->
<button open-type="launchApp" app-parameter="uni-app" binderror="launchAppError">打开APP</button>
<!-- #endif -->
<button open-type="feedback">意见反馈</button>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>
<button type="default">页面次要操作 Normal</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>
<button type="warn">警告类操作 Normal</button>
<button type="warn" disabled="true">警告类操作 Disabled</button>
<view class="button-sp-area">
<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
<button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button>
<button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>
</view>
<!-- #ifdef MP-WEIXIN -->
<button open-type="launchApp" app-parameter="uni-app" binderror="launchAppError">打开APP</button>
<button open-type="feedback">意见反馈</button>
<!-- #endif -->
</view>
</view>
</template>
......@@ -57,4 +55,4 @@
.mini-btn {
margin-right: 10upx;
}
</style>
</style>
examples/hello-uniapp/pages/component/checkbox/checkbox.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<label class="checkbox">
<checkbox value="cb" checked="true" />选中
</label>
<label class="checkbox">
<checkbox value="cb" />未选中
</label>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">默认样式</view>
<view>
<checkbox-group>
<label>
<checkbox value="cb" checked="true" />选中
</label>
<label>
<checkbox value="cb" />未选中
</label>
</checkbox-group>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<checkbox :value="item.value" :checked="item.checked" />
</view>
<view>{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
推荐展示样式
<text>\n使用 uni-list 布局</text>
</view>
</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<checkbox :value="item.value" :checked="item.checked" />
</view>
<view>{{item.name}}</view>
</label>
</checkbox-group>
</view>
</view>
</template>
<script>
......@@ -80,7 +85,7 @@
</script>
<style>
.uni-list-cell {
justify-content: flex-start
}
.uni-list-cell {
justify-content: flex-start
}
</style>
examples/hello-uniapp/pages/component/form/form.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="uni-padding-wrap uni-common-mt">
<form @submit="formSubmit" @reset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<view class="uni-form-item uni-column">
<view class="title">switch</view>
<switch name="switch" />
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group class="uni-flex" name="radio">
<label>
<radio value="radio1" />选项一</label>
<label>
<radio value="radio2" />选项二</label>
<view class="uni-form-item uni-column">
<view class="title">radio</view>
<radio-group name="radio">
<label><radio value="radio1" />选项一</label>
<label><radio value="radio2" />选项二</label>
</radio-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group class="uni-flex" name="checkbox">
<label>
<checkbox value="checkbox1" />选项一</label>
<label>
<checkbox value="checkbox2" />选项二</label>
<view class="uni-form-item uni-column">
<view class="title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1" />选项一</label>
<label><checkbox value="checkbox2" />选项二</label>
</checkbox-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<view class="uni-form-item uni-column">
<view class="title">slider</view>
<slider value="50" name="slider" show-value></slider>
</view>
<view class="page-section">
<view class="page-section-title">input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" name="input" placeholder="这是一个输入框" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">input</view>
<input class="uni-input" name="input" placeholder="这是一个输入框" />
</view>
<view class="btn-area">
<button class="btn-submit" formType="submit">Submit</button>
<view class="uni-btn-v">
<button formType="submit">Submit</button>
<button type="default" formType="reset">Reset</button>
</view>
</form>
......@@ -82,19 +69,5 @@
</script>
<style>
label {
display: flex;
flex-direction: row;
min-width: 270upx;
margin-right: 20upx;
}
.btn-submit {
background-color: #007aff;
color: #ffffff;
}
.uni-input{
width: 100%;
padding-left: 30upx;
}
.title{padding:10px 0 !important;}
</style>
examples/hello-uniapp/pages/component/icon/icon.vue
浏览文件 @ 072cbc02
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="flex-container">
<view class="uni-padding-wrap">
<view class="icon-item" v-for="(item,index) in iconClassList" :key="index">
<uni-icon :type="item" :color="activeIndex === index?'#007aff':'#8f8f94'" @click="switchActive(index)"></uni-icon>
<uni-icon size="40" :type="item" :color="activeIndex === index?'#007aff':'#8f8f94'" @click="switchActive(index)"></uni-icon>
</view>
</view>
</view>
......@@ -11,7 +11,6 @@
<script>
import uniIcon from '../../../components/uni-icon.vue'
export default {
data() {
return {
......@@ -122,22 +121,12 @@
<style>
@import "../../../common/icon.css";
.flex-container {
padding: 20upx;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
text-align: center;
}
.flex-container .icon-item {
.icon-item {
display: inline-flex;
width: 100upx;
height: 100upx;
border: 2upx solid #dddddd;
border-radius: 50upx;
margin: 6upx;
flex-direction: column;
width: 105upx;
height: 105upx;
margin: 5upx;
justify-content: center;
}
</style>
examples/hello-uniapp/pages/component/image/image.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">Local Image</view>
<view class="page-section-ctn">
<image class="image" src="../../../static/uni@2x.png" />
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
示例1 <text>\n本地图片</text>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Internet Image</view>
<view class="page-section-ctn">
<image class="image" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" />
</view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
<image class="image" mode="widthFix" src="../../../static/uni@2x.png" />
</view>
<view class="uni-title uni-common-mt">
示例2 <text>\n网络图片</text>
</view>
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
<image class="image" mode="widthFix" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" />
</view>
</view>
</view>
......@@ -26,15 +27,9 @@
}
}
</script>
<style>
.page-section-ctn {
text-align: center;
}
.image {
margin-top: 30upx;
margin:40upx 0;
width: 200upx;
height: 200upx;
}
</style>
examples/hello-uniapp/pages/component/input/input.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">可自动聚焦的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" focus placeholder="自动获得焦点" />
</view>
</view>
<view class="uni-common-mt">
<view class="uni-form-item uni-column">
<view class="title">可自动聚焦的input</view>
<input class="uni-input" focus placeholder="自动获得焦点" />
</view>
<view class="page-section">
<view class="page-section-title">键盘右下角按钮显示为搜索</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">键盘右下角按钮显示为搜索</view>
<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
</view>
<view class="page-section">
<view class="page-section-title">控制最大输入长度的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">控制最大输入长度的input</view>
<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
</view>
<view class="page-section">
<view class="page-section-title">实时获取输入值：{{inputValue}}</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" @input="bindKeyInput" placeholder="输入同步到view中" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">实时获取输入值：{{inputValue}}</view>
<input class="uni-input" @input="bindKeyInput" placeholder="输入同步到view中" />
</view>
<view class="page-section">
<view class="page-section-title">控制输入的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" @input="bindReplaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">控制输入的input</view>
<input class="uni-input" @input="bindReplaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
</view>
<view class="page-section">
<view class="page-section-title">控制键盘的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" ref="input1" @input="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">控制键盘的input</view>
<input class="uni-input" ref="input1" @input="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="page-section">
<view class="page-section-title">数字输入的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">数字输入的input</view>
<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
</view>
<view class="page-section">
<view class="page-section-title">密码输入的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">密码输入的input</view>
<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
</view>
<view class="page-section">
<view class="page-section-title">带小数点的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">带小数点的input</view>
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
</view>
<view class="page-section">
<view class="page-section-title">身份证输入的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">身份证输入的input</view>
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="page-section">
<view class="page-section-title">控制占位符颜色的input</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
</view>
</view>
<view class="uni-form-item uni-column">
<view class="title">控制占位符颜色的input</view>
<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
</view>
<view class="page-section">
<view class="page-section-title">带清除按钮的输入框</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput" />
<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
</view>
<view class="uni-form-item uni-column">
<view class="title">带清除按钮的输入框</view>
<view class="with-fun">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput" />
<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">可查看密码的输入框</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
</view>
<view class="uni-form-item uni-column">
<view class="title">可查看密码的输入框</view>
<view class="with-fun">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
</view>
</view>
</view>
......@@ -162,23 +114,5 @@
<style>
@import "../../../common/icon.css";
.page-section {
margin-bottom: 20upx;
}
.page-body {
padding-bottom: 40upx;
}
.uni-list-cell {
padding: 0 30upx;
}
.uni-input {
flex: 1;
}
.uni-icon {
color: #999;
}
.title{padding:10upx 25upx;}
</style>
examples/hello-uniapp/pages/component/label/label.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">表单组件在label内</view>
<checkbox-group class="group" @change="checkboxChange">
<view class="label-1" v-for="item in checkboxItems" :key="item.name">
<label>
<checkbox :value="item.name" :checked="item.checked"></checkbox>
<text class="label-1-text">{{item.value}}</text>
<view class="uni-common-mt">
<view class="uni-form-item uni-column">
<view class="title">表单组件在label内</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
<view>
<checkbox :value="item.name" :checked="item.checked"></checkbox>
</view>
<view>{{item.value}}</view>
</label>
</view>
</checkbox-group>
</checkbox-group>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">label用for标识表单组件</view>
<radio-group class="group" @change="radioChange">
<view class="label-2" v-for="(item,index) in radioItems" :key="index">
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
<label class="label-2-text" :for="item.name">
<text>{{item.name}}</text>
<view class="uni-form-item uni-column">
<view class="title">label用for标识表单组件</view>
<view class="uni-list">
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
<view>
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
</view>
<view>
<label class="label-2-text" :for="item.name">
<text>{{item.value}}</text>
</label>
</view>
</label>
</view>
</radio-group>
</radio-group>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">label内有多个时选中第一个</view>
<label class="label-3">
<checkbox class="checkbox-3">选项一</checkbox>
<checkbox class="checkbox-3">选项二</checkbox>
<view class="label-3-text">点击该label下的文字默认选中第一个checkbox</view>
</label>
<view class="uni-form-item uni-column">
<view class="title">label内有多个时选中第一个</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="label-3">
<view class="uni-list-cell uni-list-cell-pd">
<checkbox class="checkbox-3">选项一</checkbox>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<checkbox class="checkbox-3">选项二</checkbox>
</view>
<view class="uni-link uni-center" style="margin-top:20upx;">点击该label下的文字默认选中第一个checkbox</view>
</label>
</checkbox-group>
</view>
</view>
</view>
</view>
</template>
......@@ -96,18 +114,7 @@
</script>
<style>
.label-1,
.label-2 {
margin: 30upx 0;
}
.label-3-text {
color: #576B95;
font-size: 28upx;
}
.checkbox-3 {
display: block;
margin: 30upx 0;
}
.uni-list-cell {
justify-content: flex-start
}
</style>
examples/hello-uniapp/pages/component/map/map.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="uni-common-mt">
<view>
<map :latitude="latitude" :longitude="longitude" :markers="covers">
</map>
</view>
......
examples/hello-uniapp/pages/component/movable-view/movable-view.vue
浏览文件 @ 072cbc02
<template>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">movable-view区域小于movable-area</view>
<page-head title="movable-view"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
示例 1
<text>\nmovable-view 区域小于 movable-area</text>
</view>
<movable-area>
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button @tap="tap" class="page-body-button" type="default">click me to move to (30px, 30px)</button>
</view>
<view class="page-section">
<view class="page-section-title">movable-view区域大于movable-area</view>
<view @tap="tap" class="uni-link uni-center uni-common-mt">
点击这里移动至 (30px, 30px)
</view>
<view class="uni-title uni-common-mt">
示例 2
<text>\nmovable-view区域大于movable-area</text>
</view>
<movable-area>
<movable-view class="max" direction="all">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以横向移动</view>
<view class="uni-title uni-common-mt">
示例 3
<text>\n只可以横向移动</text>
</view>
<movable-area>
<movable-view direction="horizontal">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以纵向移动</view>
<view class="uni-title uni-common-mt">
示例 4
<text>\n只可以纵向移动</text>
</view>
<movable-area>
<movable-view direction="vertical">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">可超出边界</view>
<view class="uni-title uni-common-mt">
示例 5
<text>\n可超出边界</text>
</view>
<movable-area>
<movable-view direction="all" out-of-bounds>text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">带有惯性</view>
<view class="uni-title uni-common-mt">
示例 6
<text>\n带有惯性</text>
</view>
<movable-area>
<movable-view direction="all" inertia>text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">可放缩</view>
<view class="uni-title uni-common-mt">
示例 7
<text>\n可放缩</text>
</view>
<movable-area scale-area>
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button @tap="tap2" class="page-body-button" type="default">click me to scale to 3.0</button>
<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80upx;">
点击这里放大3倍
</view>
</view>
</view>
</template>
......@@ -106,39 +109,21 @@
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 100rpx;
height: 150upx;
width: 150upx;
background-color: #007AFF;
color: #fff;
}
movable-area {
height: 400rpx;
width: 400rpx;
margin: 50rpx;
background-color: #ccc;
height: 300upx;
width: 100%;
background-color: #D8D8D8;
overflow: hidden;
}
.max {
width: 600rpx;
height: 600rpx;
}
.page-section {
width: 100%;
margin-bottom: 60rpx;
}
.page-section:last-child {
margin-bottom: 0;
}
.page-section-title {
font-size: 28rpx;
color: #999999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
width:500upx;
height: 500upx;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/pages/component/navigator/navigator.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="btn-area">
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
</view>
......@@ -21,4 +21,4 @@
}
}
}
</script>
</script>
examples/hello-uniapp/pages/component/picker-view/picker-view.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="title">日期：{{year}}年{{month}}月{{day}}日</view>
<view class="uni-padding-wrap">
<view class="uni-title">
日期：{{year}}年{{month}}月{{day}}日
</view>
</view>
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
......@@ -66,14 +70,11 @@
</script>
<style>
.title {
padding: 0 50upx;
}
picker-view {
width: 100%;
height: 600upx;
margin-top: 50upx;
margin-top:20upx;
}
.item {
......
examples/hello-uniapp/pages/component/picker/picker.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">地区选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="list-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
</view>
<view class="uni-title uni-common-pl">地区选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="page-section-title">时间选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="list-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</view>
<view class="uni-list-cell-db">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
</view>
</view>
<view class="page-section-title">日期选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="list-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
</view>
</view>
<view class="uni-title uni-common-pl">时间选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</view>
</view>
<view class="uni-title uni-common-pl">日期选择器</view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
</view>
</view>
</view>
</view>
</template>
<script>
......@@ -104,12 +99,5 @@
</script>
<style>
.uni-list-cell {
justify-content: flex-start;
}
.uni-list-cell-db,
.list-left {
padding: 0 24upx;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/pages/component/progress/progress.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="progress-box">
<progress percent="20" show-info stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="40" active stroke-width="3" />
<uni-icon type="close" class="progress-cancel" color="#dd524d"></uni-icon>
</view>
<view class="progress-box">
<progress percent="60" active stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress percent="20" show-info stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="40" active stroke-width="3" />
<uni-icon type="close" class="progress-cancel" color="#dd524d"></uni-icon>
</view>
<view class="progress-box">
<progress percent="60" active stroke-width="3" />
</view>
<view class="progress-box">
<progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>
</view>
</view>
......@@ -35,16 +33,11 @@
</script>
<style>
progress {
width: 100%;
}
.progress-box {
display: flex;
height: 50upx;
margin-bottom: 60upx;
}
.progress-cancel {
margin-left: 40upx;
}
......
examples/hello-uniapp/pages/component/radio/radio.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<view class="uni-padding-wrap">
<view class="uni-title">默认样式</view>
<view>
<label class="radio">
<radio value="r1" checked="true" />选中
</label>
......@@ -11,19 +11,18 @@
<radio value="r2" />未选中
</label>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="uni-list">
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<radio :value="item.value" checked="true" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
</view>
</view>
</view>
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
<view class="uni-list">
<radio-group @change="radioChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<radio :value="item.value" checked="true" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
</view>
</view>
</template>
......
examples/hello-uniapp/pages/component/rich-text/rich-text.vue
浏览文件 @ 072cbc02
<template>
<view class="content">
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">nodes属性为Aarry</view>
<view class="page-section-ctn">
<rich-text class="richText" :nodes="nodes" @tap="tap"></rich-text>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
数组类型
<text>\nnodes属性为Aarry</text>
</view>
<view class="uni-common-mt" style="background:#FFF; padding:20upx;">
<rich-text :nodes="nodes" @tap="tap"></rich-text>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">nodes属性为String</view>
<view class="page-section-ctn">
<rich-text class="richText" :nodes="strings" @tap="tap"></rich-text>
</view>
<view class="uni-title uni-common-mt">
字符串类型
<text>\nnodes属性为String</text>
</view>
<view class="uni-common-mt" style="background:#FFF; padding:20upx;">
<rich-text :nodes="strings" @tap="tap"></rich-text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
......@@ -27,7 +28,7 @@
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;text-align:center;'
style: 'line-height: 60px; color: red; text-align:center;'
},
children: [{
type: 'text',
......@@ -38,4 +39,4 @@
}
}
}
</script>
</script>
\ No newline at end of file
examples/hello-uniapp/pages/component/scroll-view/scroll-view.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">
<text>Vertical Scroll\n纵向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll">
<view id="demo1" class="scroll-view-item color1">A</view>
<view id="demo2" class="scroll-view-item color2">B</view>
<view id="demo3" class="scroll-view-item color3">C</view>
</scroll-view>
</view>
<view class="btn-area">
<button @tap="goTop" class="page-body-button" type="default">返回顶部</button>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n纵向滚动</text>
</view>
<view class="page-section">
<view class="page-section-title">
<text>Horizontal Scroll\n横向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
<view id="demo1" class="scroll-view-item_H color1">A</view>
<view id="demo2" class="scroll-view-item_H color2">B</view>
<view id="demo3" class="scroll-view-item_H color3">C</view>
</scroll-view>
</view>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
@scroll="scroll">
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
点击这里返回顶部
</view>
<view class="uni-title uni-common-mt">
Horizontal Scroll
<text>\n横向滚动</text>
</view>
<view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>
</view>
</view>
</view>
......@@ -60,6 +59,10 @@
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon:"none",
title:"纵向滚动 scrollTop 值已被修改为 0"
})
}
}
......@@ -71,10 +74,6 @@
height: 300upx;
}
.page-section-spacing {
margin-top: 60upx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
......@@ -95,4 +94,4 @@
text-align: center;
font-size: 36upx;
}
</style>
</style>
\ No newline at end of file
examples/hello-uniapp/pages/component/slider/slider.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">设置step</view>
<view class="body-view">
<slider value="60" @change="sliderChange" step="5" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">显示当前value</view>
<view class="body-view">
<slider value="50" @change="sliderChange" show-value />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">设置最小/最大值</view>
<view class="body-view">
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
</view>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">设置step</view>
<view>
<slider value="60" @change="sliderChange" step="5" />
</view>
<view class="uni-title">显示当前value</view>
<view>
<slider value="50" @change="sliderChange" show-value />
</view>
<view class="uni-title">设置最小/最大值</view>
<view>
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
</view>
</view>
</view>
</template>
......
examples/hello-uniapp/pages/component/swiper/swiper.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item>
<view class="swiper-item color1">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item color2">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item color3">C</view>
</swiper-item>
</swiper>
</view>
<view class="page-section swiper-list">
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">指示点</view>
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自动播放</view>
<switch :checked="autoplay" @change="changeAutoplay" />
</view>
<view class="uni-padding-wrap">
<view class="page-section swiper">
<view class="page-section-spacing">
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="swiper-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">指示点</view>
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自动播放</view>
<switch :checked="autoplay" @change="changeAutoplay" />
</view>
</view>
<view class="page-section page-section-spacing">
<view class="page-section-title">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider @change="durationChange" :value="duration" min="500" max="2000" />
<view class="page-section-title">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
<view class="uni-padding-wrap">
<view class="uni-common-mt">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider @change="durationChange" :value="duration" min="500" max="2000" />
<view class="uni-common-mt">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
</view>
</view>
</template>
......@@ -84,17 +85,14 @@
margin-top: 40upx;
margin-bottom: 0;
}
.page-section-title {
padding: 0;
margin-top: 60upx;
position: relative;
.uni-common-mt{
margin-top:60upx;
position:relative;
}
.info {
position: absolute;
right: 0;
color: #353535;
font-size: 30upx;
right:20upx;
}
</style>
examples/hello-uniapp/pages/component/switch/switch.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">默认样式</view>
<view class="body-view">
<switch checked @change="switch1Change" />
<switch @change="switch2Change" />
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">默认样式</view>
<view>
<switch checked @change="switch1Change" />
<switch @change="switch2Change" />
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">开启中</view>
<switch checked />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">关闭</view>
<switch />
</view>
</view>
<view class="uni-title">推荐展示样式</view>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">开启中</view>
<switch checked />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">关闭</view>
<switch />
</view>
</view>
</view>
......
examples/hello-uniapp/pages/component/text/text.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section page-section-spacing">
<view class="text-box" scroll-y="true">
<text>{{text}}</text>
</view>
<button :disabled="!canAdd" @tap="add">add line</button>
<button :disabled="!canRemove" @tap="remove">remove line</button>
<view class="uni-padding-wrap uni-common-mt">
<view class="text-box" scroll-y="true">
<text>{{text}}</text>
</view>
<view class="uni-btn-v">
<button type="primary" :disabled="!canAdd" @tap="add">add line</button>
<button type="warn" :disabled="!canRemove" @tap="remove">remove line</button>
</view>
</view>
</view>
......@@ -59,7 +59,7 @@
<style>
.text-box {
margin-bottom: 70upx;
margin-bottom:40upx;
padding: 40upx 0;
display: flex;
min-height: 300upx;
......@@ -69,6 +69,6 @@
text-align: center;
font-size: 30upx;
color: #353535;
line-height: 46upx;
line-height:1.8;
}
</style>
examples/hello-uniapp/pages/component/textarea/textarea.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">输入区域高度自适应，不会出现滚动条</view>
<view class="textarea-wrp">
<textarea @blur="bindTextAreaBlur" auto-height />
</view>
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
<view class="uni-textarea">
<textarea @blur="bindTextAreaBlur" auto-height />
</view>
<view class="page-section">
<view class="page-section-title">占位符字体是红色的textarea</view>
<view class="textarea-wrp">
<textarea class="textare" placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
</view>
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
<view class="uni-textarea">
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
</view>
</view>
</view>
</template>
<script>
export default {
......@@ -34,19 +30,4 @@
</script>
<style>
textarea {
width: 700upx;
padding: 25upx 0;
height: 34upx;
line-height: 34upx;
font-size: 32upx;
}
.textare {
height: 102upx;
}
.textarea-wrp {
padding: 0 25upx;
background-color: #fff;
}
</style>
examples/hello-uniapp/pages/component/video/video.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="uni-padding-wrap uni-common-mt">
<view>
<video id="myVideo" src="https://www.dcloud.io/uniapp/wap2appvsnative.mp4" @error="videoErrorCallback" :danmu-list="danmuList"
enable-danmu danmu-btn controls></video>
</view>
<view class="uni-list">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
<view class="uni-list uni-common-mt">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
<view class="btn-area">
<button @tap="bindSendDanmu" class="page-body-button">发送弹幕</button>
</view>
</view>
<view class="uni-btn-v">
<button @tap="bindSendDanmu" class="page-body-button">发送弹幕</button>
</view>
</view>
</view>
</view>
</template>
......@@ -77,20 +78,5 @@
</script>
<style>
button {
background-color: #007aff;
color: #ffffff;
}
.uni-list {
margin-top: 40upx;
}
.uni-input {
text-align: left;
}
.page-section {
text-align: center;
}
</style>
video{width:690upx;}
</style>
\ No newline at end of file
examples/hello-uniapp/pages/component/view/view.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-title">
<text>
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app默认全局使用flex布局(在App.vue里预设了)。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
</text>
</view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-hello-text">
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction: row或column，就可以在该容器内按行或列排布子组件。uni-app默认全局使用flex布局(在App.vue里预设了)。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
</view>
<view class="page-section">
<view class="page-section-title">
<text>flex-direction: row\n横向布局</text>
</view>
<view class="page-section-spacing">
<view class="uni-flex uni-row" style="margin-top: 60upx;">
<view class="flex-item color1">A</view>
<view class="flex-item color2">B</view>
<view class="flex-item color3">C</view>
</view>
</view>
<view class="uni-title uni-common-mt">
flex-direction: row
<text>\n横向布局</text>
</view>
<view class="page-section">
<view class="page-section-title">
<text>flex-direction: column\n纵向布局</text>
</view>
<view class="uni-flex uni-column" style="margin-top: 60upx;">
<view class="flex-item flex-item-V color1">A</view>
<view class="flex-item flex-item-V color2">B</view>
<view class="flex-item flex-item-V color3">C</view>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red">A</view>
<view class="flex-item uni-bg-green">B</view>
<view class="flex-item uni-bg-blue">C</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>更多布局示例</text>
</view>
<view class="uni-title uni-common-mt">
flex-direction: column
<text>\n纵向布局</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red">A</view>
<view class="flex-item flex-item-V uni-bg-green">B</view>
<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
更多布局示例
<text>\nflex布局演示</text>
</view>
<view>
<view class="text">纵向布局-自动宽度</view>
<view class="text" style="width: 300upx;">纵向布局-固定宽度</view>
<view class="uni-flex uni-row">
<view class="text">横向布局-自动宽度</view>
<view class="text">横向布局-自动宽度</view>
......@@ -84,22 +79,22 @@
</view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>组合示例：</text>
<view class="uni-title uni-common-mt">
组合示例
<text>\nflex布局演示</text>
</view>
<view class="uni-flex uni-row">
<view class="text" style="width: 200upx;height: 220upx;display: flex; justify-content: center;align-items: center;">
<image src="../../../static/plus.png" style="width: 150upx;height: 150upx;"></image>
</view>
<view class="uni-flex uni-row">
<view class="text" style="width: 200upx;height: 220upx;display: flex; justify-content: center;align-items: center;">
<image src="../../../static/plus.png" style="width: 150upx;height: 150upx;"></image>
<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
<view class="text" style="height: 120upx;text-align: left;padding-left: 20upx;padding-top: 10upx;">
文字居左，留出左间距
</view>
<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
<view class="text" style="height: 120upx;text-align: left;padding-left: 20upx;padding-top: 10upx;">
文字居左，留出左间距
</view>
<view class="uni-flex uni-row">
<view class="text" style="flex: 1;">剩余数量</view>
<view class="text" style="flex: 1;">立即购买</view>
</view>
<view class="uni-flex uni-row">
<view class="text" style="flex: 1;">剩余数量</view>
<view class="text" style="flex: 1;">立即购买</view>
</view>
</view>
</view>
......@@ -118,28 +113,26 @@
<style>
.flex-item {
width: 200upx;
height: 300upx;
width: 33.3%;
height: 200upx;
text-align: center;
line-height: 300upx;
font-size: 26upx;
line-height: 200upx;
}
.flex-item-V {
margin: 0 auto;
width: 300upx;
height: 200upx;
width: 100%;
height: 150upx;
text-align: center;
line-height: 200upx;
line-height: 150upx;
}
.text{
margin: 10upx;
margin:15upx 10upx;
padding: 0 20upx;
background-color: #ebebeb;
height: 70upx;
line-height: 70upx;
text-align: center;
color: #cfcfcf;
color: #777;
font-size: 26upx;
}
.desc{
......
examples/hello-uniapp/pages/component/web-view/web-view.vue
浏览文件 @ 072cbc02
<template>
<view>
<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
</view>
<view>
<web-view src="https://uniapp.dcloud.io"></web-view>
</view>
</template>
<script>
export default {}
export default {}
</script>
<style>
......
examples/hello-uniapp/pages/index/index.vue 0 → 100644
浏览文件 @ 072cbc02
<template>
<view class="content">
<view class="uni-h1">HI...</view>
<view class="uni-h2">HI...</view>
<view class="uni-h3">HI...</view>
<view class="uni-h4">HI...</view>
<view class="uni-h5">HI...</view>
<view class="uni-h6">HI...</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
}
}
</script>
<style>
.content {
flex: 1;
justify-content: center;
align-items: center;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
examples/hello-uniapp/pages/tabBar/API/API.vue
浏览文件 @ 072cbc02
<template>
<view class="index">
<view class="index-hd">
<image class="index-logo" src="../../../static/apiIndex.png"></image>
<view class="page-section-title">以下将演示uni-app接口能力，具体属性参数详见uni-app开发文档。</view>
<view class="uni-padding-wrap uni-common-pb">
<view class="uni-header-logo">
<image src="../../../static/apiIndex.png"></image>
</view>
<view class="uni-hello-text uni-common-pb">
以下将演示uni-app接口能力，具体属性参数详见uni-app开发文档。
</view>
<view class="uni-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list">
......@@ -235,18 +237,13 @@
</script>
<style>
.index{
padding-bottom: 1upx;
}
.uni-card {
box-shadow: none;
}
.uni-list:after {
height: 0;
}
.uni-list:before {
height: 0;
}
.uni-card {
box-shadow: none;
}
.uni-list:after {
height: 0;
}
.uni-list:before {
height: 0;
}
</style>
examples/hello-uniapp/pages/tabBar/component/component.vue
浏览文件 @ 072cbc02
<template>
<view class="index">
<view class="index-hd">
<image class="index-logo" src="../../../static/componentIndex.png"></image>
<view class="page-section-title">
以下将展示uni-app官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见uni-app开发文档。
</view>
</view>
<view class="uni-padding-wrap uni-common-pb">
<view class="uni-header-logo">
<image src="../../../static/componentIndex.png"></image>
</view>
<view class="uni-hello-text uni-common-pb">
以下将展示uni-app官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见uni-app开发文档。
</view>
<view class="uni-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list">
<view class="uni-list-cell uni-collapse">
......@@ -125,19 +125,13 @@
</script>
<style>
.index {
padding-bottom: 1upx;
}
.uni-card {
box-shadow: none;
}
.uni-list:after {
height: 0;
}
.uni-list:before {
height: 0;
}
.uni-card {
box-shadow: none;
}
.uni-list:after {
height: 0;
}
.uni-list:before {
height: 0;
}
</style>
examples/hello-uniapp/pages/template/countdown/countdown.vue
浏览文件 @ 072cbc02
<template>
<view>
<page-head :title="title"></page-head>
<view class="grace-text-small grace-center" style="margin:80upx 0 20upx 0;">示例1</view>
<view class="uni-text-small uni-center" style="margin:80upx 0 20upx 0;">示例1</view>
<view style="justify-content:center;">
<graceCountd :timer="timer1"></graceCountd>
</view>
<view class="grace-text-small grace-center" style="margin:80rpx 0 20rpx 0;">示例2</view>
<view class="uni-text-small uni-center" style="margin:80rpx 0 20rpx 0;">示例2</view>
<view style="justify-content:center; background:#00B26A; padding:50rpx 0;">
<graceCountd :timer="timer2" borderColor="#FFFFFF" splitorColor="#FFF" fontColor="#FFFFFF" bgrColor="none"></graceCountd>
</view>
<view class="grace-text-small grace-center" style="margin:80rpx 0 20rpx 0;">示例3</view>
<view class="uni-text-small uni-center" style="margin:80rpx 0 20rpx 0;">示例3</view>
<view style="justify-content:center;">
<graceCountd fontColor="#FFFFFF" bgrColor="#000000" :timer="timer3"></graceCountd>
</view>
......@@ -20,9 +20,9 @@
//模拟3个时间
var dateObj = new Date();
var currentTime = dateObj.getTime();
var timer1 = formatDateTime((currentTime + 1000 * 10));
var timer2 = formatDateTime((currentTime + 1000 * 38));
var timer3 = formatDateTime((currentTime + 1000 * 120));
var timer1 = formatDateTime((currentTime + 1000 * 200));
var timer2 = formatDateTime((currentTime + 1000 * 300));
var timer3 = formatDateTime((currentTime + 1000 * 500));
//时间戳 转 YY-mm-dd HH:ii:ss
function formatDateTime(inputTime){
var date = new Date(inputTime);
......@@ -55,9 +55,8 @@
</script>
<style>
.grace-center{justify-content: center;}
view{display:flex; width:100%; flex-wrap:wrap;}
.grace-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
.grace-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
.grace-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
view{display:flex; width:100%; flex-wrap:wrap; justify-content:center;}
.uni-countdown{padding:2rpx 0; flex-wrap:nowrap; justify-content:center;}
.uni-countdown-splitor{width:auto !important; justify-content:center; line-height:44upx; padding:0 5upx;}
.uni-countdown-numbers{line-height:44upx; width:auto !important; padding:0 10upx; justify-content:center; height:44upx; border-radius:8upx; margin:0 5upx; border:1px solid #000000; font-size:22upx;}
</style>
\ No newline at end of file
examples/hello-uniapp/pages/template/grid/grid.vue
浏览文件 @ 072cbc02
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="uni-grid-9">
<view class="uni-grid-9 uni-common-mt">
<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in grids" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
<image class="uni-grid-9-image" :src="item"></image>
<text class="uni-grid-9-text">grid</text>
......@@ -28,8 +28,4 @@
.page {
padding-top: 60upx;
}
page {
background: #efeff4;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或