Skip to content

M
mayi-mp-shop
Commit 99109679 by 程智春
Options

底部栏

parent 9e5a107f
Showing with 109 additions and 38 deletions
custom-tab-bar/index.js
const app = getApp();
console.log(app, "apppppppppp");
......@@ -63,23 +64,62 @@ Component({
visible: 1
}
],
mm:false,
componentData: {},
show: true,
showFlag:"up",
mmm : false,
mainColor : ''
},
ready(){
if (app.themeColor['--main-color'] != '#ffffff') {
this.setData({
mainColor: app.themeColor['--main-color']
})
} else {
app.themeColorCallBack = (res) => {
this.setData({
mainColor: res['--main-color']
})
}
}
console.log(this.data.themeColor,'themeColor')
if (typeof this.getTabBar === "function" && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
});
}
this.setData({
mmm: Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1)
})
console.log(Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1), this.data.selected)
console.log(this.data.mmm,'ready')
},
attached() {
let that = this;
if (app.globalData.footerVal) {
let mm=(Math.ceil(app.globalData.footerVal.componentData.list.length/2-1)==that.data.selected&&app.globalData.footerVal.componentData['styleSelectionNum']==1)
console.log(733333,mm)
that.setData({
componentData: app.globalData.footerVal.componentData,
list: app.globalData.footerVal.componentData.list
list: app.globalData.footerVal.componentData.list,
mm:mm
});
console.log('777777',Math.ceil(this.data.list.length/2-1),this.data.selected,this.data.componentData['styleSelectionNum'])
} else {
console.log(73333381)
app.footerCallBack = function(params) {
console.log('back')
that.setData({
componentData: params.componentData,
list: params.componentData.list
list: params.componentData.list,
// mm:(Math.ceil(params.componentData.list.length/2-1)==that.data.selected&&params.componentData['styleSelectionNum']==1)
});
let mm=(Math.ceil(params.componentData.list.length/2-1)==that.data.selected&&params.componentData['styleSelectionNum']==1)
console.log('87777777',mm)
};
}
......@@ -89,6 +129,12 @@ Component({
app.webviewCallBack = function(state, params) {
console.log("webview变化", state, params);
};
//
this.setData({
mm:(Math.ceil(this.data.list.length/2-1)==this.data.selected&&this.data.componentData['styleSelectionNum']==1)
})
},
methods: {
init() {},
......
custom-tab-bar/index.wxml
<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar {{show?'':'hide'}} {{(componentData.scrollHide) && showFlag=='down'?'down':'up'}}" style="--main-color : {{mainColor}}">
<view class="tab-bar {{show?'':'hide'}}" style="--main-color : {{mainColor}}">
<!-- <view class="antt ant-daipinglun"></view> -->
<!-- <view class="iconfont icon-fenzhi">3</view> -->
<!-- <view class="tab-bar-border"></view> -->
<view class="tab-bar-border"></view>
<view
wx:for="{{list}}"
wx:key="index"
......@@ -15,9 +15,10 @@
<!-- {{index}}{{selected}}--{{Math.ceil(5/2-1)}}--{{mm}} -->
<!-- &&componentData['styleSelectionNum']==1 -->
<!-- 图标 -->
<view>
<view wx:if="{{item.iconType==0||!item.iconType}}">
<view class="antt {{item.icon}}" style="font-size:{{(index==selected?componentData.selectionIconSize*2:componentData.defaultIconSize*2)+'rpx'}};color:{{index==selected?componentData.selectIconColor:componentData.defaultIconColor}}"></view>
<view class="item">
<view >
<view wx:if="{{item.iconType==0||!item.iconType}}">
<view class="antt {{item.icon}}" style="font-size:{{componentData.defaultIcon==1 ? '36rpx' : (componentData.defaultIconSize*2 + 'rpx')}};color:{{index==selected?componentData.selectIconColor:componentData.defaultIconColor}}"></view>
</view>
<view
wx:elif="{{item.iconType==1}}"
......@@ -28,8 +29,9 @@
</view>
</view>
<!-- 名称 -->
<view wx:if="{{componentData['contentFormNum']!=3}}" class="text" style="color: {{selected === index ? componentData.selectTextColor : componentData.defaultTextColor}};font-size:{{selected === index ? componentData.selectionTextNum*2 : componentData.defaultTextNum*2}}rpx">
<view class="text" style="color: {{selected === index ? componentData.selectTextColor : componentData.defaultTextColor}};font-size:{{selected === index ? componentData.selectionTextNum*2 : componentData.defaultTextNum*2}}rpx">
{{item.title}}</view>
</view>
</view>
</view>
custom-tab-bar/index.wxss
......@@ -1378,10 +1378,15 @@
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
height: 102rpx;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
font-size: 20rpx;
width: 100%;
bottom: 0;
left: 0;
background: #f5f5f4;
/* border-top: 1px solid #e2e2e2; */
}
.tab-bar-border {
......@@ -1398,11 +1403,46 @@
flex: 1;
text-align: center;
display: flex;
justify-content: center;
justify-content:center;
align-items: center;
flex-direction: column;
}
.tab-bar-item .item{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative;
height: 100%;
}
.isItem {
transform: translateY(-40%)
}
.isItem .antt{
width:100rpx;
height: 100rpx;
background: var(--main-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 8rpx solid #fff;
box-sizing: border-box;
color: white;
}
.icons {
width: 100rpx;
height: 100rpx;
background: var(--main-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 4px solid #fff;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
......@@ -1412,36 +1452,19 @@
/* font-size: 10px; */
}
.img-view cover-image{
object-fit: contain;
/* .img-view{
display: flex;
align-items: center;
} */
.img-view image{
/* object-fit: contain; */
width: 100%;
height: 100%;
}
.text{
margin-top: 4rpx;
}
.hide{
display: none;
}
.down{
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transform: translateY(150px);
-webkit-transform: translateY(150px);
-moz-transform: translateY(150px);
-ms-transform: translateY(150px);
-o-transform: translateY(150px);
}
.up{
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment