提交 add636fc 编写于 作者: W wanganxp

缩短了tabbar页面的层级,把api里的页面和界面分开。遗留页面生命周期和页面下拉刷新待完善

上级 e4667d08
此差异已折叠。
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</view> </view>
</template> </template>
<script lang="ts"> <script lang="uts">
type ItemType = { type ItemType = {
value : string, value : string,
name : string, name : string,
......
<template>
<view>
<text>onLoad触发时间</text>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
// const d = Date.now();
// const s = d.toDateString()
console.log("onLoad");
},
onShow() {
console.log("onShow");
},
onReady() {
console.log("onReady");
},
onHide() {
console.log("onHide");
},
onUnload() {
console.log("onUnLoad");
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view style="font-size: 12px; color: #666;">注:PC 不支持下拉刷新</view>
<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>
<script lang="uts">
export default {
data() {
return {
title: '下拉刷新 + 加载更多',
data: [],
loadMoreText: "加载中...",
showLoadMore: false,
max: 0
}
},
onLoad() {
this.initData();
},
onUnload() {
this.max = 0,
this.data = [],
this.loadMoreText = "加载更多",
this.showLoadMore = false;
},
onReachBottom() {
console.log("onReachBottom");
if (this.max > 40) {
this.loadMoreText = "没有更多数据了!"
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
this.initData();
},
methods: {
initData(){
setTimeout(() => {
this.max = 0;
this.data = [];
let data = [];
this.max += 20;
for (var i = this.max - 19; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
uni.stopPullDownRefresh();
}, 300);
},
setListData() {
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);
}
}
}
</script>
<style>
.text {
margin: 16rpx 0;
width:100%;
background-color: #fff;
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: #555;
border-radius: 8rpx;
}
</style>
<template> A<template>
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/extuiIndex.png"></image> <image class="uni-header-image" src="/static/extuiIndex.png"></image>
...@@ -355,5 +355,5 @@ ...@@ -355,5 +355,5 @@
</script> </script>
<style> <style>
@import '../../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style> </style>
\ No newline at end of file
<template> <template>
<view class="uni-container"> <view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/componentIndex.png"></image> <image class="uni-header-image" src="/static/componentIndex.png"></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text">uni-app内置组件,展示样式仅供参考,文档详见:</text> <text class="hello-text">uni-app内置组件,展示样式仅供参考,文档详见:</text>
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" <u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
:inWhiteList="true"></u-link> :inWhiteList="true"></u-link>
</view> </view>
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)"> <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text> <text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" <image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon"
class="uni-icon"></image> class="uni-icon"></image>
</view> </view>
<view class="uni-panel-c" v-if="item.open"> <view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"> <view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" <text class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text> :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script lang="ts"> <script lang="ts">
type Page = { type Page = {
name : string, name : string,
enable ?: boolean, enable ?: boolean,
url ?: string url ?: string
} }
type ListItem = { type ListItem = {
id : string, id : string,
name : string, name : string,
open : boolean, open : boolean,
pages : Page[], pages : Page[],
url ?: string, url ?: string,
enable ?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
list: [{ list: [{
id: 'view', id: 'view',
name: '视图容器', name: '视图容器',
open: false, open: false,
pages: [ pages: [
{ {
name: 'view', name: 'view',
enable: true enable: true
}, },
{ {
name: 'scroll-view', name: 'scroll-view',
enable: true enable: true
}, },
{ {
name: 'swiper', name: 'swiper',
enable: true enable: true
}, },
// #ifndef MP-TOUTIAO || MP-LARK // #ifndef MP-TOUTIAO || MP-LARK
{ {
name: 'movable-view', name: 'movable-view',
enable: false enable: false
}, },
{ {
name: 'cover-view', name: 'cover-view',
enable: false enable: false
}, },
// #endif // #endif
{ {
name:'list', name:'list',
enable:true enable:true
} }
] as Page[] ] as Page[]
}, { }, {
id: 'content', id: 'content',
name: '基础内容', name: '基础内容',
open: false, open: false,
pages: [ pages: [
{ {
name: 'text', name: 'text',
enable: true enable: true
}, },
{ {
name: 'rich-text', name: 'rich-text',
enable: false enable: false
}, },
{ {
name: 'progress', name: 'progress',
enable: true enable: true
} }
] as Page[] ] as Page[]
}, { }, {
id: 'form', id: 'form',
name: '表单组件', name: '表单组件',
open: false, open: false,
pages: [ pages: [
{ {
name: 'button', name: 'button',
enable: true enable: true
}, },
{ {
name: 'checkbox', name: 'checkbox',
enable: true enable: true
}, },
{ {
name: 'form', name: 'form',
enable: false enable: false
}, },
{ {
name: 'input', name: 'input',
enable: true enable: true
}, { }, {
name: 'label', name: 'label',
enable: false enable: false
}, { }, {
name: 'picker', name: 'picker',
enable: false enable: false
}, { }, {
name: 'picker-view', name: 'picker-view',
enable: false enable: false
}, { }, {
name: 'radio', name: 'radio',
enable: true enable: true
}, { }, {
name: 'slider', name: 'slider',
enable: true enable: true
}, { }, {
name: 'slider-100', name: 'slider-100',
enable: true enable: true
},{ },{
name: 'switch', name: 'switch',
enable: true enable: true
}, { }, {
name: 'textarea', name: 'textarea',
enable: true enable: true
}, },
// #ifdef APP-PLUS || MP-WEIXIN || H5 || MP-BAIDU // #ifdef APP-PLUS || MP-WEIXIN || H5 || MP-BAIDU
{ {
name: 'editor', name: 'editor',
enable: false enable: false
}, },
// #endif // #endif
] as Page[] ] as Page[]
}, { }, {
id: 'nav', id: 'nav',
name: '导航', name: '导航',
open: false, open: false,
pages: [{ pages: [{
name: 'navigator', name: 'navigator',
enable: false enable: false
}] as Page[] }] as Page[]
}, { }, {
id: 'media', id: 'media',
name: '媒体组件', name: '媒体组件',
open: false, open: false,
pages: [{ pages: [{
name: 'image', name: 'image',
enable: true enable: true
}, { }, {
name: 'video', name: 'video',
enable: false enable: false
}] as Page[] }] as Page[]
}, },
// #ifndef MP-TOUTIAO || MP-KUAISHOU // #ifndef MP-TOUTIAO || MP-KUAISHOU
{ {
id: 'map', id: 'map',
name: '地图', name: '地图',
open: false, open: false,
pages: [ pages: [
{ {
name: 'map', name: 'map',
enable: false enable: false
} }
] as Page[] ] as Page[]
}, },
// #endif // #endif
// #ifndef QUICKAPP-WEBVIEW-UNION // #ifndef QUICKAPP-WEBVIEW-UNION
{ {
id: 'canvas', id: 'canvas',
name: '画布', name: '画布',
open: false, open: false,
pages: [ pages: [
{ {
name: 'canvas' name: 'canvas'
} }
] as Page[] ] as Page[]
}, },
// #endif // #endif
// #ifdef APP-PLUS || H5 // #ifdef APP-PLUS || H5
{ {
id: 'web-view', id: 'web-view',
name: '网页', name: '网页',
open: false, open: false,
pages: [ pages: [
{ {
name: '网络网页', name: '网络网页',
enable: true, enable: true,
url: '/pages/component/web-view/web-view' url: '/pages/component/web-view/web-view'
}, },
{ {
name: '本地网页', name: '本地网页',
enable: true, enable: true,
url: '/pages/component/web-view-local/web-view-local' url: '/pages/component/web-view-local/web-view-local'
} }
] as Page[] ] as Page[]
}, },
// #endif // #endif
// #ifndef H5 || MP-BAIDU || QUICKAPP-WEBVIEW || MP-LARK || MP-JD // #ifndef H5 || MP-BAIDU || QUICKAPP-WEBVIEW || MP-LARK || MP-JD
{ {
id: 'ad', id: 'ad',
url: 'ad', url: 'ad',
name: 'AD组件', name: 'AD组件',
enable: false, enable: false,
open: false, open: false,
pages: [] as Page[] pages: [] as Page[]
} }
// #endif // #endif
] as ListItem[], ] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png', arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png', arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png', arrowRightIcon: '/static/icons/arrow-right.png',
} }
}, },
methods: { methods: {
triggerCollapse(index ?: number, item : ListItem) { triggerCollapse(index ?: number, item : ListItem) {
if (item.pages.length == 0) { if (item.pages.length == 0) {
const page : Page = { const page : Page = {
name: item.name, name: item.name,
enable: item.enable, enable: item.enable,
url: item.url url: item.url
} }
this.goDetailPage(page); this.goDetailPage(page);
return; return;
} }
for (var i = 0; i < this.list.length; ++i) { for (var i = 0; i < this.list.length; ++i) {
if (index == i) { if (index == i) {
this.list[i].open = !this.list[i].open; this.list[i].open = !this.list[i].open;
} else { } else {
this.list[i].open = false; this.list[i].open = false;
} }
} }
}, },
goDetailPage(e : Page) { goDetailPage(e : Page) {
if (e.enable != true) { if (e.enable != true) {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '暂不支持' title: '暂不支持'
}) })
return return
} }
const url = e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}` const url = e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
uni.navigateTo({ uni.navigateTo({
url url
}) })
} }
} }
} }
</script> </script>
<style> <style>
@import '../../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style> </style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册