Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6067
Star 93
Fork 166
H
hello uni-app x
提交 9ecb851f 编写于 作者: Anne_LXM's avatar Anne_LXM
浏览文件
操作

新增：web端宽屏适配（4.24版支持custom-tab-bar）

上级 1bd8e8e8
隐藏空白更改
内联 并排
Showing with 515 addition and 116 deletion
App.uvue
浏览文件 @ 9ecb851f
......@@ -83,4 +83,12 @@
<style>
/*每个页面公共css */
@import "./common/uni.css";
/* #ifdef WEB */
.uni-top-window uni-tabbar .uni-tabbar {
background-color: #fff !important;
}
.uni-app--showleftwindow .uni-page-head-btn {
display: none !important;
}
/* #endif */
</style>
common/uni.css
浏览文件 @ 9ecb851f
......@@ -123,7 +123,7 @@
.uni-bg-blue {
background: #007AFF;
}
}
.uni-btn-v {
padding: 5px 0;
......@@ -189,7 +189,7 @@
}
.text-disabled {
color: #a0a0a0;
color: #a0a0a0!important;
}
......@@ -244,6 +244,11 @@
color: #000000;
font-size: 14px;
font-weight: normal;
}
/* left-windows */
.left-win-active {
color: #007AFF!important;
}
/* --tab-bar-end-- */
......
pages.json
浏览文件 @ 9ecb851f
{
"leftWindow": {
"path": "windows/left-window.uvue",
"style": {
"width": "350px"
}
},
"topWindow": {
"path": "windows/top-window.uvue",
"style": {
"height": "60px"
}
},
"pages": [
{
"path": "pages/tabBar/component",
......@@ -358,7 +370,7 @@
"navigationBarTitleText": "Touch Events"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/component/nested-scroll-header/nested-scroll-header",
"group": "0,1,8,0",
......@@ -366,8 +378,8 @@
"navigationBarTitleText": "nested-scroll-header"
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/component/nested-scroll-body/nested-scroll-body",
"group": "0,1,8,1",
......@@ -375,7 +387,7 @@
"navigationBarTitleText": "nested-scroll-body"
}
},
// #endif
// #endif
{
"path": "pages/component/swiper/swiper-list-view",
"style": {
......@@ -383,7 +395,7 @@
"enablePullDownRefresh": false
}
},
// #ifdef WEB
// #ifdef WEB
{
"path": "pages/component/movable-view/movable-view",
"group": "0,1,4,1",
......@@ -391,8 +403,8 @@
"navigationBarTitleText": "movable-view | 可拖动视图容器"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/component/label/label",
"group": "0,3,5",
......@@ -400,8 +412,8 @@
"navigationBarTitleText": "label"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/component/picker/picker",
"group": "0,3,6",
......@@ -409,8 +421,8 @@
"navigationBarTitleText": "picker | 底部弹出滚动选择器"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/component/map/map",
"group": "0,6",
......@@ -418,8 +430,8 @@
"navigationBarTitleText": "map | 地图"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/component/cover-view/cover-view",
"group": "0,1,5,0",
......@@ -427,8 +439,8 @@
"navigationBarTitleText": "cover-view"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/component/editor/editor",
"group": "0,3,4",
......@@ -436,8 +448,8 @@
"navigationBarTitleText": "editor | 富文本编辑器"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/open-location/open-location",
"group": "1,8,1",
......@@ -445,8 +457,8 @@
"navigationBarTitleText": "openLocation | 使用地图查看位置"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/choose-location/choose-location",
"group": "1,8,2",
......@@ -454,7 +466,7 @@
"navigationBarTitleText": "chooseLocation | 使用地图选择位置"
}
},
// #endif
// #endif
{
"path": "pages/component/list-view/issue-2199",
"style": {
......@@ -490,7 +502,7 @@
"navigationBarTitleText": "getApp | 获取当前应用实例"
}
},
// #ifdef APP-ANDROID
// #ifdef APP-ANDROID
{
"path": "pages/API/exit/exit",
"group": "1,1,5",
......@@ -498,8 +510,8 @@
"navigationBarTitleText": "exit | 退出应用"
}
},
// #endif
// #ifdef APP-ANDROID
// #endif
// #ifdef APP-ANDROID
{
"path": "pages/API/install-apk/install-apk",
"group": "1,6,6",
......@@ -508,7 +520,7 @@
"enablePullDownRefresh": false
}
},
// #endif
// #endif
{
"path": "pages/API/get-current-pages/get-current-pages",
"group": "1,0,1",
......@@ -592,7 +604,7 @@
"navigationBarTitleText": "storage | key-value本地数据存储"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/get-file-system-manager/get-file-system-manager",
"group": "1,10,0",
......@@ -600,8 +612,8 @@
"navigationBarTitleText": "getFileSystemManager | 获取文件管理器"
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/env/env",
"group": "1,1,0",
......@@ -609,7 +621,7 @@
"navigationBarTitleText": "env | 环境变量"
}
},
// #endif
// #endif
{
"path": "pages/API/show-action-sheet/show-action-sheet",
"group": "1,4,1",
......@@ -746,7 +758,7 @@
"navigationBarTitleText": "getAppBaseInfo | 获取APP基础信息"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/get-system-setting/get-system-setting",
"group": "1,6,5",
......@@ -754,8 +766,8 @@
"navigationBarTitleText": "getSystemSetting | 获取系统设置"
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/element-takesnapshot/element-takesnapshot",
"group": "1,30",
......@@ -764,8 +776,8 @@
"enablePullDownRefresh": false
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/get-app-authorize-setting/get-app-authorize-setting",
"group": "1,6,4",
......@@ -773,7 +785,7 @@
"navigationBarTitleText": "getAppAuthorizeSetting | 获取APP授权设置"
}
},
// #endif
// #endif
{
"path": "pages/API/preview-image/preview-image",
"group": "1,7,1",
......@@ -795,7 +807,7 @@
"navigationBarTitleText": "getImageInfo | 获取图片信息"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/compress-image/compress-image",
"group": "1,7,4",
......@@ -803,7 +815,7 @@
"navigationBarTitleText": "compressImage | 压缩图片"
}
},
// #endif
// #endif
{
"path": "pages/API/choose-video/choose-video",
"group": "1,7,5",
......@@ -811,7 +823,7 @@
"navigationBarTitleText": "chooseVideo | 拍摄视频或从相册中选择视频"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/save-image-to-photos-album/save-image-to-photos-album",
"group": "1,7,2",
......@@ -819,8 +831,8 @@
"navigationBarTitleText": "saveImageToPhotosAlbum | 保存图片到相册"
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/save-video-to-photos-album/save-video-to-photos-album",
"group": "1,7,6",
......@@ -828,7 +840,7 @@
"navigationBarTitleText": "saveVideoToPhotosAlbum | 保存视频到相册"
}
},
// #endif
// #endif
{
"path": "pages/API/get-video-info/get-video-info",
"group": "1,7,7",
......@@ -836,7 +848,7 @@
"navigationBarTitleText": "getVideoInfo | 获取视频信息"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/compress-video/compress-video",
"group": "1,7,8",
......@@ -844,7 +856,7 @@
"navigationBarTitleText": "compressVideo | 压缩视频"
}
},
// #endif
// #endif
{
"path": "pages/API/get-network-type/get-network-type",
"group": "1,5,3",
......@@ -894,7 +906,7 @@
"navigationBarTitleText": "getWindowInfo | 获取窗口信息"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/element-draw/element-draw",
"group": "1,30",
......@@ -903,8 +915,8 @@
"enablePullDownRefresh": false
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/facial-recognition-meta-info/facial-recognition-meta-info",
"group": "1,11,1",
......@@ -913,8 +925,8 @@
"enablePullDownRefresh": false
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/get-univerify-manager/get-univerify-manager",
"group": "1,11,0",
......@@ -923,7 +935,7 @@
"enablePullDownRefresh": false
}
},
// #endif
// #endif
{
"path": "pages/API/rpx2px/rpx2px",
"group": "1,4,6",
......@@ -932,7 +944,7 @@
"enablePullDownRefresh": false
}
},
// #ifdef APP-ANDROID
// #ifdef APP-ANDROID
{
"path": "pages/API/create-request-permission-listener/create-request-permission-listener",
"group": "1,6,16",
......@@ -941,8 +953,8 @@
"enablePullDownRefresh": false
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/request-payment/request-payment",
"group": "1,14,0",
......@@ -951,8 +963,8 @@
"enablePullDownRefresh": false
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/create-rewarded-video-ad/create-rewarded-video-ad",
"group": "1,12,0",
......@@ -961,7 +973,7 @@
"enablePullDownRefresh": false
}
},
// #endif
// #endif
{
"path": "pages/API/request-payment/request-payment/request-payment-uni-pay",
"group": "1,14",
......@@ -977,7 +989,7 @@
"enablePullDownRefresh": false
}
},
// #ifdef WEB
// #ifdef WEB
{
"path": "pages/API/make-phone-call/make-phone-call",
"group": "1,6,9",
......@@ -985,8 +997,8 @@
"navigationBarTitleText": "makePhoneCall | 打电话"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/create-inner-audio-context/create-inner-audio-context",
"group": "1,7,9",
......@@ -994,24 +1006,24 @@
"navigationBarTitleText": "createInnerAudioContext | 音频"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/create-inner-audio-context/inner-audio-format",
"style": {
"navigationBarTitleText": "inner-audio-format"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/create-inner-audio-context/inner-audio-path",
"style": {
"navigationBarTitleText": "inner-audio-path"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/clipboard/clipboard",
"group": "1,6,10",
......@@ -1019,8 +1031,8 @@
"navigationBarTitleText": "clipboard | 剪切板"
}
},
// #endif
// #ifdef WEB
// #endif
// #ifdef WEB
{
"path": "pages/API/compass/compass",
"group": "1,6,11",
......@@ -1028,8 +1040,8 @@
"navigationBarTitleText": "compass | 罗盘"
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/theme-change/theme-change",
"group": "1,4,7",
......@@ -1038,7 +1050,7 @@
"enablePullDownRefresh": false
}
},
// #endif
// #endif
{
"path": "pages/API/get-element-by-id/get-element-by-id",
"group": "1,3,0",
......@@ -1066,7 +1078,7 @@
"navigationBarTitleText": "UniResizeObserver"
}
},
// #ifndef WEB
// #ifndef WEB
{
"path": "pages/API/get-provider/get-provider",
"group": "1,1,6",
......@@ -1074,8 +1086,8 @@
"navigationBarTitleText": "getProvider | 获取服务提供商"
}
},
// #endif
// #ifndef WEB
// #endif
// #ifndef WEB
{
"path": "pages/API/push/push",
"group": "1,6,7",
......@@ -1083,7 +1095,7 @@
"navigationBarTitleText": "push | 推送"
}
},
// #endif
// #endif
{
"path": "pages/tabBar/CSS",
"style": {
......@@ -2650,4 +2662,4 @@
]
}
]
}
\ No newline at end of file
}
pages/tabBar/API.uvue
浏览文件 @ 9ecb851f
......@@ -3,23 +3,21 @@
<scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container">
<view class="uni-header-logo">
<view v-if="!hasLeftWin" class="uni-header-logo">
<image class="uni-header-image" src="/static/apiIndex.png"></image>
</view>
<view class="uni-text-box">
<view v-if="!hasLeftWin" class="uni-text-box">
<text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/api/'" :text="'https://uniapp.dcloud.io/uni-app-x/api/'"
:inWhiteList="true"></u-link>
</view>
<uni-collapse>
<uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
<uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
class="item">
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
@click="goPage(`/${page.path}`)">
<text class="uni-navigate-text">{{
page.style["navigationBarTitleText"]
}}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{page.style["navigationBarTitleText"]}}</text>
<image :src="arrowRightIcon" class="uni-icon-size" style="color: #898fdd;"></image>
</view>
<uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
......@@ -33,28 +31,37 @@
</uni-collapse-item>
</uni-collapse>
</uni-collapse-item>
</uni-collapse>
</uni-collapse>
<view v-if="!hasLeftWin" ref="pop" @click="hidePop()" class="popup">
<view style="width: 90%; background-color: white" @click="stopClickPop">
<api-set-tabbar></api-set-tabbar>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
<view ref="pop" @click="hidePop()" class="popup">
<view style="width: 90%; background-color: white" @click="stopClickPop">
<api-set-tabbar></api-set-tabbar>
</view>
</view>
</template>
<script lang="uts">
import { generateMenu } from './generateMenu.uts'
import { MenuItem } from './generateMenu.uts'
const menu = generateMenu('pages/API')
const menu = generateMenu('pages/API')
import { state } from '@/store/index.uts'
export default {
data() {
return {
menu: menu as (MenuItem | null)[],
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
computed: {
hasLeftWin(){
return !state.noMatchLeftWindow
},
leftWinActive(){
return state.leftWinActive.slice(1)
}
},
methods: {
goPage(url : string) {
......@@ -73,7 +80,24 @@
stopClickPop: function (e : PointerEvent) {
e.stopPropagation() //点击到pop的非灰色区域，拦截点击事件
}
},
},
// #ifdef WEB
watch:{
$route: {
immediate: true,
handler(newRoute) {
if (newRoute.matched.length) {
const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
if (activeCategoryIndex > -1) {
this.$nextTick(() => {
((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
})
}
}
}
}
},
// #endif
}
</script>
......
pages/tabBar/CSS.uvue
浏览文件 @ 9ecb851f
......@@ -3,20 +3,20 @@
<scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container">
<view class="uni-header-logo">
<view v-if="!hasLeftWin" class="uni-header-logo">
<image class="uni-header-image" src="/static/cssIndex.png"></image>
</view>
<view class="uni-text-box">
<view v-if="!hasLeftWin" class="uni-text-box">
<text class="hello-text">uni-app x目前已支持的CSS属性，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/css/'" :text="'https://uniapp.dcloud.io/uni-app-x/css/'"
:inWhiteList="true"></u-link>
</view>
<uni-collapse>
<uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
<uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
class="item">
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
@click="goPage(`/${page.path}`)">
<text class="uni-navigate-text">{{
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
page.style["navigationBarTitleText"]
}}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
......@@ -43,19 +43,45 @@
<script lang="uts">
import { generateMenu } from './generateMenu.uts'
import { MenuItem } from './generateMenu.uts'
const menu = generateMenu('pages/CSS')
const menu = generateMenu('pages/CSS')
import { state } from '@/store/index.uts'
export default {
data() {
return {
menu: menu as (MenuItem | null)[],
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
computed: {
hasLeftWin(){
return !state.noMatchLeftWindow
},
leftWinActive(){
return state.leftWinActive.slice(1)
}
},
methods: {
goPage(url : string) {
uni.navigateTo({ url })
},
},
},
// #ifdef WEB
watch:{
$route: {
immediate: true,
handler(newRoute) {
if (newRoute.matched.length) {
const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
if (activeCategoryIndex > -1) {
this.$nextTick(() => {
((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex]).$callMethod('openCollapse', true)
})
}
}
}
}
},
// #endif
}
</script>
......
pages/tabBar/component.uvue
浏览文件 @ 9ecb851f
......@@ -3,20 +3,20 @@
<scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container">
<view class="uni-header-logo">
<view v-if="!hasLeftWin" class="uni-header-logo">
<image class="uni-header-image" src="/static/componentIndex.png"></image>
</view>
<view class="uni-text-box">
<view v-if="!hasLeftWin" class="uni-text-box">
<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
<u-link :href="'https://uniapp.dcloud.io/uni-app-x/component/'"
:text="'https://uniapp.dcloud.io/uni-app-x/component/'" :inWhiteList="true"></u-link>
</view>
<uni-collapse>
<uni-collapse-item v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
<uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
class="item">
<view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
@click="goPage(`/${page.path}`)">
<text class="uni-navigate-text">{{
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
page.style["navigationBarTitleText"]
}}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
......@@ -25,7 +25,7 @@
<uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
<view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
:key="childPage!.path" @click="goPage(`/${childPage.path}`)">
<text class="uni-navigate-text">{{
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
childPage.style["navigationBarTitleText"]
}}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
......@@ -51,7 +51,7 @@
// #ifdef UNI-APP-X && APP
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
// #endif
import { state } from '@/store/index.uts'
export default {
data() {
return {
......@@ -59,7 +59,15 @@
arrowRightIcon: '/static/icons/arrow-right.png' as string.ImageURIString,
pageHiden: false
}
},
},
computed: {
hasLeftWin(){
return !state.noMatchLeftWindow
},
leftWinActive(){
return state.leftWinActive.slice(1)
}
},
methods: {
goPage(url : string) {
uni.navigateTo({ url })
......@@ -76,7 +84,24 @@
uni.showTabBar()?.catch(_ => { })
}
// #endif
},
},
// #ifdef WEB
watch:{
$route: {
immediate: true,
handler(newRoute) {
if (newRoute.matched.length) {
const activeCategoryIndex = this.menu.findIndex(menuItem => menuItem?.pages.some(page => this.leftWinActive && this.leftWinActive === page?.path))
if (activeCategoryIndex > -1) {
this.$nextTick(() => {
((this.$refs.category as ComponentPublicInstance[])[activeCategoryIndex])?.$callMethod('openCollapse', true)
})
}
}
}
}
},
// #endif
onReady() {
// #ifdef UNI-APP-X && APP
checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
......
pages/tabBar/generateMenu.uts
浏览文件 @ 9ecb851f
import { pages, groups } from '@/pages.json'
import { state } from '@/store/index.uts'
type Group = {
id : string,
name : string,
......@@ -141,7 +141,7 @@ function removeNullItem(arr : (MenuItem | null)[]) : (MenuItem | null)[] {
function addSetTabBarPage(menuItem : MenuItem) {
const { id, name } = menuItem
if (id == 'page' && name == '页面和路由') {
if (id == 'page' && name == '页面和路由' && !state.noMatchLeftWindow) {
menuItem.pages.push({
path: 'set-tab-bar',
style: {
......
pages/tabBar/template.uvue
浏览文件 @ 9ecb851f
......@@ -3,16 +3,16 @@
<scroll-view style="flex: 1; background-color: #f8f8f8" enable-back-to-top="true">
<!-- #endif -->
<view class="uni-container">
<view class="uni-header-logo">
<view v-if="!hasLeftWin" class="uni-header-logo">
<image class="uni-header-image" src="/static/templateIndex.png"></image>
</view>
<view class="uni-text-box">
<view v-if="!hasLeftWin" class="uni-text-box">
<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
<u-link href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'" :inWhiteList="true"></u-link>
</view>
<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)">
<text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{ item.name }}</text>
<view class="uni-panel-h" @click="triggerCollapse(index, item)">
<text class="uni-panel-text" :class="item.enable == false || item.open == true ? 'text-disabled' : '',item.url == leftWinActive && item.pages.length == 0 ? 'left-win-active' : ''">{{ item.name }}</text>
<image :src="
item.pages.length > 0
? item.open
......@@ -25,7 +25,7 @@
<view v-if="item.open">
<view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
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>
<text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.url && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
<image :src="arrowRightIcon" class="uni-icon-size"></image>
</view>
</view>
......@@ -50,7 +50,8 @@
pages : Page[]
url ?: string
enable ?: boolean
}
}
import { state } from '@/store/index.uts'
export default {
data() {
return {
......@@ -231,6 +232,14 @@
arrowDownIcon: '/static/icons/arrow-down.png',
arrowRightIcon: '/static/icons/arrow-right.png',
}
},
computed: {
hasLeftWin(){
return !state.noMatchLeftWindow
},
leftWinActive(){
return state.leftWinActive.split('/')[3]
}
},
methods: {
triggerCollapse(index : number, item : ListItem) {
......@@ -267,6 +276,27 @@
url,
})
},
},
},
// #ifdef WEB
watch: {
$route: {
immediate: true,
handler(newRoute) {
if (newRoute.matched.length) {
let path = newRoute.path.split('/')[3]
for (const item of this.list) {
if (Array.isArray(item.pages)) {
for (const page of item.pages) {
if (page.url && page.url === path) {
item.open = true
}
}
}
}
}
}
}
},
// #endif
}
</script>
store/index.uts
浏览文件 @ 9ecb851f
......@@ -15,14 +15,22 @@ type State = {
// 设备像素比
devicePixelRatio : number
// 事件判断回调
eventCallbackNum: number
eventCallbackNum: number
// 是否匹配左侧窗口
noMatchLeftWindow:boolean
// 当前激活的tab页
active: string
leftWinActive:string
}
export const state = reactive({
lifeCycleNum: 0,
statusBarHeight: 0,
devicePixelRatio: 1,
eventCallbackNum: 0,
eventCallbackNum: 0,
noMatchLeftWindow: true,
active: 'componentPage',
leftWinActive: '/pages/component/public-properties/public-properties',
safeArea: {
top: 0,
right: 0,
......@@ -53,3 +61,15 @@ export const setDevicePixelRatio = (devicePixelRatio : number) => {
state.devicePixelRatio = devicePixelRatio
}
export const setMatchLeftWindow = (matchLeftWindow:boolean) => {
state.noMatchLeftWindow = !matchLeftWindow
}
export const setActive = (tabPage:string) => {
state.active = tabPage
}
export const setLeftWinActive = (leftWinActive:string) => {
state.leftWinActive = leftWinActive
}
windows/left-window.uvue 0 → 100644
浏览文件 @ 9ecb851f
<template>
<view class="left-window-style">
<view class="second-menu">
<keep-alive>
<component :is="active" :hasLeftWin="hasLeftWin" :leftWinActive="leftWinActive"></component>
</keep-alive>
</view>
</view>
</template>
<script lang="uts">
import componentPage from '@/pages/tabBar/component.uvue'
import API from '@/pages/tabBar/API.uvue'
import CSS from '@/pages/tabBar/CSS.uvue'
import templatePage from '@/pages/tabBar/template.uvue'
import { state, setMatchLeftWindow, setActive, setLeftWinActive } from '@/store/index.uts'
let isPcObserver, isPhoneObserver
export default {
data() {
return {
nav: [
'component',
'API',
'CSS',
'template'
],
isPC: false
}
},
components: {
componentPage,
API,
CSS,
templatePage
},
computed: {
active(){
return state.active
},
hasLeftWin(){
return !state.noMatchLeftWindow
},
leftWinActive(){
return state.leftWinActive.split('/')[3]
}
},
mounted() {
isPcObserver = uni.createMediaQueryObserver(this)
isPhoneObserver = uni.createMediaQueryObserver(this)
isPcObserver.observe({
minWidth: 768
}, matched => {
this.isPC = matched
const pageUrl = this.$route.path
if (!pageUrl) return
const pageName = this.$route.path.split('/')[4]
if(pageUrl === '/'){
uni.reLaunch({
url: "/pages/component/public-properties/public-properties"
})
}else{
uni.reLaunch({
url: pageUrl
})
}
})
isPhoneObserver.observe({
maxWidth: 767
}, matched => {
this.isPC = !matched
if (matched) {
const pageUrl = this.$route.path
const tabbarName = this.$route.path.split('/')[2]
const tabbarUrl = tabbarName && (tabbarName === 'component' ? '/' : `/pages/tabBar/${tabbarName}`)
uni.switchTab({
url: tabbarUrl,
success(e) {
uni.navigateTo({
url: pageUrl
})
}
})
}
})
},
unmounted() {
isPcObserver.disconnect()
isPhoneObserver.disconnect()
},
watch: {
isPC: {
immediate: true,
handler(newMatches:boolean) {
setMatchLeftWindow(newMatches)
}
},
$route(newRoute) {
this.handlerRoute(newRoute)
}
},
methods: {
handlerRoute(newRoute) {
if (this.isPC) {
if (newRoute.path === '/') {
uni.redirectTo({
url: '/pages/component/public-properties/public-properties'
})
} else if (!newRoute.matched.length) {
uni.redirectTo({
url: '/pages/error/404'
})
} else {
setLeftWinActive(newRoute.path)
let active = newRoute.path.split('/')[2]
if (this.nav.includes(active)) {
if (active === 'component') {
active = 'componentPage'
}
if (active === 'template') {
active = 'templatePage'
}
setActive(active)
}
}
}
}
}
}
</script>
<style>
.left-window-style {
min-height: calc(100vh - var(--top-window-height));
background-color: #f8f8f8;
}
.second-menu {
width: 350px;
background-color: #F8F8F8;
}
</style>
windows/top-window.uvue 0 → 100644
浏览文件 @ 9ecb851f
<template>
<view class="top-window-header">
<view class="left-header">
<navigator class="left-header" open-type="reLaunch" url="/pages/component/public-properties/public-properties">
<image src="/static/logo.png" class="logo" mode="heightFix"></image>
<text>hello uni-app</text>
</navigator>
</view>
<custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
@onTabItemTap="toSecondMenu" />
</view>
</template>
<script lang="uts">
type IndexPageItem = {
tabBar: string ;
index: string ;
}
export default {
data() {
return {
selected: {
component: 0,
API: 1,
CSS: 2,
template: 3
},
current: 0,
indexPage: [{
tabBar: '/pages/tabBar/component',
index: '/pages/component/public-properties/public-properties'
}, {
tabBar: '/pages/tabBar/API',
index: '/pages/API/get-app/get-app'
}, {
tabBar: '/pages/tabBar/CSS',
index: '/pages/CSS/layout/width'
}, {
tabBar: '/pages/tabBar/template',
index: '/pages/template/long-list/long-list'
}] as IndexPageItem[]
}
},
watch: {
$route: {
immediate: true,
handler(newRoute) {
const width = uni.getSystemInfoSync().screenWidth
if (width >= 768) {
let path = newRoute.path
let comp
if (path === '/') {
comp = 'component'
path = '/pages/component/public-properties/public-properties'
} else {
comp = path.split('/')[2]
}
this.current = this.selected[comp]
for (const item of this.indexPage) {
if (path === item.tabBar) {
uni.redirectTo({
url: item.index
})
}
}
}
}
}
},
methods: {
toSecondMenu(e) {
const activeTabBar = '/' + e.pagePath
for (const item of this.indexPage) {
if (activeTabBar === item.tabBar) {
uni.redirectTo({
url: item.index
})
}
}
}
}
}
</script>
<style>
.top-window-header {
height: 60px;
padding: 0 15px;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #e1e1e1;
background-color: #FFFFFF;
}
.left-header {
flex-direction: row;
align-items: center;
flex: 1;
}
.logo{
height: 30px;
width: 30px;
margin-right: 8px;
}
.tab-bar-flex {
width: 360px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或