描述:底部tabbar

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

View File

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

View File

@ -1,195 +1,226 @@
const app = getApp() const app = getApp()
Page({ Page({
onShareAppMessage(res) {}, onShareAppMessage(res) {},
data: { data: {
IMG_NAME: app.IMG_NAME, // tabBar param
indicatorDots: true, tabBarParam: {
autoplay: true, selected: 0,
interval: 3000, color: "#515151",
duration: 1000, selectedColor: "#217CFF",
bannerList: [{ backgroundColor: "#ffffff",
bannerImg: '' },
} // tabBar menu
], tabBarList: [{
list: [{ "pagePath": "pages/index/index",
name: "创业活动", "iconPath": "/images/tabbar/home.png",
img: "/images/hicon/chuangyehuodong.png", "selectedIconPath": "/images/tabbar/home-select.png",
path: "/pages/community/community" "text": "首页"
}, },
{ {
name: "政策信息", "pagePath": "pages/parkRepair/parkRepair",
img: "/images/hicon/zhengcexinxi.png", "iconPath": "/images/tabbar/openDoor.png",
path: "/pages/notice/notice" "selectedIconPath": "/images/tabbar/openDoor.png",
}, "text": "开门",
{ "bulge": true,
name: "党建园地", },
img: "/images/hicon/zhaozhengce.png", {
//img: "/images/hicon/yuanqugonggao.png", "pagePath": "pages/my/my",
path: "/pages/party/party" "iconPath": "/images/tabbar/my.png",
}, "selectedIconPath": "/images/tabbar/my-select.png",
{ "text": "我的"
name: "租办公室", },
img: "/images/hicon/zubangongshi.png", ],
path: "/pages/office/office"
},
{
name: "项目入孵",
img: "/images/hicon/xiangmurufu.png",
path: "/pages/applyType/applyType"
},
{
name: "企业入驻",
img: "/images/hicon/qiyeruzhu.png",
path: "/pages/applyType/applyType"
},
{
name: "厂房申请",
img: "/images/hicon/qianrushenqing.png",
path: "/pages/applyType/applyType"
},
{
name: "园区建议",
img: "/images/hicon/yuanqujianyi.png",
path: "/pages/complaint/complaint"
},
{
name: "商业计划书",
img: "/images/hicon/wenjuandiaocha.png",
path: "/pages/outer/outer"
},
/*
{
name: "园区报修",
img: "/images/hicon/zhaozhuanli.png",
path: "/pages/parkRepair/parkRepair"
},
*/
],
homelist: [],
background: [{
bg: '/profile/banner/1.jpg',
url: ''
}, {
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: ''
}]
},
onShow() { IMG_NAME: app.IMG_NAME,
let that = this indicatorDots: true,
if (wx.getStorageSync('token')) { autoplay: true,
app.AjaxRequest('get', { interval: 3000,
'content-type': 'application/json', duration: 1000,
'Authorization': 'Bearer ' + app.Getopenid() bannerList: [{
}, '/user/profile', {}, function (res) { bannerImg: ''
if (res.code == 0) { }],
that.setData({ menuList: [{
parkName: wx.getStorageSync('parkName') name: "创业活动",
}) img: "/images/hicon/chuangyehuodong.png",
wx.setStorageSync('MemberInfo', res.data) path: "/pages/community/community"
that.getHotList() },
} {
}) name: "政策信息",
} else { img: "/images/hicon/zhengcexinxi.png",
wx.reLaunch({ path: "/pages/notice/notice"
url: '/pages/login/login', },
}) {
} name: "党建园地",
}, img: "/images/hicon/zhaozhengce.png",
//img: "/images/hicon/yuanqugonggao.png",
path: "/pages/party/party"
},
{
name: "租办公室",
img: "/images/hicon/zubangongshi.png",
path: "/pages/office/office"
},
{
name: "项目入孵",
img: "/images/hicon/xiangmurufu.png",
path: "/pages/applyType/applyType"
},
{
name: "企业入驻",
img: "/images/hicon/qiyeruzhu.png",
path: "/pages/applyType/applyType"
},
{
name: "厂房申请",
img: "/images/hicon/qianrushenqing.png",
path: "/pages/applyType/applyType"
},
{
name: "园区建议",
img: "/images/hicon/yuanqujianyi.png",
path: "/pages/complaint/complaint"
},
{
name: "商业计划书",
img: "/images/hicon/wenjuandiaocha.png",
path: "/pages/outer/outer"
},
/*
{
name: "园区报修",
img: "/images/hicon/zhaozhuanli.png",
path: "/pages/parkRepair/parkRepair"
},
*/
{
name: "会议预约",
img: "/profile/static/index/menu-hyyy.png",
path: ""
},
],
homelist: [],
background: [{
bg: '/profile/banner/1.jpg',
url: ''
}, {
bg: '/profile/banner/2.jpg',
url: ''
}]
},
//轮播高度自适应——获取图片高度 // 切换tabbar
imgHeight: function (e) { switchTab(e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 const data = e.currentTarget.dataset
var imgh = e.detail.height; //图片高度 console.log('switchTab', data)
var imgw = e.detail.width; //图片宽度 const url = data.path
var swiperH = winWid * imgh / imgw + "px" wx.switchTab({
this.setData({ url: '/' + url
Height: swiperH //设置高度
})
// this.setData({
// Height: '300rpx' //设置高度
// })
},
getHotList() {
let that = this
app.AjaxRequest('get', {
'content-type': 'application/json',
'Authorization': 'Bearer ' + app.Getopenid()
}, '/menu/bannerList', {
isTop: true
}, function (res) {
that.setData({
homelist: res.data
})
})
},
navdateil(e) {
var index = e.currentTarget.dataset.index
wx.navigateTo({
url: '/pages/detail/detail?list=' + index
})
},
navapply(e) {
if (wx.getStorageSync('token')) {
if (e.currentTarget.dataset.path) {
if (e.currentTarget.dataset.path == '/pages/parkRepair/parkRepair') {
wx.switchTab({
url: e.currentTarget.dataset.path,
})
} else {
wx.navigateTo({
url: e.currentTarget.dataset.path + '?name=' + e.currentTarget.dataset.name,
})
}
} else {
wx.showModal({
content: '模块暂未开放,敬请期待',
showCancel: false,
}) })
} },
} else {
app.getlogin() onShow() {
let that = this
if (wx.getStorageSync('token')) {
app.AjaxRequest('get', {
'content-type': 'application/json',
'Authorization': 'Bearer ' + app.Getopenid()
}, '/user/profile', {}, function (res) {
if (res.code == 0) {
that.setData({
parkName: wx.getStorageSync('parkName')
})
wx.setStorageSync('MemberInfo', res.data)
that.getHotList()
}
})
} else {
wx.reLaunch({
url: '/pages/login/login',
})
}
},
//轮播高度自适应——获取图片高度
imgHeight: function (e) {
var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
var imgh = e.detail.height; //图片高度
var imgw = e.detail.width; //图片宽度
var swiperH = winWid * imgh / imgw + "px"
this.setData({
Height: swiperH //设置高度
})
// this.setData({
// Height: '300rpx' //设置高度
// })
},
getHotList() {
let that = this
app.AjaxRequest('get', {
'content-type': 'application/json',
'Authorization': 'Bearer ' + app.Getopenid()
}, '/menu/bannerList', {
isTop: true
}, function (res) {
that.setData({
homelist: res.data
})
})
},
navdateil(e) {
var index = e.currentTarget.dataset.index
wx.navigateTo({
url: '/pages/detail/detail?list=' + index
})
},
navapply(e) {
if (wx.getStorageSync('token')) {
if (e.currentTarget.dataset.path) {
if (e.currentTarget.dataset.path == '/pages/parkRepair/parkRepair') {
wx.switchTab({
url: e.currentTarget.dataset.path,
})
} else {
wx.navigateTo({
url: e.currentTarget.dataset.path + '?name=' + e.currentTarget.dataset.name,
})
}
} else {
wx.showModal({
content: '模块暂未开放,敬请期待',
showCancel: false,
})
}
} else {
app.getlogin()
}
},
navDetail(e) {
if (wx.getStorageSync('token')) {
wx.navigateTo({
url: e.currentTarget.dataset.uri,
})
} else {
app.getlogin()
}
},
navparkList() {
wx.navigateTo({
url: '/pages/index/parkList/parkList'
})
},
adLoad() {
console.log('Banner 广告加载成功')
},
adError(err) {
console.log('Banner 广告加载失败', err)
},
adClose() {
console.log('Banner 广告关闭')
} }
},
navDetail(e) {
if (wx.getStorageSync('token')) {
wx.navigateTo({
url: e.currentTarget.dataset.uri,
})
} else {
app.getlogin()
}
},
navparkList() {
wx.navigateTo({
url: '/pages/index/parkList/parkList'
})
},
adLoad() {
console.log('Banner 广告加载成功')
},
adError(err) {
console.log('Banner 广告加载失败', err)
},
adClose() {
console.log('Banner 广告关闭')
}
}) })

View File

@ -1,27 +1,34 @@
<view class="page"> <view class="page">
<scroll-view style="height:100%;" scroll-y="true"> <scroll-view style="height:100%;" scroll-y="true">
<view bindtap="navparkList" class="topList"> <view bindtap="navparkList" class="topList">
<text style="font-size: 28rpx;">当前园区:{{parkName? parkName:'请先选择园区'}}</text> <text style="font-size: 28rpx;">当前园区:{{parkName? parkName:'请先选择园区'}}</text>
<text style="color: #939393;font-size: 36rpx;"> > </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}}">
<block wx:for="{{background}}" wx:key="index">
<swiper-item>
<image src="{{IMG_NAME + item.bg}}" mode="widthFix" style="width:100%" bindload='imgHeight'></image>
</swiper-item>
</block>
</swiper>
<view style="font-size: 12pt;background: white;padding: 20rpx 30rpx;">我的应用</view>
<view class="fixed">
<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>
<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>
</swiper-item>
</block>
</swiper>
<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 style="font-size:26rpx;margin-top:18rpx;">{{item.name}}</view>
</view>
</view>
</scroll-view>
</view> </view>

View File

@ -1,125 +1,133 @@
@import "../../app.wxss"; @import "../../app.wxss";
@import "../../tabBar.wxss";
page { page {
overflow: hidden; overflow: hidden;
} }
.topList { .topList {
width: 100%; display: none;
height: 70rpx; width: 100%;
line-height: 70rpx; height: 70rpx;
background: white; line-height: 70rpx;
padding: 0 20rpx; background: white;
position: fixed; padding: 0 20rpx;
top: 0; position: fixed;
left: 0; top: 0;
z-index: 9999999; left: 0;
z-index: 9999999;
} }
.swiper-box{ .swiper-box {
margin-top: 70rpx; margin-top: 70rpx;
} }
.page { .page {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
color: black; color: black;
overflow: auto; overflow: auto;
border-top: 1rpx solid #f4f4f4; border-top: 1rpx solid #f4f4f4;
background-color: #F5F5F5; background-color: #F5F5F5;
/* padding: 0 26rpx; */ /* padding: 0 26rpx; */
} }
.activityList { .activityList {
background: white; background: white;
margin-bottom: 20rpx; margin-bottom: 20rpx;
/* border-radius: 24rpx; */ /* border-radius: 24rpx; */
overflow: hidden; overflow: hidden;
border-bottom: 1rpx solid #EEEEEE; border-bottom: 1rpx solid #EEEEEE;
} }
.detailbox { .detailbox {
padding: 16rpx 26rpx; padding: 16rpx 26rpx;
line-height: 40rpx; line-height: 40rpx;
position: relative; position: relative;
} }
.fixed { .fixed {
background: white; background: white;
padding: 0 30rpx 40rpx 30rpx; padding: 0 30rpx 40rpx 30rpx;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
/* border-radius: 20rpx; */ /* border-radius: 20rpx; */
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.fixedbox { .fixedbox {
width: 25%; width: 25%;
text-align: center; text-align: center;
margin-top: 40rpx; margin-top: 40rpx;
} }
.bot { .bot {
border-bottom: 3rpx solid #f4f4f4; border-bottom: 3rpx solid #f4f4f4;
margin-bottom: 40rpx; margin-bottom: 40rpx;
} }
.newbox { .newbox {
background: white; background: white;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
margin-top: 20rpx; margin-top: 20rpx;
} }
.btn { .btn {
position: absolute; position: absolute;
top: 10%; top: 10%;
right: 30rpx; right: 30rpx;
color: white; color: white;
background: #ffa200; background: #ffa200;
padding: 0 40rpx; padding: 0 40rpx;
height: 62rpx; height: 62rpx;
border-radius: 31rpx; border-radius: 31rpx;
text-align: center; text-align: center;
line-height: 62rpx; line-height: 62rpx;
} }
.gray { .gray {
filter: grayscale(98%); filter: grayscale(98%);
filter: gray; filter: gray;
} }
/* 轮播小点点 */ /* 轮播小点点 */
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal { .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
margin-left: 36%; margin-left: 36%;
} }
.swiper-box .wx-swiper-dot { .swiper-box .wx-swiper-dot {
width: 20rpx; width: 20rpx;
display: inline-flex; display: inline-flex;
height: 5rpx; height: 5rpx;
margin-left: 10rpx; margin-left: 10rpx;
justify-content: space-between; justify-content: space-between;
} }
.swiper-box .wx-swiper-dot::before { .swiper-box .wx-swiper-dot::before {
content: ''; content: '';
flex-grow: 1; flex-grow: 1;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
border-radius: 0rpx border-radius: 0rpx
} }
.swiper-box .wx-swiper-dot-active::before { .swiper-box .wx-swiper-dot-active::before {
background: #ff3333; background: #ff3333;
} }
.swiper-box .wx-swiper-dot-active { .swiper-box .wx-swiper-dot-active {
width: 40rpx; width: 40rpx;
} }
/* 外层组件的宽度可设置成100%或具体数值 */ /* 外层组件的宽度可设置成100%或具体数值 */
.adContainer { .adContainer {
width: 100%; width: 100%;
}
.menuImg{
width: 132rpx;
height: 134rpx;
} }

View File

@ -1,100 +1,138 @@
let app = getApp() let app = getApp()
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
DOMAIN_NAME: app.IMG_NAME, // tabBar param
customerPages: [ tabBarParam: {
[{ selected: 2,
listIcon: "icontubiao-1", color: "#515151",
zh: "我的活动", selectedColor: "#217CFF",
url: "/pages/myActivities/myActivities", backgroundColor: "#ffffff",
borderRadius: '20rpx 20rpx 0 0'
}, },
{ // tabBar menu
listIcon: "iconqiyexinxi", tabBarList: [{
zh: "业务申请", "pagePath": "pages/index/index",
url: "../my/serviceApply/serviceApply" "iconPath": "/images/tabbar/home.png",
}, "selectedIconPath": "/images/tabbar/home-select.png",
{ "text": "首页"
listIcon: "iconqiyexinxi", },
zh: "园区建议", {
url: "/pages/complaint/complaint", "pagePath": "pages/parkRepair/parkRepair",
borderRadius: '0 0 20rpx 20rpx', "iconPath": "/images/tabbar/openDoor.png",
marginbottom: true "selectedIconPath": "/images/tabbar/openDoor.png",
}, "text": "开门",
{ "bulge": true,
listIcon: "iconzhanghaoshezhi", },
zh: "账号设置", {
url: "/pages/my/accountSetting/accountSetting", "pagePath": "pages/my/my",
borderRadius: '20rpx 20rpx 0 0' "iconPath": "/images/tabbar/my.png",
}, "selectedIconPath": "/images/tabbar/my-select.png",
{ "text": "我的"
listIcon: "iconfuwu", },
zh: "我的服务", ],
url: "/pages/enterpriseServices/myServiceList/myServiceList" DOMAIN_NAME: app.IMG_NAME,
}, customerPages: [
{ [{
listIcon: "iconguzhangbaoxiu", listIcon: "icontubiao-1",
zh: "我的报修", zh: "我的活动",
url: "/pages/parkRepair/parkRepair", url: "/pages/myActivities/myActivities",
borderRadius: '0 0 20rpx 20rpx' borderRadius: '20rpx 20rpx 0 0'
} },
] {
], listIcon: "iconqiyexinxi",
memberInfo: {} zh: "业务申请",
}, url: "../my/serviceApply/serviceApply"
},
{
listIcon: "iconqiyexinxi",
zh: "园区建议",
url: "/pages/complaint/complaint",
borderRadius: '0 0 20rpx 20rpx',
marginbottom: true
},
{
listIcon: "iconzhanghaoshezhi",
zh: "账号设置",
url: "/pages/my/accountSetting/accountSetting",
borderRadius: '20rpx 20rpx 0 0'
},
{
listIcon: "iconfuwu",
zh: "我的服务",
url: "/pages/enterpriseServices/myServiceList/myServiceList"
},
{
listIcon: "iconguzhangbaoxiu",
zh: "我的报修",
url: "/pages/parkRepair/parkRepair",
borderRadius: '0 0 20rpx 20rpx'
}
]
],
memberInfo: {}
},
/** // 切换tabbar
* 生命周期函数--监听页面加载 switchTab(e) {
*/ const data = e.currentTarget.dataset
onLoad(options) {}, console.log('switchTab', data)
onShow() { const url = data.path
let that = this
if (wx.getStorageSync('token')) {
app.AjaxRequest('get', {
'content-type': 'application/json',
'Authorization': 'Bearer ' + app.Getopenid()
}, '/user/profile', {}, function (res) {
that.setData({
memberInfo: res.data
})
})
} else {
app.getlogin()
}
},
navDetail(e) {
wx.navigateTo({
url: e.currentTarget.dataset.url,
})
},
navigateTo(e) {
if (wx.getStorageSync('token')) {
if (e.currentTarget.dataset.url == '/pages/parkRepair/parkRepair') {
wx.switchTab({ wx.switchTab({
url: e.currentTarget.dataset.url, url: '/' + url
}) })
} else { },
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
onShow() {
let that = this
if (wx.getStorageSync('token')) {
app.AjaxRequest('get', {
'content-type': 'application/json',
'Authorization': 'Bearer ' + app.Getopenid()
}, '/user/profile', {}, function (res) {
that.setData({
memberInfo: res.data
})
})
} else {
app.getlogin()
}
},
navDetail(e) {
wx.navigateTo({ wx.navigateTo({
url: e.currentTarget.dataset.url, url: e.currentTarget.dataset.url,
}) })
} },
} else { navigateTo(e) {
app.getlogin() if (wx.getStorageSync('token')) {
if (e.currentTarget.dataset.url == '/pages/parkRepair/parkRepair') {
wx.switchTab({
url: e.currentTarget.dataset.url,
})
} else {
wx.navigateTo({
url: e.currentTarget.dataset.url,
})
}
} else {
app.getlogin()
}
},
navpersonalData() {
if (wx.getStorageSync('token')) {
wx.navigateTo({
url: '../my/personalData/personalData',
})
} else {
wx.navigateTo({
url: '/pages/login/login',
})
}
} }
},
navpersonalData() {
if (wx.getStorageSync('token')) {
wx.navigateTo({
url: '../my/personalData/personalData',
})
} else {
wx.navigateTo({
url: '/pages/login/login',
})
}
}
}) })

View File

@ -1,31 +1,37 @@
<view class="page"> <view class="page">
<view bindtap="navpersonalData" <view bindtap="navpersonalData" style="padding: 24rpx;background:white;display: flex;margin-top:20rpx;border-radius: 20rpx;padding-right: 0;">
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;">
<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" </view>
style="width: 100%;"></image> <view style="font-size:12pt;line-height:164rpx;width: 66%;text-indent: 40rpx;">{{memberInfo.nickname? memberInfo.nickname:'登录'}}</view>
</view> <view class="iconBox">
<view style="font-size:12pt;line-height:164rpx;width: 66%;text-indent: 40rpx;">{{memberInfo.nickname? memberInfo.nickname:'登录'}}</view> <text class="iconfont iconyou" style="color:#939393;line-height:164rpx;"></text>
<view class="iconBox"> </view>
<text class="iconfont iconyou" style="color:#939393;line-height:164rpx;"></text> </view>
</view>
</view> <view class="my-page">
<view class="my-page"> <view class="my-mainfun-moudel1">
<block wx:for="{{customerPages[0]}}" wx:for-item="list" wx:key="i">
<view class="my-mainfun-moudel1"> <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}}'>
<block wx:for="{{customerPages[0]}}" wx:for-item="list" wx:key="i"> <view class="main-item-text1">
<view class="main-item2" bindtap='navigateTo' data-url="{{list.url}}" <view class="text-titl1">{{list.zh}}</view>
style="{{list.marginbottom?'margin-bottom:25rpx;':''}};{{list.bordernone?'border-bottom:none':''}};border-radius:{{list.borderRadius}}" </view>
hidden='{{list.hide}}'> <view class="iconBox">
<view class="main-item-text1"> <text class="iconfont iconyou" style="color:#939393"></text>
<view class="text-titl1">{{list.zh}}</view> </view>
</view> </view>
<view class="iconBox"> </block>
<text class="iconfont iconyou" style="color:#939393"></text> </view>
</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>
</block>
</view> </view>
</view>
</view> </view>

View File

@ -1,3 +1,5 @@
@import "../../tabBar.wxss";
.page { .page {
overflow: auto; overflow: auto;
height: 100%; 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;
}