boyue2025/dbd-meeting-wx-small
3
0
Fork 0
mirror of https://gitee.com/elegant_wings/dbd-meeting-wx-small.git synced 2025-06-21 07:19:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

描述:底部tabbar

Browse Source
This commit is contained in:
SelfRidicule 2024-02-22 18:57:41 +08:00
parent 05651c67eb
commit cea100c85b
8 changed files with 549 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
miniprogram/app.json
View File

@ -69,10 +69,9 @@
},
{
"pagePath": "pages/parkRepair/parkRepair",
"iconPath": "/images/icon/wodebaoxiu1.png",
"selectedIconPath": "/images/icon/wodebaoxiu.png",
"text": "维修",
"isSpecial" : true
"iconPath": "/images/tabbar/openDoor.png",
"selectedIconPath": "/images/tabbar/openDoor.png",
"text": "开门"
},
{
"pagePath": "pages/my/my",
@ -84,6 +83,7 @@
},
"usingComponents": {},
"sitemapLocation": "sitemap.json",
"permission": {
"scope.userLocation": {

61
miniprogram/pages/index/index.js
View File

@ -2,6 +2,35 @@ const app = getApp()
Page({
onShareAppMessage(res) {},
data: {
// tabBar param
tabBarParam: {
selected: 0,
color: "#515151",
selectedColor: "#217CFF",
backgroundColor: "#ffffff",
},
// tabBar menu
tabBarList: [{
"pagePath": "pages/index/index",
"iconPath": "/images/tabbar/home.png",
"selectedIconPath": "/images/tabbar/home-select.png",
"text": "首页"
},
{
"pagePath": "pages/parkRepair/parkRepair",
"iconPath": "/images/tabbar/openDoor.png",
"selectedIconPath": "/images/tabbar/openDoor.png",
"text": "开门",
"bulge": true,
},
{
"pagePath": "pages/my/my",
"iconPath": "/images/tabbar/my.png",
"selectedIconPath": "/images/tabbar/my-select.png",
"text": "我的"
},
],
IMG_NAME: app.IMG_NAME,
indicatorDots: true,
autoplay: true,
@ -9,9 +38,8 @@ Page({
duration: 1000,
bannerList: [{
bannerImg: ''
}
],
list: [{
}],
menuList: [{
name: "创业活动",
img: "/images/hicon/chuangyehuodong.png",
path: "/pages/community/community"
@ -64,6 +92,11 @@ Page({
path: "/pages/parkRepair/parkRepair"
},
*/
{
name: "会议预约",
img: "/profile/static/index/menu-hyyy.png",
path: ""
},
],
homelist: [],
background: [{
@ -72,21 +105,19 @@ Page({
}, {
bg: '/profile/banner/2.jpg',
url: ''
}, {
bg: '/profile/banner/3.jpg',
url: ''
}, {
bg: '/profile/banner/4.jpg',
url: ''
}, {
bg: '/profile/banner/5.jpg',
url: ''
}, {
bg: '/profile/banner/6.jpg',
url: ''
}]
},
// 切换tabbar
switchTab(e) {
const data = e.currentTarget.dataset
console.log('switchTab', data)
const url = data.path
wx.switchTab({
url: '/' + url
})
},
onShow() {
let that = this
if (wx.getStorageSync('token')) {

17
miniprogram/pages/index/index.wxml
View File

@ -4,8 +4,7 @@
<text style="font-size: 28rpx;">当前园区：{{parkName? parkName:'请先选择园区'}}</text>
<text style="color: #939393;font-size: 36rpx;"> > </text>
</view>
<swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
duration="{{duration}}" circular='true' style='height:{{Height}}' wx:if="{{background.length > 0}}">
<swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='true' style='height:{{Height}}' wx:if="{{background.length > 0}}">
<block wx:for="{{background}}" wx:key="index">
<swiper-item>
<image src="{{IMG_NAME + item.bg}}" mode="widthFix" style="width:100%" bindload='imgHeight'></image>
@ -15,13 +14,21 @@
<view style="font-size: 12pt;background: white;padding: 20rpx 30rpx;">我的应用</view>
<view class="fixed">
<view class="fixedbox" wx:for='{{list}}' wx:key='index' data-path="{{item.path}}" data-name="{{item.name}}"
bindtap="navapply">
<image class="{{item.gray? 'gray':''}}" src="{{item.img}}" style="width:90rpx;height:90rpx;"></image>
<view class="fixedbox" wx:for='{{menuList}}' wx:key='index' data-path="{{item.path}}" data-name="{{item.name}}" bindtap="navapply">
<image class="menuImg" src="{{IMG_NAME + item.img}}"></image>
<view style="font-size:26rpx;margin-top:18rpx;">{{item.name}}</view>
</view>
</view>
</scroll-view>
<!-- tabBar -->
<view class="tab-bar">
<view wx:for="{{tabBarList}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<view wx:if="item.bulge" class="tab-bar-bulge"></view>
<image class="image" src="{{tabBarParam.selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="tab-bar-view" style="color: {{tabBarParam.selected === index ? tabBarParam.selectedColor : tabBarParam.color}}">{{item.text}}</view>
</view>
</view>
</view>

8
miniprogram/pages/index/index.wxss
View File

@ -1,4 +1,5 @@
@import "../../app.wxss";
@import "../../tabBar.wxss";
page {
overflow: hidden;
@ -7,6 +8,7 @@ page {
.topList {
display: none;
width: 100%;
height: 70rpx;
line-height: 70rpx;
@ -123,3 +125,9 @@ page {
.adContainer {
width: 100%;
}
.menuImg{
width: 132rpx;
height: 134rpx;
}

38
miniprogram/pages/my/my.js
View File

@ -5,6 +5,34 @@ Page({
* 页面的初始数据
*/
data: {
// tabBar param
tabBarParam: {
selected: 2,
color: "#515151",
selectedColor: "#217CFF",
backgroundColor: "#ffffff",
},
// tabBar menu
tabBarList: [{
"pagePath": "pages/index/index",
"iconPath": "/images/tabbar/home.png",
"selectedIconPath": "/images/tabbar/home-select.png",
"text": "首页"
},
{
"pagePath": "pages/parkRepair/parkRepair",
"iconPath": "/images/tabbar/openDoor.png",
"selectedIconPath": "/images/tabbar/openDoor.png",
"text": "开门",
"bulge": true,
},
{
"pagePath": "pages/my/my",
"iconPath": "/images/tabbar/my.png",
"selectedIconPath": "/images/tabbar/my-select.png",
"text": "我的"
},
],
DOMAIN_NAME: app.IMG_NAME,
customerPages: [
[{
@ -47,6 +75,16 @@ Page({
memberInfo: {}
},
// 切换tabbar
switchTab(e) {
const data = e.currentTarget.dataset
console.log('switchTab', data)
const url = data.path
wx.switchTab({
url: '/' + url
})
},
/**
* 生命周期函数--监听页面加载
*/

20
miniprogram/pages/my/my.wxml
View File

@ -1,9 +1,7 @@
<view class="page">
<view bindtap="navpersonalData"
style="padding: 24rpx;background:white;display: flex;margin-top:20rpx;border-radius: 20rpx;padding-right: 0;">
<view bindtap="navpersonalData" style="padding: 24rpx;background:white;display: flex;margin-top:20rpx;border-radius: 20rpx;padding-right: 0;">
<view style="width:164rpx;height:164rpx;border-radius:50%;overflow:hidden;">
<image src="{{memberInfo.avatar? memberInfo.avatar:'/images/user-unlogin.jpg'}}" mode="widthFix"
style="width: 100%;"></image>
<image src="{{memberInfo.avatar? memberInfo.avatar:'/images/user-unlogin.jpg'}}" mode="widthFix" style="width: 100%;"></image>
</view>
<view style="font-size:12pt;line-height:164rpx;width: 66%;text-indent: 40rpx;">{{memberInfo.nickname? memberInfo.nickname:'登录'}}</view>
<view class="iconBox">
@ -15,9 +13,7 @@
<view class="my-mainfun-moudel1">
<block wx:for="{{customerPages[0]}}" wx:for-item="list" wx:key="i">
<view class="main-item2" bindtap='navigateTo' data-url="{{list.url}}"
style="{{list.marginbottom?'margin-bottom:25rpx;':''}};{{list.bordernone?'border-bottom:none':''}};border-radius:{{list.borderRadius}}"
hidden='{{list.hide}}'>
<view class="main-item2" bindtap='navigateTo' data-url="{{list.url}}" style="{{list.marginbottom?'margin-bottom:25rpx;':''}};{{list.bordernone?'border-bottom:none':''}};border-radius:{{list.borderRadius}}" hidden='{{list.hide}}'>
<view class="main-item-text1">
<view class="text-titl1">{{list.zh}}</view>
</view>
@ -28,4 +24,14 @@
</block>
</view>
</view>
<!-- tabBar -->
<view class="tab-bar">
<view wx:for="{{tabBarList}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<view wx:if="item.bulge" class="tab-bar-bulge"></view>
<image class="image" src="{{tabBarParam.selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="tab-bar-view" style="color: {{tabBarParam.selected === index ? tabBarParam.selectedColor : tabBarParam.color}}">{{item.text}}</view>
</view>
</view>
</view>

2
miniprogram/pages/my/my.wxss
View File

@ -1,3 +1,5 @@
@import "../../tabBar.wxss";
.page {
overflow: auto;
height: 100%;

58
miniprogram/tabBar.wxss Normal file
View File

@ -0,0 +1,58 @@
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: #FFF;
display: flex;
line-height: 1.2;
padding-bottom: 60rpx;
border-top: 1px solid #e6e6e6;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item .image {
width: 26px;
height: 26px;
}
.bulge {
background-color: #FFF;
}
.bulge .tab-bar-bulge{
position: absolute;
z-index: -1;
width: 64px;
height: 64px;
top: -24px;
border-radius: 50%;
border-top: 1px solid #e6e6e6;
background-color: #FFF;
}
.bulge .image{
position: absolute;
width: 50px;
height: 50px;
top: -16px;
}
.bulge .tab-bar-view{
position: relative;
bottom: -16px;
margin-top: 4px;
}
.tab-bar-item .tab-bar-view {
font-size: 12px;
margin-top: 4px;
}