Skip to content

H
hello uni-app x

Accustomed_ / hello uni-app x
与 Fork 源项目一致

Fork自 DCloud / hello uni-app x

通知 1
Star 0
Fork 0
H
hello uni-app x
提交 b2112866 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

fix: page can not scroll

上级 1f9e071b
隐藏空白更改
内联 并排
Showing with 1211 addition and 1059 deletion
pages/API/navigator/navigator.uvue
浏览文件 @ b2112866
<template> <template>
<view> <scroll-view>
<page-head title="navigate"></page-head> <page-head title="navigate"></page-head>
<view class="uni-padding-wrap uni-common-mt uni-common-mb"> <view class="uni-padding-wrap uni-common-mt uni-common-mb">
<view class="direction-row"> <view class="direction-row">
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</button> </button>
</view> </view>
</view> </view>
</view> </scroll-view>
</template> </template>
<script lang="uts"> <script lang="uts">
...@@ -341,7 +341,7 @@ export default { ...@@ -341,7 +341,7 @@ export default {
}, },
customAnimation() { customAnimation() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/API/navigator/new-page/new-page-1?data=自定义动画打开页面', url: '/pages/API/navigator/new-page/new-page-2?data=自定义动画打开页面',
animationType: 'slide-in-bottom', animationType: 'slide-in-bottom',
animationDuration: 200, animationDuration: 200,
}) })
......
pages/API/navigator/new-page/new-page-2.uvue
浏览文件 @ b2112866
<template> <template>
<view class="uni-padding-wrap container"> <scroll-view class="uni-padding-wrap">
<page-head title="new-page-2" /> <view class="container">
<button @click="scrollToBottom">scrollToBottom</button> <page-head title="new-page-2" />
</view> <button @click="scrollToBottom">scrollToBottom</button>
</view>
</scroll-view>
</template> </template>
<script lang="uts"> <script lang="uts">
...@@ -10,72 +12,72 @@ import { State, state, setLifeCycleNum } from '@/store/index.uts' ...@@ -10,72 +12,72 @@ import { State, state, setLifeCycleNum } from '@/store/index.uts'
export default { export default {
data() { data() {
return { return {
_state: state as State, _state: state as State,
isScrolled: false, isScrolled: false,
} }
}, },
onLoad(_: OnLoadOptions) { onLoad(_ : OnLoadOptions) {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum + 100) setLifeCycleNum(state.lifeCycleNum + 100)
}, },
onShow() { onShow() {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10) setLifeCycleNum(state.lifeCycleNum + 10)
}, },
onReady() { onReady() {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10) setLifeCycleNum(state.lifeCycleNum + 10)
}, },
onPullDownRefresh() { onPullDownRefresh() {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10) setLifeCycleNum(state.lifeCycleNum + 10)
}, },
onPageScroll(_) { onPageScroll(_) {
// 自动化测试 // 自动化测试
this.isScrolled = true this.isScrolled = true
}, },
onReachBottom() { onReachBottom() {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum + 10) setLifeCycleNum(state.lifeCycleNum + 10)
}, },
onBackPress(_: OnBackPressOptions): boolean | null { onBackPress(_ : OnBackPressOptions) : boolean | null {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10) setLifeCycleNum(state.lifeCycleNum - 10)
return null return null
}, },
onHide() { onHide() {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 10) setLifeCycleNum(state.lifeCycleNum - 10)
}, },
onUnload() { onUnload() {
// 自动化测试 // 自动化测试
setLifeCycleNum(state.lifeCycleNum - 100) setLifeCycleNum(state.lifeCycleNum - 100)
}, },
methods: { methods: {
// 自动化测试 // 自动化测试
getLifeCycleNum(): number { getLifeCycleNum() : number {
return state.lifeCycleNum return state.lifeCycleNum
}, },
// 自动化测试 // 自动化测试
setLifeCycleNum(num: number) { setLifeCycleNum(num : number) {
setLifeCycleNum(num) setLifeCycleNum(num)
}, },
pullDownRefresh() { pullDownRefresh() {
uni.startPullDownRefresh({ uni.startPullDownRefresh({
success() { success() {
setTimeout(() => { setTimeout(() => {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}, 1000) }, 1000)
}, },
}) })
}, },
scrollToBottom() { scrollToBottom() {
uni.pageScrollTo({ uni.pageScrollTo({
scrollTop: 2000, scrollTop: 2000,
}) })
}, },
}, },
} }
</script> </script>
......
pages/tabBar/API.uvue
浏览文件 @ b2112866
<template> <template>
<view class="uni-container"> <scroll-view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/apiIndex.png"></image> <image class="uni-header-image" src="/static/apiIndex.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/api/'" :text="'https://uniapp.dcloud.io/api/'" <u-link
:inWhiteList="true"></u-link> :href="'https://uniapp.dcloud.io/api/'"
</view> :text="'https://uniapp.dcloud.io/api/'"
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> :inWhiteList="true"
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)"> ></u-link>
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text> </view>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
class="uni-icon"></image> <view
</view> class="uni-panel-h"
<view class="uni-panel-c" v-if="item.open"> :class="item.open ? 'uni-panel-h-on' : ''"
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"> @click="triggerCollapse(index, item)"
<text class="uni-navigate-text" >
:class="page.enable == false ? 'text-disabled' : ''">{{page.name}}</text> <text
<image :src="arrowRightIcon" class="uni-icon"></image> class="uni-panel-text"
</view> :class="item.enable == false ? 'text-disabled' : ''"
</view> >{{ item.name }}</text
>
<image
:src="
item.pages.length > 0
? item.open
? arrowUpIcon
: arrowDownIcon
: arrowRightIcon
"
class="uni-icon"
></image>
</view>
<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)"
>
<text
class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view>
</view> </view>
</scroll-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: "base", id: 'base',
name: "基础", name: '基础',
open: false, open: false,
pages: [ pages: [
{ {
name: "getApp", name: 'getApp',
url: "get-app", url: 'get-app',
}, },
{ {
name: "getCurrentPages", name: 'getCurrentPages',
url: "get-current-pages", url: 'get-current-pages',
}, },
{ {
name: "事件总线event-bus", name: '事件总线event-bus',
url: "event-bus", url: 'event-bus',
}, },
{ {
name: "获取启动参数", name: '获取启动参数',
url: "get-launch-options-sync", url: 'get-launch-options-sync',
} },
] as Page[], ] as Page[],
}, },
{ {
id: "page", id: 'page',
name: "页面", name: '页面',
open: false, open: false,
pages: [ pages: [
{ {
name: "页面跳转", name: '页面跳转',
url: "navigator", url: 'navigator',
}, },
{ {
name: "页面栈管理", name: '页面栈管理',
url: "getCurrentPages", url: 'getCurrentPages',
enable: false enable: false,
}, },
{ {
name: "设置导航条标题", name: '设置导航条标题',
url: "set-navigation-bar-title", url: 'set-navigation-bar-title',
enable: false enable: false,
}, },
{ {
name: "设置导航条颜色", name: '设置导航条颜色',
url: "set-navigation-bar-color", url: 'set-navigation-bar-color',
}, },
{ {
name: "设置TabBar", name: '设置TabBar',
url: "set-tabbar", url: 'set-tabbar',
enable: false enable: false,
}, },
{ {
name: "下拉刷新", name: '下拉刷新',
url: "pull-down-refresh", url: 'pull-down-refresh',
enable: false enable: false,
}, },
{ {
name: "将页面滚动到指定位置", name: '将页面滚动到指定位置',
url: "page-scroll-to", url: 'page-scroll-to',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "ui", id: 'ui',
name: "界面", name: '界面',
open: false, open: false,
pages: [ pages: [
/* { /* {
name: "创建动画", name: "创建动画",
url: "animation", url: "animation",
enable: false enable: false
...@@ -125,70 +152,70 @@ ...@@ -125,70 +152,70 @@
url: "intersection-observer", url: "intersection-observer",
enable: false enable: false
}, */ }, */
{ {
name: "节点信息", name: '节点信息',
url: "nodes-info" url: 'nodes-info',
}, },
{ {
name: "显示操作菜单", name: '显示操作菜单',
url: "action-sheet", url: 'action-sheet',
}, },
{ {
name: "显示模态弹窗", name: '显示模态弹窗',
url: "modal", url: 'modal',
}, },
{ {
name: "显示加载提示框", name: '显示加载提示框',
url: "show-loading", url: 'show-loading',
}, },
{ {
name: "显示消息提示框", name: '显示消息提示框',
url: "toast", url: 'toast',
}, },
{ {
name: "动态加载字体", name: '动态加载字体',
url: "load-font-face", url: 'load-font-face',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "device", id: 'device',
name: "设备", name: '设备',
open: false, open: false,
pages: [ pages: [
{ {
name: "获取设备网络状态", name: '获取设备网络状态',
url: "get-network-type", url: 'get-network-type',
}, },
{ {
name: "获取系统信息", name: '获取系统信息',
url: "get-system-info", url: 'get-system-info',
}, },
{ {
name: "获取设备信息", name: '获取设备信息',
url: "get-device-info", url: 'get-device-info',
}, },
{ {
name: "获取APP基础信息", name: '获取APP基础信息',
url: "get-app-base-info", url: 'get-app-base-info',
}, },
{ {
name: "获取系统设置", name: '获取系统设置',
url: "get-system-setting", url: 'get-system-setting',
}, },
{ {
name: "获取APP授权设置", name: '获取APP授权设置',
url: "get-app-authorize-setting", url: 'get-app-authorize-setting',
}, },
{ {
name: "获取窗口信息", name: '获取窗口信息',
url: "get-window-info", url: 'get-window-info',
}, },
{ {
name: "电量", name: '电量',
url: "get-battery-info", url: 'get-battery-info',
}, },
/* { /* {
name: "打电话", name: "打电话",
url: "make-phone-call", url: "make-phone-call",
}, },
...@@ -240,52 +267,52 @@ ...@@ -240,52 +267,52 @@
name: "监听方向传感器", name: "监听方向传感器",
url: "/platforms/app-plus/orientation/orientation", url: "/platforms/app-plus/orientation/orientation",
}, */ }, */
] as Page[], ] as Page[],
}, },
{ {
id: "network", id: 'network',
name: "网络", name: '网络',
open: false, open: false,
pages: [ pages: [
{ {
name: "发起一个请求", name: '发起一个请求',
url: "request", url: 'request',
}, },
{ {
name: "上传文件", name: '上传文件',
url: "upload-file", url: 'upload-file',
}, },
{ {
name: "下载文件", name: '下载文件',
url: "download-file", url: 'download-file',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "websocket", id: 'websocket',
name: "websocket", name: 'websocket',
open: false, open: false,
pages: [ pages: [
{ {
name: "socketTask", name: 'socketTask',
url: "websocket-socketTask", url: 'websocket-socketTask',
}, },
{ {
name: "全局websocket", name: '全局websocket',
url: "websocket-global", url: 'websocket-global',
}, },
] as Page[], ] as Page[],
}, },
{ {
id: "media", id: 'media',
name: "媒体", name: '媒体',
open: false, open: false,
pages: [ pages: [
{ {
name: "图片选择和预览", name: '图片选择和预览',
url: "preview-image", url: 'preview-image',
}, },
/* { /* {
name: "图片选择和拍照", name: "图片选择和拍照",
url: "image", url: "image",
enable: false enable: false
...@@ -314,18 +341,18 @@ ...@@ -314,18 +341,18 @@
name: "保存媒体到本地", name: "保存媒体到本地",
url: "save-media", url: "save-media",
}, */ }, */
] as Page[], ] as Page[],
}, },
{ {
id: "location", id: 'location',
name: "位置", name: '位置',
open: false, open: false,
pages: [ pages: [
{ {
name: "获取当前位置", name: '获取当前位置',
url: "get-location", url: 'get-location',
}, },
/* { /* {
name: "使用地图查看位置", name: "使用地图查看位置",
url: "open-location", url: "open-location",
}, },
...@@ -341,20 +368,20 @@ ...@@ -341,20 +368,20 @@
name: "地图搜索", name: "地图搜索",
url: "map-search", url: "map-search",
}, */ }, */
] as Page[], ] as Page[],
}, },
{ {
id: "storage", id: 'storage',
name: "存储", name: '存储',
open: false, open: false,
pages: [ pages: [
{ {
name: "storage（key-value存储）", name: 'storage（key-value存储）',
url: "storage", url: 'storage',
} },
] as Page[], ] as Page[],
}, },
/* { /* {
id: "rewarded-video-ad", id: "rewarded-video-ad",
url: "rewarded-video-ad", url: "rewarded-video-ad",
name: "激励视频广告", name: "激励视频广告",
...@@ -429,60 +456,61 @@ ...@@ -429,60 +456,61 @@
}, },
] as Page[], ] as Page[],
}, */ }, */
{ {
id: "exit", id: 'exit',
name: "退出", name: '退出',
open: false, open: false,
pages: [ pages: [
{ {
name: "exit退出", name: 'exit退出',
url: "exit", url: 'exit',
enable: false enable: false,
} },
] as Page[], ] as Page[],
}
] as ListItem[],
arrowUpIcon: '/static/icons/arrow-up.png',
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
}, },
methods: { ] as ListItem[],
triggerCollapse(index ?: number, item : ListItem) { arrowUpIcon: '/static/icons/arrow-up.png',
if (item.pages.length == 0) { arrowDownIcon: '/static/icons/arrow-down.png',
const page : Page = { arrowRightIcon: '/static/icons/arrow-right.png',
name: item.name,
enable: item.enable,
url: item.url!
}
this.goDetailPage(page);
return;
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open;
} else {
this.list[i].open = false;
}
}
},
goDetailPage(e : Page) {
if (e.enable == false) {
uni.showToast({
title: '暂不支持',
icon:"none"
})
return
}
const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
uni.navigateTo({
url
})
}
}
} }
},
methods: {
triggerCollapse(index?: number, item: ListItem) {
if (item.pages.length == 0) {
const page: Page = {
name: item.name,
enable: item.enable,
url: item.url!,
}
this.goDetailPage(page)
return
}
for (var i = 0; i < this.list.length; ++i) {
if (index == i) {
this.list[i].open = !this.list[i].open
} else {
this.list[i].open = false
}
}
},
goDetailPage(e: Page) {
if (e.enable == false) {
uni.showToast({
title: '暂不支持',
icon: 'none',
})
return
}
const url =
e.url.indexOf('platform') > -1 ? e.url : `/pages/API/${e.url}/${e.url}`
uni.navigateTo({
url,
})
},
},
}
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style> </style>
\ No newline at end of file
pages/tabBar/CSS.uvue
浏览文件 @ b2112866
<template> <template>
<view class="uni-container"> <scroll-view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/cssIndex.png"></image> <image class="uni-header-image" src="/static/cssIndex.png"></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text> <text class="hello-text"
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" :inWhiteList="true"></u-link> >uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text
</view> >
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> <u-link
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)"> :href="'https://uniapp.dcloud.io/component/'"
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text> :text="'https://uniapp.dcloud.io/component/'"
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" class="uni-icon"></image> :inWhiteList="true"
</view> ></u-link>
<view class="uni-panel-c" v-if="item.open"> </view>
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"> <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<text class="uni-navigate-text" :class="page.enable == false ? 'text-disabled' : ''">{{page.name}}</text> <view
<image :src="arrowRightIcon" class="uni-icon"></image> class="uni-panel-h"
</view> :class="item.open ? 'uni-panel-h-on' : ''"
</view> @click="triggerCollapse(index, item)"
</view> >
</view> <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
"
class="uni-icon"
></image>
</view>
<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)"
>
<text
class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</scroll-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: 'background', {
name: 'background', id: 'background',
open: false, name: 'background',
pages: [ open: false,
{ pages: [
name: 'background-color', {
url: '/pages/CSS/background/background-color' name: 'background-color',
}, url: '/pages/CSS/background/background-color',
{ },
name: 'background-image', {
url: '/pages/CSS/background/background-image' name: 'background-image',
} url: '/pages/CSS/background/background-image',
] as Page[] },
}, { ] as Page[],
id: 'border', },
name: 'border', {
open: false, id: 'border',
pages: [ name: 'border',
{ open: false,
name: 'border', pages: [
url: '/pages/CSS/border/border' {
}, name: 'border',
{ url: '/pages/CSS/border/border',
name: 'border-width', },
url: '/pages/CSS/border/border-width' {
}, name: 'border-width',
{ url: '/pages/CSS/border/border-width',
name: 'border-style', },
url: '/pages/CSS/border/border-style' {
}, name: 'border-style',
{ url: '/pages/CSS/border/border-style',
name: 'border-color', },
url: '/pages/CSS/border/border-color' {
}, name: 'border-color',
{ url: '/pages/CSS/border/border-color',
name: 'border-radius', },
url: '/pages/CSS/border/border-radius' {
}, name: 'border-radius',
{ url: '/pages/CSS/border/border-radius',
name: 'border属性复合示例', },
url: '/pages/CSS/border/complex-border/complex-border' {
} name: 'border属性复合示例',
] as Page[] url: '/pages/CSS/border/complex-border/complex-border',
}, { },
id: 'box-shadow', ] as Page[],
name: 'box-shadow', },
open: false, {
pages: [ id: 'box-shadow',
{ name: 'box-shadow',
name: 'box-shadow', open: false,
url: '/pages/CSS/box-shadow/box-shadow' pages: [
}, {
] as Page[] name: 'box-shadow',
}, { url: '/pages/CSS/box-shadow/box-shadow',
id: 'flex', },
name: 'flex', ] as Page[],
open: false, },
pages: [ {
{ id: 'flex',
name: 'align-content', name: 'flex',
url: '/pages/CSS/flex/align-content' open: false,
}, pages: [
{ {
name: 'align-items', name: 'align-content',
url: '/pages/CSS/flex/align-items' url: '/pages/CSS/flex/align-content',
}, },
{ {
name: 'flex-basis', name: 'align-items',
url: '/pages/CSS/flex/flex-basis' url: '/pages/CSS/flex/align-items',
}, },
{ {
name: 'flex-direction', name: 'flex-basis',
url: '/pages/CSS/flex/flex-direction' url: '/pages/CSS/flex/flex-basis',
}, },
{ {
name: 'flex-flow', name: 'flex-direction',
url: '/pages/CSS/flex/flex-flow' url: '/pages/CSS/flex/flex-direction',
}, },
{ {
name: 'flex-grow', name: 'flex-flow',
url: '/pages/CSS/flex/flex-grow' url: '/pages/CSS/flex/flex-flow',
}, },
{ {
name: 'flex-shrink', name: 'flex-grow',
url: '/pages/CSS/flex/flex-shrink' url: '/pages/CSS/flex/flex-grow',
}, },
{ {
name: 'flex', name: 'flex-shrink',
url: '/pages/CSS/flex/flex' url: '/pages/CSS/flex/flex-shrink',
}, },
{ {
name: 'justify-content', name: 'flex',
url: '/pages/CSS/flex/justify-content' url: '/pages/CSS/flex/flex',
} },
] as Page[] {
}, { name: 'justify-content',
id: 'layout', url: '/pages/CSS/flex/justify-content',
name: 'layout', },
open: false, ] as Page[],
pages: [ },
{ {
name: 'height', id: 'layout',
url: '/pages/CSS/layout/height' name: 'layout',
}, open: false,
{ pages: [
name: 'max-height', {
url: '/pages/CSS/layout/max-height' name: 'height',
}, url: '/pages/CSS/layout/height',
{ },
name: 'max-width', {
url: '/pages/CSS/layout/max-width' name: 'max-height',
}, url: '/pages/CSS/layout/max-height',
{ },
name: 'min-height', {
url: '/pages/CSS/layout/min-height' name: 'max-width',
}, url: '/pages/CSS/layout/max-width',
{ },
name: 'min-width', {
url: '/pages/CSS/layout/min-width' name: 'min-height',
}, url: '/pages/CSS/layout/min-height',
{ },
name: 'position', {
url: '/pages/CSS/layout/position' name: 'min-width',
}, url: '/pages/CSS/layout/min-width',
{ },
name: 'width', {
url: '/pages/CSS/layout/width' name: 'position',
}, url: '/pages/CSS/layout/position',
{ },
name: 'visibility', {
url: '/pages/CSS/layout/visibility' name: 'width',
} url: '/pages/CSS/layout/width',
] as Page[] },
}, { {
id: 'margin', name: 'visibility',
name: 'margin', url: '/pages/CSS/layout/visibility',
open: false, },
pages: [ ] as Page[],
{ },
name: 'margin-bottom', {
url: '/pages/CSS/margin/margin-bottom' id: 'margin',
}, name: 'margin',
{ open: false,
name: 'margin-left', pages: [
url: '/pages/CSS/margin/margin-left' {
}, name: 'margin-bottom',
{ url: '/pages/CSS/margin/margin-bottom',
name: 'margin-right', },
url: '/pages/CSS/margin/margin-right' {
}, name: 'margin-left',
{ url: '/pages/CSS/margin/margin-left',
name: 'margin-top', },
url: '/pages/CSS/margin/margin-top' {
}, { name: 'margin-right',
name: 'margin', url: '/pages/CSS/margin/margin-right',
url: '/pages/CSS/margin/margin' },
} {
] as Page[] name: 'margin-top',
}, { url: '/pages/CSS/margin/margin-top',
id: 'padding', },
name: 'padding', {
open: false, name: 'margin',
pages: [ url: '/pages/CSS/margin/margin',
{ },
name: 'padding-bottom', ] as Page[],
url: '/pages/CSS/padding/padding-bottom' },
}, {
{ id: 'padding',
name: 'padding-left', name: 'padding',
url: '/pages/CSS/padding/padding-left' open: false,
}, pages: [
{ {
name: 'padding-right', name: 'padding-bottom',
url: '/pages/CSS/padding/padding-right' url: '/pages/CSS/padding/padding-bottom',
}, },
{ {
name: 'padding-top', name: 'padding-left',
url: '/pages/CSS/padding/padding-top' url: '/pages/CSS/padding/padding-left',
}, { },
name: 'padding', {
url: '/pages/CSS/padding/padding' name: 'padding-right',
} url: '/pages/CSS/padding/padding-right',
] as Page[] },
}, { {
id: 'text', name: 'padding-top',
name: 'text', url: '/pages/CSS/padding/padding-top',
open: false, },
pages: [ {
{ name: 'padding',
name: 'color', url: '/pages/CSS/padding/padding',
url: '/pages/CSS/text/color' },
}, ] as Page[],
{ },
name: 'font-family', {
url: '/pages/CSS/text/font-family' id: 'text',
}, name: 'text',
{ open: false,
name: 'font-size', pages: [
url: '/pages/CSS/text/font-size' {
}, name: 'color',
{ url: '/pages/CSS/text/color',
name: 'font-style', },
url: '/pages/CSS/text/font-style' {
}, name: 'font-family',
{ url: '/pages/CSS/text/font-family',
name: 'font-weight', },
url: '/pages/CSS/text/font-weight' {
}, name: 'font-size',
{ url: '/pages/CSS/text/font-size',
name: 'line-height', },
url: '/pages/CSS/text/line-height' {
}, name: 'font-style',
{ url: '/pages/CSS/text/font-style',
name: 'text-align', },
url: '/pages/CSS/text/text-align' {
}, name: 'font-weight',
{ url: '/pages/CSS/text/font-weight',
name: 'text-overflow', },
url: '/pages/CSS/text/text-overflow' {
}, name: 'line-height',
{ url: '/pages/CSS/text/line-height',
name: 'text-decoration-line', },
url: '/pages/CSS/text/text-decoration-line' {
} name: 'text-align',
] as Page[] url: '/pages/CSS/text/text-align',
}, { },
id: 'animate', {
name: '动画', name: 'text-overflow',
open: false, url: '/pages/CSS/text/text-overflow',
pages: [ },
{ {
name: 'transition', name: 'text-decoration-line',
url: '/pages/CSS/transition/transition' url: '/pages/CSS/text/text-decoration-line',
}, },
{ ] as Page[],
name: 'transform', },
url: '/pages/CSS/transform/transform' {
} id: 'animate',
] as Page[] name: '动画',
} open: false,
] as ListItem[], pages: [
arrowUpIcon: '/static/icons/arrow-up.png', {
arrowDownIcon: '/static/icons/arrow-down.png', name: 'transition',
arrowRightIcon: '/static/icons/arrow-right.png', url: '/pages/CSS/transition/transition',
} },
}, {
methods: { name: 'transform',
triggerCollapse(index ?: number, item : ListItem) { url: '/pages/CSS/transform/transform',
if (item.pages.length == 0) { },
const page : Page = { ] as Page[],
name: item.name, },
enable: item.enable, ] as ListItem[],
url: item.url arrowUpIcon: '/static/icons/arrow-up.png',
} arrowDownIcon: '/static/icons/arrow-down.png',
this.goDetailPage(page); arrowRightIcon: '/static/icons/arrow-right.png',
return; }
} },
for (var i = 0; i < this.list.length; ++i) { methods: {
if (index == i) { triggerCollapse(index?: number, item: ListItem) {
this.list[i].open = !this.list[i].open; if (item.pages.length == 0) {
} else { const page: Page = {
this.list[i].open = false; name: item.name,
} enable: item.enable,
} url: item.url,
}, }
goDetailPage(e : Page) { this.goDetailPage(page)
if (e.enable == false) { return
uni.showToast({ }
icon: 'none', for (var i = 0; i < this.list.length; ++i) {
title: '暂不支持' if (index == i) {
}) this.list[i].open = !this.list[i].open
return } else {
} this.list[i].open = false
const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}` }
uni.navigateTo({ }
url },
}) goDetailPage(e: Page) {
} if (e.enable == false) {
} uni.showToast({
} icon: 'none',
title: '暂不支持',
})
return
}
const url = e.url != null ? e.url! : `/pages/CSS/${e.name}/${e.name}`
uni.navigateTo({
url,
})
},
},
}
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style> </style>
\ No newline at end of file
pages/tabBar/component.uvue
浏览文件 @ b2112866
<template> <template>
<view class="uni-container"> <scroll-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"
<u-link :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'" >uni-app内置组件，展示样式仅供参考，文档详见：</text
:inWhiteList="true"></u-link> >
</view> <u-link
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> :href="'https://uniapp.dcloud.io/component/'"
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)"> :text="'https://uniapp.dcloud.io/component/'"
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text> :inWhiteList="true"
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" ></u-link>
class="uni-icon"></image> </view>
</view> <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
<view class="uni-panel-c" v-if="item.open"> <view
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"> class="uni-panel-h"
<text class="uni-navigate-text" :class="item.open ? 'uni-panel-h-on' : ''"
:class="page.enable == false ? 'text-disabled' : ''">{{page.name}}</text> @click="triggerCollapse(index, item)"
<image :src="arrowRightIcon" class="uni-icon"></image> >
</view> <text
</view> class="uni-panel-text"
</view> :class="item.enable == false ? 'text-disabled' : ''"
</view> >{{ item.name }}</text
>
<image
:src="
item.pages.length > 0
? item.open
? arrowUpIcon
: arrowDownIcon
: arrowRightIcon
"
class="uni-icon"
></image>
</view>
<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)"
>
<text
class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</scroll-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', {
name: '视图容器', id: 'view',
open: false, name: '视图容器',
pages: [ open: false,
{ pages: [
name: 'view', {
}, name: 'view',
{ },
name: 'scroll-view', {
}, name: 'scroll-view',
{ },
name: 'swiper', {
}, name: 'swiper',
/* },
/*
{ {
name: 'movable-view', name: 'movable-view',
enable: false enable: false
...@@ -66,75 +96,83 @@ ...@@ -66,75 +96,83 @@
enable: false enable: false
}, },
*/ */
{ {
name: 'list（新闻）', name: 'list（新闻）',
url: "/pages/component/list/list", url: '/pages/component/list/list',
}, },
{ {
name: 'list', name: 'list',
url: "/pages/component/long-list/long-list", url: '/pages/component/long-list/long-list',
} },
] as Page[] ] as Page[],
}, { },
id: 'content', {
name: '基础内容', id: 'content',
open: false, name: '基础内容',
pages: [ open: false,
{ pages: [
name: 'text', {
}, name: 'text',
{ },
name: 'rich-text', {
enable: false name: 'rich-text',
}, enable: false,
{ },
name: 'progress', {
} name: 'progress',
] as Page[] },
}, { ] as Page[],
id: 'form', },
name: '表单组件', {
open: false, id: 'form',
pages: [ name: '表单组件',
{ open: false,
name: 'button', pages: [
}, {
{ name: 'button',
name: 'checkbox', },
}, {
/* { name: 'checkbox',
},
/* {
name: 'form', name: 'form',
enable: false enable: false
}, */ }, */
{ {
name: 'input', name: 'input',
/* }, { /* }, {
name: 'label', name: 'label',
enable: false enable: false
}, { }, {
name: 'picker', name: 'picker',
enable: false */ enable: false */
}, { },
name: 'picker-view' {
}, { name: 'picker-view',
name: 'radio', },
}, { {
name: 'slider', name: 'radio',
}, { },
name: 'slider-100', {
}, { name: 'slider',
name: 'switch', },
}, { {
name: 'textarea', name: 'slider-100',
}, },
/* {
name: 'switch',
},
{
name: 'textarea',
},
/*
{ {
name: 'editor', name: 'editor',
enable: false enable: false
}, },
*/ */
] as Page[] ] as Page[],
/* }, { /* }, {
id: 'nav', id: 'nav',
name: '导航', name: '导航',
open: false, open: false,
...@@ -142,22 +180,27 @@ ...@@ -142,22 +180,27 @@
name: 'navigator', name: 'navigator',
enable: false enable: false
}] as Page[] */ }] as Page[] */
}, { },
id: 'media', {
name: '媒体组件', id: 'media',
open: false, name: '媒体组件',
pages: [{ open: false,
name: 'image', pages: [
enable: true {
}, { name: 'image',
name: 'video', enable: true,
enable: true },
}, { {
name: 'animation-view', name: 'video',
enable: false enable: true,
}] as Page[] },
}, {
/* name: 'animation-view',
enable: false,
},
] as Page[],
},
/*
{ {
id: 'map', id: 'map',
name: '地图', name: '地图',
...@@ -180,24 +223,24 @@ ...@@ -180,24 +223,24 @@
] as Page[] ] as Page[]
}, },
*/ */
{ {
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[],
}, },
/* /*
{ {
id: 'ad', id: 'ad',
url: 'ad', url: 'ad',
...@@ -207,64 +250,66 @@ ...@@ -207,64 +250,66 @@
pages: [] as Page[] pages: [] as Page[]
} }
*/ */
{ {
id: "general-attr-event", id: 'general-attr-event',
name: "通用属性和事件", name: '通用属性和事件',
open: false, open: false,
pages: [ pages: [
{ {
name: "通用属性", name: '通用属性',
url: "general-attr", url: 'general-attr',
enable: false enable: false,
},{ },
name: "通用事件", {
url: "general-event", name: '通用事件',
enable: false url: 'general-event',
}, enable: false,
] as Page[], },
}, ] as Page[],
] as ListItem[], },
arrowUpIcon: '/static/icons/arrow-up.png', ] as ListItem[],
arrowDownIcon: '/static/icons/arrow-down.png', arrowUpIcon: '/static/icons/arrow-up.png',
arrowRightIcon: '/static/icons/arrow-right.png', arrowDownIcon: '/static/icons/arrow-down.png',
} arrowRightIcon: '/static/icons/arrow-right.png',
}, }
methods: { },
triggerCollapse(index ?: number, item : ListItem) { methods: {
if (item.pages.length == 0) { triggerCollapse(index?: number, item: ListItem) {
const page : Page = { if (item.pages.length == 0) {
name: item.name, const page: Page = {
enable: item.enable, name: item.name,
url: item.url enable: item.enable,
} url: item.url,
this.goDetailPage(page); }
return; this.goDetailPage(page)
} return
for (var i = 0; i < this.list.length; ++i) { }
if (index == i) { for (var i = 0; i < this.list.length; ++i) {
this.list[i].open = !this.list[i].open; if (index == i) {
} else { this.list[i].open = !this.list[i].open
this.list[i].open = false; } else {
} this.list[i].open = false
} }
}, }
goDetailPage(e : Page) { },
if (e.enable == false) { goDetailPage(e: Page) {
uni.showToast({ if (e.enable == false) {
title: '暂不支持', uni.showToast({
icon: 'none' title: '暂不支持',
}) icon: 'none',
return })
} return
const url = e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}` }
uni.navigateTo({ const url =
url e.url != null ? e.url! : `/pages/component/${e.name}/${e.name}`
}) uni.navigateTo({
} url,
} })
} },
},
}
</script> </script>
<style> <style>
@import '../../common/uni-uvue.css'; @import '../../common/uni-uvue.css';
</style> </style>
\ No newline at end of file
pages/tabBar/template.uvue
浏览文件 @ b2112866
<template> <template>
<view class="uni-container"> <scroll-view class="uni-container">
<view class="uni-header-logo"> <view class="uni-header-logo">
<image class="uni-header-image" src="/static/templateIndex.png"></image> <image class="uni-header-image" src="/static/templateIndex.png"></image>
</view> </view>
<view class="uni-hello-text"> <view class="uni-hello-text">
<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text> <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
<u-link class="hello-link" href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'" <u-link
:inWhiteList="true"></u-link> class="hello-link"
</view> href="https://ext.dcloud.net.cn"
<view class="uni-panel" v-for="(item, index) in list" :key="item.id"> :text="'https://ext.dcloud.net.cn'"
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)"> :inWhiteList="true"
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text> ></u-link>
<image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" </view>
class="uni-icon"> <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
</image> <view
</view> class="uni-panel-h"
<view class="uni-panel-c" v-if="item.open"> :class="item.open ? 'uni-panel-h-on' : ''"
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"> @click="triggerCollapse(index, item)"
<text class="uni-navigate-text" >
:class="page.enable == false ? 'text-disabled' : ''">{{page.name}}</text> <text
<image :src="arrowRightIcon" class="uni-icon"></image> class="uni-panel-text"
</view> :class="item.enable == false ? 'text-disabled' : ''"
</view> >{{ item.name }}</text
</view> >
</view> <image
:src="
item.pages.length > 0
? item.open
? arrowUpIcon
: arrowDownIcon
: arrowRightIcon
"
class="uni-icon"
>
</image>
</view>
<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)"
>
<text
class="uni-navigate-text"
:class="page.enable == false ? 'text-disabled' : ''"
>{{ page.name }}</text
>
<image :src="arrowRightIcon" class="uni-icon"></image>
</view>
</view>
</view>
</scroll-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: "long-list", id: 'long-list',
url: "long-list", url: 'long-list',
name: "复杂长列表", name: '复杂长列表',
open: false, open: false,
enable: false, enable: false,
pages: [] as Page[] pages: [] as Page[],
},{ },
id: "scroll-fold-nav", {
url: "scroll-fold-nav", id: 'scroll-fold-nav',
name: "随滚动折叠的导航栏", url: 'scroll-fold-nav',
open: false, name: '随滚动折叠的导航栏',
pages: [] as Page[] open: false,
},{ pages: [] as Page[],
id: "scroll-fold-nav2", },
url: "scroll-fold-nav2", {
name: "随滚动折叠的导航栏2", id: 'scroll-fold-nav2',
open: false, url: 'scroll-fold-nav2',
pages: [] as Page[] name: '随滚动折叠的导航栏2',
}, { open: false,
id: "swiper-list", pages: [] as Page[],
url: "swiper-list", },
name: "swiper-list", {
open: false, id: 'swiper-list',
enable: false, url: 'swiper-list',
pages: [] as Page[] name: 'swiper-list',
open: false,
}, { enable: false,
id: "custom-refresher", pages: [] as Page[],
url: "custom-refresher", },
name: "自定义下拉刷新", {
open: false, id: 'custom-refresher',
pages: [] as Page[] url: 'custom-refresher',
}, name: '自定义下拉刷新',
{ open: false,
id: "pull-zoom-image", pages: [] as Page[],
url: "pull-zoom-image", },
name: "下拉缩放顶部封面图", {
open: false, id: 'pull-zoom-image',
enable: false, url: 'pull-zoom-image',
pages: [] as Page[] name: '下拉缩放顶部封面图',
}, open: false,
{ enable: false,
id: "show-search-with-scroll", pages: [] as Page[],
url: "show-search-with-scroll", },
name: "滚动后自动显隐的搜索框", {
open: false, id: 'show-search-with-scroll',
enable: false, url: 'show-search-with-scroll',
pages: [] as Page[] name: '滚动后自动显隐的搜索框',
}, open: false,
{ enable: false,
id: "swiper-vertical-video", pages: [] as Page[],
url: "swiper-vertical-video", },
name: "竖滑视频", {
open: false, id: 'swiper-vertical-video',
pages: [] as Page[] url: 'swiper-vertical-video',
}, name: '竖滑视频',
{ open: false,
id: "scroll-sticky", pages: [] as Page[],
url: "scroll-sticky", },
name: "吸顶", {
open: false, id: 'scroll-sticky',
pages: [] as Page[] url: 'scroll-sticky',
}, name: '吸顶',
{ open: false,
id: "half-screen", pages: [] as Page[],
url: "half-screen", },
name: "半屏弹窗", {
open: false, id: 'half-screen',
pages: [] as Page[] url: 'half-screen',
}, name: '半屏弹窗',
{ open: false,
id: "drop-card", pages: [] as Page[],
url: "drop-card", },
name: "划走式卡片", {
open: false, id: 'drop-card',
pages: [] as Page[] url: 'drop-card',
}, name: '划走式卡片',
{ open: false,
id: "calendar", pages: [] as Page[],
url: "calendar", },
name: "日历", {
open: false, id: 'calendar',
pages: [] as Page[] url: 'calendar',
} name: '日历',
] as ListItem[], open: false,
arrowUpIcon: '/static/icons/arrow-up.png', pages: [] as Page[],
arrowDownIcon: '/static/icons/arrow-down.png', },
arrowRightIcon: '/static/icons/arrow-right.png', ] as ListItem[],
} arrowUpIcon: '/static/icons/arrow-up.png',
}, arrowDownIcon: '/static/icons/arrow-down.png',
methods: { arrowRightIcon: '/static/icons/arrow-right.png',
triggerCollapse(index ?: number, item : ListItem) { }
if (item.pages.length == 0) { },
const page : Page = { methods: {
name: item.name, triggerCollapse(index?: number, item: ListItem) {
enable: item.enable, if (item.pages.length == 0) {
url: item.url! const page: Page = {
} name: item.name,
this.goDetailPage(page); enable: item.enable,
return; url: item.url!,
} }
for (var i = 0; i < this.list.length; ++i) { this.goDetailPage(page)
if (index == i) { return
this.list[i].open = !this.list[i].open; }
} else { for (var i = 0; i < this.list.length; ++i) {
this.list[i].open = false; if (index == i) {
} this.list[i].open = !this.list[i].open
} } else {
}, this.list[i].open = false
goDetailPage(e : Page) { }
if (e.enable == false) { }
uni.showToast({ },
icon: 'none', goDetailPage(e: Page) {
title: '暂不支持' if (e.enable == false) {
}) uni.showToast({
return icon: 'none',
} title: '暂不支持',
const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/template/${e.url}/${e.url}` })
uni.navigateTo({ return
url }
}) const url =
} e.url.indexOf('platform') > -1
} ? e.url
} : `/pages/template/${e.url}/${e.url}`
uni.navigateTo({
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.
先完成此消息的编辑！
想要评论请 注册 或