This commit is contained in:
pengxiaolong
2025-05-13 16:03:28 +08:00
parent c45c7c4de1
commit 37da6765b8
15 changed files with 281 additions and 242 deletions

View File

@@ -1,259 +1,227 @@
<template>
<view class="tab-block">
<ul class="tab-list flex flex-center"
:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'">
<li v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
@click="handlePush(item, index)" :key="index">
<view class="item-img-box">
<image class="item-img" :src="tabIndex == index ? item.selectedIconPath : item.iconPath" />
</view>
<view class="item-text font-20" :style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }">{{
item.text }}</view>
</li>
</ul>
<!-- <view class="tab-bar" v-show="showTabBar === true"></view> -->
<view @touchmove.stop.prevent="disabledScroll">
<!-- <uni-popup ref="addSuccess" type="bottom">
<imgSuccess @closeSuccess="closeSuccess"></imgSuccess>
</uni-popup> -->
</view>
<!-- <moduleSelect ref="createModule"></moduleSelect> -->
</view>
<view class="tab-block">
<ul
class="tab-list flex flex-center"
:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'"
>
<li
v-for="(item, index) in tabList"
:class="'list-item flex flex-column flex-middle ' + item.middleClass"
@click="handlePush(item, index)"
:key="index"
>
<view class="item-img-box">
<image
class="item-img"
:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
/>
</view>
<view
class="item-text font-20"
:style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }"
>{{ item.text }}</view
>
</li>
</ul>
<view @touchmove.stop.prevent="disabledScroll"> </view>
<!-- <moduleSelect ref="createModule"></moduleSelect> -->
</view>
</template>
<script setup>
// import moduleSelect from './moduleSelect.vue'
import {
getCurrentInstance,
defineProps,
onMounted,
reactive,
ref
} from 'vue';
//定义弹窗组件
// const addSuccess = ref(null);
// import moduleSelect from './moduleSelect.vue'
import { getCurrentInstance, defineProps, onMounted, reactive, ref } from "vue";
let showMiddleButton = ref(false);
// let showTabBar = ref(false);
let showMiddleButton = ref(false);
const props = defineProps({
tabIndex: Number,
});
let tabList = reactive([
{
iconPath: "../../static/Pk.png",
selectedIconPath: "../../static/PkClick.png",
text: "PK",
pagePath: "../../pages/Home/Home",
middleClass: "",
},
{
iconPath: "../../static/Forum.png",
selectedIconPath: "../../static/Forumclick.png",
// text: '消息',
text: "论坛",
pagePath: "",
middleClass: "",
},
{
iconPath: "../../static/jiahao.png",
selectedIconPath: "../../static/jiahao.png",
text: "",
pagePath: "/pages/c/c",
middleClass: "",
},
{
iconPath: "../../static/Message.png",
selectedIconPath: "../../static/Messageclick.png",
text: "消息",
// text: '社区',
pagePath: "../../pages/Message/Message",
},
{
iconPath: "../../static/Mine.png",
selectedIconPath: "../../static/Mineclick.png",
text: "我的",
pagePath: "",
middleClass: "",
},
]);
onMounted(() => {
setTabBar();
// getSystemInfo()
});
const props = defineProps({
tabIndex: Number
})
let tabList = reactive([{
iconPath: '../../static/Pk.png',
selectedIconPath: '../../static/PkClick.png',
text: 'PK',
pagePath: '../../pages/Home/Home',
middleClass: ''
},
{
iconPath: '../../static/Forum.png',
selectedIconPath: '../../static/Forumclick.png',
// text: '消息',
text: '论坛',
pagePath: '',
middleClass: ''
},
{
iconPath: '../../static/jiahao.png',
selectedIconPath: '../../static/jiahao.png',
text: '',
pagePath: '/pages/c/c',
middleClass: ''
},
{
iconPath: '../../static/Message.png',
selectedIconPath: '../../static/Messageclick.png',
text: '消息',
// text: '社区',
pagePath: ''
},
{
iconPath: '../../static/Mine.png',
selectedIconPath: '../../static/Mineclick.png',
text: '我的',
pagePath: '',
middleClass: ''
}
]);
onMounted(() => {
setTabBar();
// getSystemInfo()
});
uni.getSystemInfo({
success: function (res) {
// iPhone机型有横杆的导航栏高度大于40
console.log('机型',res.deviceType);
if (res.safeArea.top > 40) {
console.log('苹果的底部栏大小',res.safeArea.top);
}
}
});
uni.getSystemInfo({
success: function (res) {
// iPhone机型有横杆的导航栏高度大于40
console.log("机型", res.deviceType);
if (res.safeArea.top > 40) {
console.log("苹果的底部栏大小", res.safeArea.top);
}
},
});
//判断中间按钮是否突出显示
function setTabBar() {
let tabLength = tabList.length;
if (tabLength % 2) {
showMiddleButton.value = true;
let middleIndex = Math.floor(tabLength / 2);
tabList[middleIndex].middleClass = 'mid-button';
}
}
// //点击按钮
// function handlePush(item, index) {
// if (index === 2) {
// //打开弹窗
// // addSuccess.value.open();
// openPopupQuantity()
// return;
// } else if (index === 1) {
// uni.navigateTo({
// url: "/pages/create/wenshengPicture/wenshengPicture"
// })
// } else if (index === 3) {
// uni.navigateTo({
// url: "/pages/create/backgroundPicture/backgroundPicture"
// })
// } else {
// uni.switchTab({
// url: item.pagePath
// });
// }
//判断中间按钮是否突出显示
function setTabBar() {
let tabLength = tabList.length;
if (tabLength % 2) {
showMiddleButton.value = true;
let middleIndex = Math.floor(tabLength / 2);
tabList[middleIndex].middleClass = "mid-button";
}
}
const createModule = ref();
// }
const createModule = ref()
function openPopupQuantity() {
createModule.value.open()
}
//组件返回关闭指令
function closeSuccess() {
// addSuccess.value.close();
}
//解决弹出层后页面还可以滚动
const disabledScroll = () => {
return false
}
//兼容iPhoneX以上底部黑线条的显示
// function getSystemInfo() {
// uni.getSystemInfo({
// success: res => {
// // X及以上的异形屏top为44非异形屏为20
// if (res.safeArea.top > 20) {
// showTabBar.value = true;
// }
// }
// });
// }
function openPopupQuantity() {
createModule.value.open();
}
//组件返回关闭指令
function closeSuccess() {
// addSuccess.value.close();
}
//解决弹出层后页面还可以滚动
const disabledScroll = () => {
return false;
};
//tab点击事件
function handlePush(item, index) {
if (item.pagePath) {
uni.switchTab({
url: item.pagePath,
});
}
}
</script>
<style lang="scss" scoped>
.flex {
display: flex;
flex-flow: row wrap;
}
.flex {
display: flex;
flex-flow: row wrap;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-center {
align-items: center;
justify-content: center;
}
.flex-column {
flex-direction: column;
align-items: center;
}
.flex-column {
flex-direction: column;
align-items: center;
}
.flex-middle {
align-items: center;
}
.flex-middle {
align-items: center;
}
.font-20 {
font-size: 20rpx;
}
.font-20 {
font-size: 20rpx;
}
.tab-block {
position: relative;
position: fixed;
bottom: 0;
// left: 0;
z-index: 999;
background-size: contain;
width: 100vw;
background-color: #ffffff;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.tab-list {
height: 100rpx;
padding: 0; //解决偏移
z-index: 0;
}
.tab-block {
position: relative;
position: fixed;
bottom: 0;
// left: 0;
z-index: 999;
background-size: contain;
width: 100vw;
background-color: #ffffff;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.tab-list {
height: 100rpx;
padding: 0; //解决偏移
z-index: 0;
}
.tab-list-default {
background-color: #ffffff;
border-top: 1px #dddddd solid;
}
.tab-list-default {
background-color: #ffffff;
border-top: 1px #dddddd solid;
}
.tab-list-middle {
position: relative;
.tab-list-middle {
position: relative;
// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
background-size: cover;
}
// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
background-size: cover;
}
.list-item {
flex: 1;
.list-item {
flex: 1;
.item-img-box {
width: 38rpx;
height: 38rpx;
margin-bottom: 9rpx;
position: relative;
}
.item-img-box {
width: 38rpx;
height: 38rpx;
margin-bottom: 9rpx;
position: relative;
}
.item-img {
// width: 44rpx;
// height: 42rpx;
width: 38rpx;
height: 38rpx;
color: red;
}
}
.item-img {
// width: 44rpx;
// height: 42rpx;
width: 38rpx;
height: 38rpx;
color: red;
}
}
.mid-button {
position: relative;
.mid-button {
position: relative;
.item-img-box {
width: 150rpx;
height: 150rpx;
margin-bottom: 9rpx;
position: absolute;
z-index: 10;
top: -104rpx;
}
.item-img-box {
width: 150rpx;
height: 150rpx;
margin-bottom: 9rpx;
position: absolute;
z-index: 10;
top: -104rpx;
}
.item-img {
width: 150rpx;
height: 150rpx;
}
.item-img {
width: 150rpx;
height: 150rpx;
}
.item-text {
font-size: 20rpx;
position: absolute;
z-index: 1002;
bottom: -40rpx;
color: #393a41;
}
}
.item-text {
font-size: 20rpx;
position: absolute;
z-index: 1002;
bottom: -40rpx;
color: #393a41;
}
}
.tab-bar {
height: 30rpx;
background-color: #ffffff;
}
}
</style>
.tab-bar {
height: 30rpx;
background-color: #ffffff;
}
}
</style>

