Skip to content

U
uni-app

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

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

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

提交 692dc058 编写于 作者: hbcui1984's avatar hbcui1984
浏览文件
操作

update hello uni-app

上级 f85e9822
隐藏空白更改
内联 并排
Showing with 617 addition and 442 deletion
examples/hello-uniapp/common/uni.css
浏览文件 @ 692dc058
......@@ -83,8 +83,9 @@
/*数字角标*/
.uni-badge,.uni-badge-default {
font-family: 'Helvetica Neue',Helvetica,sans-serif;
.uni-badge,
.uni-badge-default {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
line-height: 1;
display: inline-block;
......@@ -631,7 +632,12 @@
.uni-uploader-body {
margin-top: 16upx;
overflow: hidden;
}
.uni-uploader__files {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.uni-uploader__file {
......
examples/hello-uniapp/components/load-more.vue
浏览文件 @ 692dc058
......@@ -25,35 +25,37 @@
</template>
<script>
export default {
name: "load-more",
props: {
loadingType: {
//上拉的状态：0-loading前；1-loading中；2-没有更多了
type: Number,
default: 0
},
showImage: {
type: Boolean,
default: true
},
color: {
type: String,
default: "#777777"
},
contentText: {
type: Object,
default: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
}
}
},
data() {
return {}
}
}
export default {
name: "load-more",
props: {
loadingType: {
//上拉的状态：0-loading前；1-loading中；2-没有更多了
type: Number,
default: 0
},
showImage: {
type: Boolean,
default: true
},
color: {
type: String,
default: "#777777"
},
contentText: {
type: Object,
default () {
return {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
};
}
}
},
data() {
return {}
}
}
</script>
<style>
......@@ -64,11 +66,13 @@ export default {
align-items: center;
justify-content: center;
}
.loading-img{
.loading-img {
height: 24px;
width: 24px;
margin-right:10px;
margin-right: 10px;
}
.loading-text {
font-size: 15px;
color: #777777;
......@@ -77,10 +81,14 @@ export default {
.loading-img>view {
position: absolute;
}
.load1,.load2,.load3 {
.load1,
.load2,
.load3 {
height: 24px;
width: 24px;
}
.load2 {
transform: rotate(30deg);
}
......@@ -103,25 +111,25 @@ export default {
.loading-img>view view:nth-child(1) {
transform: rotate(90deg);
top:2px;
left:9px;
top: 2px;
left: 9px;
}
.loading-img>view view:nth-child(2) {
-webkit-transform: rotate(180deg);
top:11px;
right:0px;
top: 11px;
right: 0px;
}
.loading-img>view view:nth-child(3) {
transform: rotate(270deg);
bottom:2px;
left:9px;
bottom: 2px;
left: 9px;
}
.loading-img>view view:nth-child(4) {
top:11px;
left:0px;
top: 11px;
left: 0px;
}
.load1 view:nth-child(1) {
......@@ -176,6 +184,7 @@ export default {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
......
examples/hello-uniapp/components/uni-badge.vue
浏览文件 @ 692dc058
<template>
<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">
{{text}}
</text>
<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">{{text}}</text>
</template>
<script>
......
examples/hello-uniapp/pages.json
浏览文件 @ 692dc058
......@@ -73,11 +73,11 @@
"navigationBarTitleText" : "swiper"
}
},
{
"path": "pages/component/movable-view/movable-view",
"style": {
"navigationBarTitleText": "movable-view"
}
{
"path" : "pages/component/movable-view/movable-view",
"style" : {
"navigationBarTitleText" : "movable-view"
}
},
{
"path" : "pages/component/text/text",
......@@ -475,19 +475,17 @@
"style" : {
"navigationBarTitleText" : "关于"
}
},
{
"path" : "platforms/app-plus/tabbar-nvue/tabbar-nvue",
"style" : {
"navigationBarTitleText" : "顶部选项卡（原生）"
}
},
{
"path" : "platforms/app-plus/tabbar-nvue/detail",
"style" : {
"navigationBarTitleText" : "详情页面"
}
}
},
{
"path" : "platforms/app-plus/tabbar/tabbar",
"style" : {
"navigationBarTitleText" : "顶部选项卡（非原生）"
}
},
{
"path" : "platforms/app-plus/web-view-local/web-view-local",
"style" : {}
}
],
"subPackages" : [
{
......@@ -586,7 +584,7 @@
}
]
},
"bounce" : "none"
"bounce" : "none"
}
}
},
......@@ -653,9 +651,20 @@
{
"path" : "tabbar/tabbar",
"style" : {
"navigationBarTitleText" : "顶部选项卡（非原生）"
"navigationBarTitleText" : "顶部选项卡",
"app-plus" : {
"titleNView" : {
"titleText" : "顶部选项卡（原生）"
}
}
}
},
},
{
"path" : "tabbar/detail/detail",
"style" : {
"navigationBarTitleText" : "详情页面"
}
},
{
"path" : "media-list/media-list",
"style" : {
......@@ -732,10 +741,16 @@
"path" : "nav-bar/nav-bar",
"style" : {
"navigationBarTitleText" : "导航栏组件",
"enablePullDownRefresh" : true,
"app-plus" : {
"titleNView" : false,
"bounce" : "none",
"scrollIndicator" : "none"
"scrollIndicator" : "none",
"pullToRefresh" : {
"style" : "circle",
"offset" : "70px",
"color" : "#007AFF"
}
}
}
},
......@@ -745,24 +760,54 @@
"navigationBarTitleText" : "手势图案锁屏"
}
},
{
"path":"scrollmsg/scrollmsg",
"style" : {
"navigationBarTitleText" : "滚动公告"
}
},
{
"path":"steps/steps",
"style" : {
"navigationBarTitleText" : "步骤展示"
}
},
{
"path":"comments/comments",
"style" : {
"navigationBarTitleText" : "评论界面"
}
}
{
"path" : "scrollmsg/scrollmsg",
"style" : {
"navigationBarTitleText" : "滚动公告"
}
},
{
"path" : "steps/steps",
"style" : {
"navigationBarTitleText" : "步骤展示"
}
},
{
"path" : "comments/comments",
"style" : {
"navigationBarTitleText" : "评论界面"
}
},
{
"path" : "timeline/timeline",
"style" : {
"navigationBarTitleText" : "时间轴 timeline"
}
},
{
"path" : "tag/tag",
"style" : {
"navigationBarTitleText" : "标签tag"
}
},
{
"path" : "countdown/countdown",
"style" : {
"navigationBarTitleText" : "倒计时"
}
},
{
"path" : "datachecker/datachecker",
"style" : {
"navigationBarTitleText" : "表单校验"
}
},
{
"path" : "sbanner/sbanner",
"style" : {
"navigationBarTitleText" : "插屏弹窗"
}
}
]
}
],
......
examples/hello-uniapp/pages/API/canvas/canvas.vue
浏览文件 @ 692dc058
......@@ -8,7 +8,7 @@
<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> -->
<button class="canvas-button" @tap="toTempFilePath" type="primary">toTempFilePath</button>
</scroll-view>
</view>
</view>
......@@ -35,10 +35,10 @@
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: function (res) {
console.log(res)
console.log(res.tempFilePath)
},
fail: function (res) {
console.log(res)
fail: function (err) {
console.error(JSON.stringify(err))
}
})
},
......
examples/hello-uniapp/pages/API/image/image.vue
浏览文件 @ 692dc058
......@@ -15,7 +15,7 @@
</picker>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">图片质量</view>
......@@ -26,8 +26,7 @@
</picker>
</view>
</view>
<!-- #endif -->
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">数量限制</view>
......@@ -54,9 +53,9 @@
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
</view>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImage"></view>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImage"></view>
</view>
</view>
</view>
</view>
......@@ -92,68 +91,66 @@
count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
onUnload(){
onUnload() {
this.imageList = [],
this.sourceTypeIndex= 2,
this.sourceType= ['拍照', '相册', '拍照或相册'],
this.sizeTypeIndex= 2,
this.sizeType= ['压缩', '原图', '压缩或原图'],
this.countIndex= 8;
this.sourceTypeIndex = 2,
this.sourceType = ['拍照', '相册', '拍照或相册'],
this.sizeTypeIndex = 2,
this.sizeType = ['压缩', '原图', '压缩或原图'],
this.countIndex = 8;
},
methods: {
sourceTypeChange: function (e) {
sourceTypeChange: function(e) {
this.sourceTypeIndex = e.target.value
},
sizeTypeChange: function (e) {
sizeTypeChange: function(e) {
this.sizeTypeIndex = e.target.value
},
countChange: function (e) {
countChange: function(e) {
this.countIndex = e.target.value;
},
chooseImage: async function () {
if(this.imageList.length === 9){
let isContinue = await this.isFullImg();
console.log("是否继续?",isContinue);
if(!isContinue){
return;
}
}
uni.chooseImage({
sourceType: sourceType[this.sourceTypeIndex],
// #ifdef MP-WEIXIN
sizeType: sizeType[this.sizeTypeIndex],
// #endif
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
chooseImage: async function() {
if (this.imageList.length === 9) {
let isContinue = await this.isFullImg();
console.log("是否继续?", isContinue);
if (!isContinue) {
return;
}
}
})
},
isFullImg:function(){
return new Promise((res) => {
uni.showModal({
content:"已经有9张图片了,是否清空现有图片？",
success: (e) => {
if(e.confirm){
this.imageList = [];
res(true);
}else{
uni.chooseImage({
sourceType: sourceType[this.sourceTypeIndex],
sizeType: sizeType[this.sizeTypeIndex],
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
}
})
},
isFullImg: function() {
return new Promise((res) => {
uni.showModal({
content: "已经有9张图片了,是否清空现有图片？",
success: (e) => {
if (e.confirm) {
this.imageList = [];
res(true);
} else {
res(false)
}
},
fail: () => {
res(false)
}
},
fail:() => {
res(false)
}
})
})
})
},
previewImage: function (e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
}
},
previewImage: function(e) {
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
}
}
}
</script>
......@@ -166,4 +163,4 @@
.list-pd {
margin-top: 50upx;
}
</style>
</style>
examples/hello-uniapp/pages/component/button/button.vue
浏览文件 @ 692dc058
......@@ -24,6 +24,10 @@
<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>
</view>
......@@ -53,4 +57,4 @@
.mini-btn {
margin-right: 10upx;
}
</style>
</style>
examples/hello-uniapp/pages/component/checkbox/checkbox.vue
浏览文件 @ 692dc058
......@@ -64,7 +64,7 @@
methods: {
checkboxChange: function (e) {
var items = this.items,
values = e.target.value;
values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
......
examples/hello-uniapp/pages/component/picker/picker.vue
浏览文件 @ 692dc058
......@@ -38,7 +38,7 @@
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="uni-input">{{date}}</view>
</picker>
</view>
......@@ -52,24 +52,52 @@
<script>
export default {
data() {
const currentDate = this.getDate({
format: true
});
return {
title: 'picker',
array: ['中国', '美国', '巴西', '日本'],
index: 0,
date: '2016-09-01',
date: currentDate,
time: '12:01'
}
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
methods: {
bindPickerChange: function (e) {
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.target.value)
this.index = e.target.value
},
bindDateChange: function (e) {
bindDateChange: function(e) {
this.date = e.target.value
},
bindTimeChange: function (e) {
bindTimeChange: function(e) {
this.time = e.target.value
},
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
}
}
......@@ -84,4 +112,4 @@
.list-left {
padding: 0 24upx;
}
</style>
</style>
examples/hello-uniapp/pages/component/progress/progress.vue
浏览文件 @ 692dc058
......@@ -8,7 +8,7 @@
</view>
<view class="progress-box">
<progress percent="40" active stroke-width="3" />
<icon class="progress-cancel" type="cancel"></icon>
<uni-icon type="close" class="progress-cancel" color="#dd524d"></uni-icon>
</view>
<view class="progress-box">
<progress percent="60" active stroke-width="3" />
......@@ -21,12 +21,16 @@
</view>
</template>
<script>
import uniIcon from '../../../components/uni-icon.vue'
export default {
data() {
return {
title: 'progress'
}
}
},
components: {
uniIcon
},
}
</script>
......
examples/hello-uniapp/pages/component/radio/radio.vue
浏览文件 @ 692dc058
......@@ -62,10 +62,10 @@
},
methods: {
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.target.value)
console.log('radio发生change事件，携带value值为：', e.detail.value)
var items = this.items;
for (var i = 0, len = items.length; i < len; ++i) {
items[i].checked = items[i].value == e.target.value
items[i].checked = items[i].value == e.detail.value
}
this.items = items
......
examples/hello-uniapp/pages/component/scroll-view/scroll-view.vue
浏览文件 @ 692dc058
......@@ -7,12 +7,16 @@
<text>Vertical Scroll\n纵向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<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>
<view class="page-section">
<view class="page-section-title">
......@@ -33,18 +37,30 @@
export default {
data() {
return {
title: 'scroll-view'
title: 'scroll-view',
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function (e) {
upper: function(e) {
console.log(e)
},
lower: function (e) {
lower: function(e) {
console.log(e)
},
scroll: function (e) {
console.log(e)
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
})
}
}
}
......@@ -79,4 +95,4 @@
text-align: center;
font-size: 36upx;
}
</style>
</style>
examples/hello-uniapp/pages/component/slider/slider.vue
浏览文件 @ 692dc058
<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="slider2change" step="5" />
</view>
</view>
<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="slider3change" show-value/>
</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="slider4change" min="50" max="200" show-value/>
</view>
</view>
</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>
</view>
</template>
<script>
export default {
data() {
return {
title: 'slider'
}
}
}
export default {
data() {
return {
title: 'slider'
}
},
methods: {
sliderChange(e) {
console.log('value 发生变化：' + e.detail.value)
}
}
}
</script>
examples/hello-uniapp/pages/component/web-view/web-view.vue
浏览文件 @ 692dc058
<template>
<view>
<web-view src="https://uniapp.dcloud.io"></web-view>
</view>
</template>
<script>
export default {
}
</script>
<style>
<template>
<view>
<web-view src="https://uniapp.dcloud.io"></web-view>
</view>
</template>
<script>
export default {}
</script>
<style>
</style>
examples/hello-uniapp/pages/tabBar/component/component.vue
浏览文件 @ 692dc058
<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-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list">
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''"
@click="trigerCollapse(index)">
{{list.name}}
</view>
<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" @click="goDetailPage(item)">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
</view>
</view>
</view>
</view>
</view>
</view>
<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-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list">
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''"
@click="trigerCollapse(index)">
{{list.name}}
</view>
<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages"
:key="key" @click="goDetailPage(item)">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item.name ? item.name : item}} </view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
lists: [{
id: 'view',
name: '视图容器',
open: false,
pages: ['view', 'scroll-view', 'swiper', 'movable-view']
}, {
id: 'content',
name: '基础内容',
open: false,
pages: ['text', 'rich-text', 'icon', 'progress']
}, {
id: 'form',
name: '表单组件',
open: false,
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider',
'switch', 'textarea'
]
}, {
id: 'nav',
name: '导航',
open: false,
pages: ['navigator']
}, {
id: 'media',
name: '媒体组件',
open: false,
pages: ['image', 'audio', 'video']
}, {
id: 'map',
name: '地图',
open: false,
pages: ['map']
}, {
id: 'web-view',
name: '网页',
open: false,
pages: ['web-view']
}]
}
export default {
data() {
return {
lists: [{
id: 'view',
name: '视图容器',
open: false,
pages: ['view', 'scroll-view', 'swiper', 'movable-view']
}, {
id: 'content',
name: '基础内容',
open: false,
pages: ['text', 'rich-text', 'icon', 'progress']
}, {
id: 'form',
name: '表单组件',
open: false,
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio',
'slider',
'switch', 'textarea'
]
}, {
id: 'nav',
name: '导航',
open: false,
pages: ['navigator']
}, {
id: 'media',
name: '媒体组件',
open: false,
pages: ['image', 'audio', 'video']
}, {
id: 'map',
name: '地图',
open: false,
pages: ['map']
},{
id: 'web-view',
name: '网页',
open: false,
pages: ['web-view']
}
]
}
},
onLoad() {
// #ifdef APP-PLUS
//web-view组件支持本地html，依赖最新版的客户端基座
var innerversion = plus.runtime.innerVersion;
var _v = innerversion.substring(innerversion.lastIndexOf('.') + 1, innerversion.length);
if(_v && parseInt(_v)>=53650) {
var newPages = [{
name: '网络网页',
url: '/pages/component/web-view/web-view'
}, {
name: '本地网页',
url: '/platforms/app-plus/web-view-local/web-view-local'
}];
this.lists[this.lists.length-1].pages = newPages;
}
// #endif
},
onShareAppMessage() {
return {
title: '欢迎体验uni-app',
path: '/pages/tabBar/component/component'
}
},
onNavigationBarButtonTap(e){
uni.navigateTo({
url: '/platforms/app-plus/about/about'
})
},
methods: {
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].open = !this.lists[i].open;
} else {
this.lists[i].open = false;
}
}
},
goDetailPage(e) {
uni.navigateTo({
url: '/pages/component/' + e + '/' + e
})
}
}
}
onShareAppMessage() {
return {
title: '欢迎体验uni-app',
path: '/pages/tabBar/component/component'
}
},
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: '/platforms/app-plus/about/about'
})
},
methods: {
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].open = !this.lists[i].open;
} else {
this.lists[i].open = false;
}
}
},
goDetailPage(e) {
if (typeof e === 'string') {
uni.navigateTo({
url: '/pages/component/' + e + '/' + e
})
} else {
uni.navigateTo({
url: e.url
})
}
}
}
}
</script>
<style>
.index {
padding-bottom: 1upx;
}
.index {
padding-bottom: 1upx;
}
.uni-card {
box-shadow: none;
}
.uni-card {
box-shadow: none;
}
.uni-list:after {
height: 0;
}
.uni-list:after {
height: 0;
}
.uni-list:before {
height: 0;
}
</style>
.uni-list:before {
height: 0;
}
</style>
examples/hello-uniapp/pages/tabBar/template/template.vue
浏览文件 @ 692dc058
......@@ -66,10 +66,10 @@
open: false,
pages: [{
name: '非原生',
url: 'tabbar'
url: '/platforms/app-plus/tabbar/tabbar'
}, {
name: '原生',
url: '/platforms/app-plus/tabbar-nvue/tabbar-nvue'
url: 'tabbar'
}]
// #endif
}, {
......@@ -131,6 +131,12 @@
name: '自定义',
url: 'lazy-load-custom'
}]
},{
name: '时间轴 timeline',
url: 'timeline'
}, {
name: '标签 tag',
url: 'tag'
}, {
name: 'ECharts图表',
url: 'echarts'
......@@ -171,6 +177,15 @@
}, {
name: '滚动公告',
url: 'scrollmsg'
},{
name: '表单验证',
url: 'datachecker'
},{
name: '插屏弹窗',
url: 'sbanner'
},{
name: '倒计时',
url: 'countdown'
}
// #ifdef APP-PLUS
, {
......
examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue
浏览文件 @ 692dc058
......@@ -86,6 +86,16 @@
this.pickerText = JSON.stringify(e)
}
},
onBackPress() {
if (this.$refs.mpvuePicker.showPicker) {
this.$refs.mpvuePicker.pickerCancel();
return true;
}
if (this.$refs.mpvueCityPicker.showPicker) {
this.$refs.mpvueCityPicker.pickerCancel();
return true;
}
},
onUnload() {
if (this.$refs.mpvuePicker.showPicker) {
this.$refs.mpvuePicker.pickerCancel()
......
examples/hello-uniapp/pages/template/nav-bar/nav-bar.vue
浏览文件 @ 692dc058
<template>
<view>
<!-- #ifdef APP-PLUS -->
<!-- 固定在顶部的导航栏 -->
<uni-nav-bar fixed="true" left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>
<!-- 占位用的导航栏 -->
<uni-nav-bar background-color="rgba(0,0,0,0)" status-bar="true"></uni-nav-bar>
<!-- #endif -->
<view class="title">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考http://ask.dcloud.net.cn/article/34921</view>
<view class="title">基础用法(注意右上角应避开微信小程序自带的胶囊按钮)</view>
<uni-nav-bar left-icon="back" @click-left="back" title="标题"></uni-nav-bar>
<!-- <uni-nav-bar left-icon="camera" @click-left="clickLeft" @click-right="showMenu" right-icon="bars" title="标题"></uni-nav-bar>
<view>
<!-- #ifdef APP-PLUS -->
<!-- 固定在顶部的导航栏 -->
<uni-nav-bar fixed="true" left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单"
title="导航栏组件"></uni-nav-bar>
<!-- 占位用的导航栏 -->
<uni-nav-bar background-color="rgba(0,0,0,0)" status-bar="true"></uni-nav-bar>
<!-- #endif -->
<view class="title">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考http://ask.dcloud.net.cn/article/34921</view>
<view class="title">基础用法(注意右上角应避开微信小程序自带的胶囊按钮)</view>
<uni-nav-bar left-icon="back" @click-left="back" title="标题"></uni-nav-bar>
<!-- <uni-nav-bar left-icon="camera" @click-left="clickLeft" @click-right="showMenu" right-icon="bars" title="标题"></uni-nav-bar>
<uni-nav-bar left-icon="back" @click-left="back" left-text="返回" title="标题"></uni-nav-bar>
<uni-nav-bar left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单" title="标题"></uni-nav-bar>
<uni-nav-bar left-icon="back" @click-left="showMenu" @click-right="showMenu" left-text="菜单" right-text="菜单" title="标题"></uni-nav-bar> -->
<view class="title">其他常见样式</view>
<uni-nav-bar color="#333333" background-color="#FFFFFF" fixed="false" right-icon="scan" @click-left="showCity" @click-right="scan">
<block slot="left">
<view class="city">
<text>{{city}}</text>
<uni-icon type="arrowdown" color="#333333" size="22"></uni-icon>
</view>
</block>
<view class="input-view">
<uni-icon type="search" size="22" color="#666666"></uni-icon>
<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入搜索关键词" />
</view>
</uni-nav-bar>
</view>
<view class="title">其他常见样式</view>
<uni-nav-bar color="#333333" background-color="#FFFFFF" fixed="false" right-icon="scan" @click-left="showCity"
@click-right="scan">
<block slot="left">
<view class="city">
<text>{{city}}</text>
<uni-icon type="arrowdown" color="#333333" size="22"></uni-icon>
</view>
</block>
<view class="input-view">
<uni-icon type="search" size="22" color="#666666"></uni-icon>
<input confirm-type="search" @confirm="confirm" class="input" type="text" placeholder="输入搜索关键词" />
</view>
</uni-nav-bar>
</view>
</template>
<script>
import uniNavBar from '../../../components/uni-nav-bar.vue'
import uniIcon from '../../../components/uni-icon.vue'
import uniNavBar from '../../../components/uni-nav-bar.vue'
import uniIcon from '../../../components/uni-icon.vue'
export default {
components: {
uniNavBar,
uniIcon
},
data(){
return{
city:'北京'
}
export default {
components: {
uniNavBar,
uniIcon
},
methods: {
back() {
uni.navigateBack({
delta: 1
})
},
showMenu() {
uni.showToast({
title: '菜单'
})
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
})
},
search() {
uni.showToast({
title: '搜索'
})
},
showCity() {
uni.showToast({
title: '选择城市'
})
},
scan() {
uni.showToast({
title: '扫码'
})
},
data() {
return {
city: '北京'
}
},
methods: {
back() {
uni.navigateBack({
delta: 1
})
},
showMenu() {
uni.showToast({
title: '菜单'
})
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
})
},
search() {
uni.showToast({
title: '搜索'
})
},
showCity() {
uni.showToast({
title: '选择城市'
})
},
scan() {
uni.showToast({
title: '扫码'
})
},
confirm() {
uni.showToast({
title: '搜索'
})
}
}
}
},
onPullDownRefresh() {
console.log('onPullDownRefresh')
setTimeout(function() {
uni.stopPullDownRefresh()
console.log('stopPullDownRefresh')
}, 1000)
}
}
</script>
<style>
.title {
font-size: 15px;
line-height: 20px;
color: #333333;
padding: 15px;
}
.title {
font-size: 15px;
line-height: 20px;
color: #333333;
padding: 15px;
}
.city {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.city {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.input-view {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
align-items: center;
display: flex;
flex-direction: row;
background-color: #e7e7e7;
height: 30px;
border-radius: 15px;
padding: 0 10px;
}
.input-view {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
align-items: center;
display: flex;
flex-direction: row;
background-color: #e7e7e7;
height: 30px;
border-radius: 15px;
padding: 0 10px;
}
.input {
flex: 1;
padding: 0 5px;
}
.input {
flex: 1;
padding: 0 5px;
}
</style>
examples/hello-uniapp/pages/template/segmented-control/segmented-control.vue
浏览文件 @ 692dc058
<template>
<view class="page">
<view class="head">
<segmented-control :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></segmented-control>
<segmented-control :current="current" :values="items" v-on:clickItem="onClickItem" :styleType="styleType" :activeColor="activeColor"></segmented-control>
</view>
<view class="content">
<view v-show="current === 0">
......
examples/hello-uniapp/platforms/app-plus/tabbar-nvue/detail.vue → examples/hello-uniapp/pages/template/tabbar/detail/detail.vue
浏览文件 @ 692dc058
<template>
<view class="root">
<view class="page-body">
<view class="page-section-title">这是 nvue 页面跳转 vue 页面的演示，下面是页面跳转时传递过来的标题：</view>
<view class="page-section-title">这是选项卡页面跳转详情页面的演示，下面是页面跳转时传递过来的标题：</view>
<view class="page-section-title">{{data}}</view>
</view>
</view>
......
examples/hello-uniapp/platforms/app-plus/about/about.vue
浏览文件 @ 692dc058
<template>
<view class="about">
<view class="content">
<view style="display:flex;align-items: center;flex-direction: column;">
<view class="qrcode">
<image src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png" @longtap="save"></image>
<text>扫码体验uni-app</text>
</view>
......@@ -142,6 +142,11 @@
padding: 30upx;
flex-direction: column;
justify-content: center;
}
.qrcode{
display: flex;
align-items: center;
flex-direction: column;
}
.desc{
margin-top: 30upx;
......
examples/hello-uniapp/platforms/app-plus/feedback/feedback.vue
浏览文件 @ 692dc058
<template>
<view class="page">
<view class='feedback-title'>
<text>问题和意见</text>
<text class="feedback-quick" @tap="chooseMsg">快速键入</text>
</view>
<view class="feedback-body">
<textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" />
</view>
<view class="page">
<view class='feedback-title'>
<text>问题和意见</text>
<text class="feedback-quick" @tap="chooseMsg">快速键入</text>
</view>
<view class="feedback-body">
<textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" />
</view>
<view class='feedback-title'>
<text>图片(选填,提供问题截图,总大小10M以下)</text>
</view>
......@@ -14,18 +14,19 @@
<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 class="uni-uploader-info">{{imageList.length}}/8</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">
<view class="uni-uploader__file" style="position: relative;">
<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
<view class="close-view" @click="close(index)">x</view>
</view>
</block>
</view>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImg"></view>
<view class="uni-uploader__input-box" v-show="imageList.length < 8">
<view class="uni-uploader__input" @tap="chooseImg"></view>
</view>
</view>
</view>
</view>
......@@ -63,14 +64,6 @@
}
}
},
onUnload() {
this.imageList = [];
this.sendDate = {
score: 0,
content: "",
contact: ""
}
},
onLoad() {
let deviceInfo = {
appid: plus.runtime.appid,
......@@ -85,6 +78,9 @@
this.sendDate = Object.assign(deviceInfo, this.sendDate);
},
methods: {
close(e){
this.imageList.splice(e,1);
},
chooseMsg() { //快速输入
uni.showActionSheet({
itemList: this.msgContents,
......@@ -97,9 +93,9 @@
uni.chooseImage({
sourceType: ["camera", "album"],
sizeType: "compressed",
count: 9,
count: 8 - this.imageList.length,
success: (res) => {
this.imageList = res.tempFilePaths;
this.imageList = this.imageList.concat(res.tempFilePaths);
}
})
},
......@@ -153,4 +149,7 @@
.input-view {
font-size: 28upx;
}
.close-view{
text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或