View File

@@ -11,6 +11,11 @@
"style": {
"navigationBarTitleText": "uni-app"
}
},{
"path": "pages/Message/Message",
"style": {
"navigationBarTitleText": "消息"
}
}
],
"globalStyle": {
@@ -28,6 +33,10 @@
{
"pagePath": "pages/index/index",
"text": "API"
},
{
"pagePath": "pages/Message/Message",
"text": "消息"
}
]
}

22
pages/Message/Message.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// 页面加载时执行
},
methods: {
// 方法定义
}
}
</script>
<style scoped>
/* 样式定义 */
</style>

View File

@@ -1 +1 @@
{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\n","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n const app = createSSRApp(App)\n return {\n app\n }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;;;"}
{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t/*每个页面公共css */\r\n</style>\r\n","import App from './App'\r\n\r\n// #ifndef VUE3\r\nimport Vue from 'vue'\r\nimport './uni.promisify.adaptor'\r\nVue.config.productionTip = false\r\nApp.mpType = 'app'\r\nconst app = new Vue({\r\n ...App\r\n})\r\napp.$mount()\r\n// #endif\r\n\r\n// #ifdef VUE3\r\nimport { createSSRApp } from 'vue'\r\nexport function createApp() {\r\n const app = createSSRApp(App)\r\n return {\r\n app\r\n }\r\n}\r\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;;;"}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
{"version":3,"file":"Message.js","sources":["pages/Message/Message.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvTWVzc2FnZS9NZXNzYWdlLnZ1ZQ"],"sourcesContent":["<template>\r\n</template>\r\n\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n title: 'Hello'\r\n }\r\n },\r\n onLoad() {\r\n // 页面加载时执行\r\n },\r\n methods: {\r\n // 方法定义\r\n }\r\n }\r\n</script>\r\n\r\n<style scoped>\r\n /* 样式定义 */\r\n</style>","import MiniProgramPage from 'D:/项目/tk-mini-program/pages/Message/Message.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;AAII,MAAK,YAAU;AAAA,EACX,OAAO;AACH,WAAO;AAAA,MACH,OAAO;AAAA,IACX;AAAA,EACH;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS;AAAA;AAAA,EAET;AACJ;;;;;ACfJ,GAAG,WAAW,eAAe;"}

View File

@@ -1 +1 @@
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view class=\"content\">\r\n\t\t<image class=\"logo\" src=\"/static/logo.png\"></image>\r\n\t\t<view class=\"text-area\">\r\n\t\t\t<text class=\"title\">{{title}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\ttitle: 'Hello'\r\n\t\t\t}\r\n\t\t},\r\n\t\tonLoad() {\r\n\r\n\t\t},\r\n\t\tmethods: {\r\n\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.content {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.logo {\r\n\t\theight: 200rpx;\r\n\t\twidth: 200rpx;\r\n\t\tmargin-top: 200rpx;\r\n\t\tmargin-left: auto;\r\n\t\tmargin-right: auto;\r\n\t\tmargin-bottom: 50rpx;\r\n\t}\r\n\r\n\t.text-area {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.title {\r\n\t\tfont-size: 36rpx;\r\n\t\tcolor: #8f8f94;\r\n\t}\r\n</style>\n","import MiniProgramPage from 'D:/项目/tk-mini-program/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;AAUC,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACA;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS,CAET;AACD;;;;;;;;ACrBD,GAAG,WAAW,eAAe;"}
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view class=\"content\">\r\n\t\t<image class=\"logo\" src=\"/static/logo.png\"></image>\r\n\t\t<view class=\"text-area\">\r\n\t\t\t<text class=\"title\">{{title}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\ttitle: 'Hello'\r\n\t\t\t}\r\n\t\t},\r\n\t\tonLoad() {\r\n\r\n\t\t},\r\n\t\tmethods: {\r\n\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.content {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.logo {\r\n\t\theight: 200rpx;\r\n\t\twidth: 200rpx;\r\n\t\tmargin-top: 200rpx;\r\n\t\tmargin-left: auto;\r\n\t\tmargin-right: auto;\r\n\t\tmargin-bottom: 50rpx;\r\n\t}\r\n\r\n\t.text-area {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.title {\r\n\t\tfont-size: 36rpx;\r\n\t\tcolor: #8f8f94;\r\n\t}\r\n</style>\r\n","import MiniProgramPage from 'D:/项目/tk-mini-program/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;AAUC,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACA;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS,CAET;AACD;;;;;;;;ACrBD,GAAG,WAAW,eAAe;"}

View File

@@ -4,6 +4,7 @@ const common_vendor = require("./common/vendor.js");
if (!Math) {
"./pages/Home/Home.js";
"./pages/index/index.js";
"./pages/Message/Message.js";
}
const _sfc_main = {
onLaunch: function() {

View File

@@ -1,7 +1,8 @@
{
"pages": [
"pages/Home/Home",
"pages/index/index"
"pages/index/index",
"pages/Message/Message"
],
"window": {
"navigationStyle": "custom",
@@ -17,6 +18,10 @@
{
"pagePath": "pages/index/index",
"text": "API"
},
{
"pagePath": "pages/Message/Message",
"text": "消息"
}
]
},

View File

@@ -6973,9 +6973,9 @@ function isConsoleWritable() {
return isWritable;
}
function initRuntimeSocketService() {
const hosts = "192.168.0.105,127.0.0.1";
const hosts = "192.168.0.107,127.0.0.1";
const port = "8090";
const id = "mp-weixin_xtn-7C";
const id = "mp-weixin_4sXeA4";
const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => {
} : initOnError();

View File

@@ -35,7 +35,7 @@ const _sfc_main = {
selectedIconPath: "../../static/Messageclick.png",
text: "消息",
// text: '社区',
pagePath: ""
pagePath: "../../pages/Message/Message"
},
{
iconPath: "../../static/Mine.png",
@@ -50,9 +50,9 @@ const _sfc_main = {
});
common_vendor.index.getSystemInfo({
success: function(res) {
common_vendor.index.__f__("log", "at components/tabBar/tabBar.vue:89", "机型", res.deviceType);
common_vendor.index.__f__("log", "at components/tabBar/tabBar.vue:85", "机型", res.deviceType);
if (res.safeArea.top > 40) {
common_vendor.index.__f__("log", "at components/tabBar/tabBar.vue:91", "苹果的底部栏大小", res.safeArea.top);
common_vendor.index.__f__("log", "at components/tabBar/tabBar.vue:87", "苹果的底部栏大小", res.safeArea.top);
}
}
});
@@ -68,6 +68,13 @@ const _sfc_main = {
const disabledScroll = () => {
return false;
};
function handlePush(item, index) {
if (item.pagePath) {
common_vendor.index.switchTab({
url: item.pagePath
});
}
}
return (_ctx, _cache) => {
return {
a: common_vendor.f(common_vendor.unref(tabList), (item, index, i0) => {
@@ -76,7 +83,7 @@ const _sfc_main = {
b: common_vendor.t(item.text),
c: __props.tabIndex == index ? "#1DD2F9" : "#A7A3A3",
d: common_vendor.n("list-item flex flex-column flex-middle " + item.middleClass),
e: common_vendor.o(($event) => _ctx.handlePush(item, index), index),
e: common_vendor.o(($event) => handlePush(item), index),
f: index
};
}),

View File

@@ -0,0 +1,20 @@
"use strict";
const common_vendor = require("../../common/vendor.js");
const _sfc_main = {
data() {
return {
title: "Hello"
};
},
onLoad() {
},
methods: {
// 方法定义
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return {};
}
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d4fc3199"]]);
wx.createPage(MiniProgramPage);
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/Message/Message.js.map

View File

@@ -0,0 +1,4 @@
{
"navigationBarTitleText": "消息",
"usingComponents": {}
}

View File

@@ -0,0 +1,2 @@
/* 样式定义 */