自定义tabbar修改

后端研发-苏泰源
1 parent dfefaaed
Showing 3 changed files with 72 additions and 29 deletions
custom-tab-bar/index.js
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
@@ -5,13 +5,14 @@ Component({
 		fontcolor:'#6e6d6b',
 		fontcolor_sele:'#f23030',
 		backgroundColor:'#ffffff',	
-		active:-1,	
 		list:app.def_list,		
 		cartGoodsNum:0,
+		active: 0,
 	},
  
 	lifetimes: {
 	  attached: function() {
+			
 		   var th=this;
 		   getApp().promiseGet("/api/weshop/storeDistribut/get/"+os.stoid,{}).then(rs=>{
 		   	  var dis=rs.data.data;	
@@ -51,7 +52,8 @@ Component({
 		   var th=this;
  
 		   var is_read=getApp().globalData.is_read;
-		   var custum_data=getApp().globalData.custum_data;		   
+		   var custum_data=getApp().globalData.custum_data;	
+			 
 		   if(is_read){
 			    if(custum_data){
 					 this.set_list(custum_data);
@@ -105,16 +107,33 @@ Component({
 				fontcolor:data.fontcolor,
 				is_custum:1
 			})
-						
+			// console.log('abc=======<<<<<', this.data.list);		
 		},
  
 		nav_goto:function(e){
+			// const data = e.currentTarget.dataset
+			// this.setData({
+			// 	active: data.index
+			// })
+			// console.log('active***********<<<<<', this.data.active);
 			var url=e.currentTarget.dataset.url;
 			if(!url) return false;
 			if(url[0]!='/') url='/'+url;
 			//wx.switchTab({url:url,})			
 			getApp().goto(url);		
-		}
+		},
+		
+		
+		// switchTab(e) {
+		// 	const data = e.currentTarget.dataset
+		// 	const url = data.path
+		// 	wx.switchTab({url})
+		// 	this.setData({
+		// 		selected: data.index
+		// 	})
+		// }
+		
+
  
   }
  
 <!-- 如果是自定义的话 -->
 <view  class="main_bar {{is_custum?'custom':''}}" style=" background: {{backgroundColor}}; font-size: 22rpx;">
-       <block wx:for="{{list}}" wx:for-index="idx"> 	  
-		   <block wx:if="{{item.nav_name !== '分销' && item.weappurl!= '/pages/distribution/distribution'}}">
-				 <view data-url="{{item.weappurl}}" bindtap="nav_goto"  class="tabbar_item"  data-act="{{active==idx?1:0}}"
-				    style="color: {{active==idx?fontcolor_sele:fontcolor}};">
-				<!-- <view data-url="{{item.weappurl}}" bindtap="nav_goto"  class="tabbar_item"  data-act="{{active==idx?1:0}}" 
-				   style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};"> -->
-				   
-				   <view class="tab_img">
-						 <view wx:if="{{item.nav_name=='购物车' && cartGoodsNum != 0}}"  class="cart_num" >{{cartGoodsNum}}</view>
-					   <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view>
-				   </view>
-				   <view>{{item.nav_name}}</view>
-				</view>
-			</block>
-			<!-- 是分销商且没有关闭，可以显示 -->
+      <block wx:for="{{list}}" wx:for-index="idx"> 	  
+				 <block wx:if="{{item.nav_name !== '分销' && item.weappurl != '/pages/distribution/distribution'}}">
+					 <view data-url="{{item.weappurl}}" bindtap="nav_goto" class="tabbar_item" data-act="{{active==idx?1:0}}"
+							style="color: {{active==idx?fontcolor_sele:fontcolor}};">
+					<!-- <view data-url="{{item.weappurl}}" bindtap="nav_goto"  class="tabbar_item"  data-act="{{active==idx?1:0}}" 
+						 style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};"> -->
+						 <!-- <view class="tabbar_item_wrapper"> -->
+						<view class="{{item.specific ? 'tabbar_item_wrapper':''}}" style="background-color: {{item.specific ? item.button_background:'transparent'}};">
+							 <view class="tab_img">
+									<view wx:if="{{item.nav_name=='购物车' && cartGoodsNum != 0}}"  class="cart_num" >{{cartGoodsNum}}</view>
+								 <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view>
+							 </view>
+							 <view>{{item.nav_name}}</view>
+						</view>
+						 
+					</view>
+				</block>
+				
+				
+				<!-- 是分销商且没有关闭，可以显示 -->
 		    <block wx:if="{{(item.nav_name === '分销' || item.weappurl === '/pages/distribution/distribution') && !is_no_distri}}">
 					<view data-url="{{item.weappurl}}" bindtap="nav_goto"  class="tabbar_item"  data-act="{{active==idx?1:0}}"
 					   style="color: {{active==idx?fontcolor_sele:fontcolor}};">
 				   <!-- <view data-url="{{item.weappurl}}" bindtap="nav_goto"  class="tabbar_item"  data-act="{{active==idx?1:0}}"
 				      style="width:{{100 / list.length}}%;color: {{active==idx?fontcolor_sele:fontcolor}};"> -->
-				      <view class="tab_img">
-				   	   <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view>
-				      </view>
-				      <view>{{item.nav_name}}</view>
-				   </view>
+							<view class="{{item.specific ? 'tabbar_item_wrapper':''}}" style="background-color: {{item.specific ? item.button_background:'transparent'}};">
+								<view class="tab_img">
+								 <view class="nav_imgage" style="background-image: url({{active==idx?item.src_sele:item.src}});"></view>
+								</view>
+								<view>{{item.nav_name}}</view>
+							</view>
+				      
+				  </view>
 			 </block>	 			
-      </block>
+    </block>
 </view >	
  
  
@@ -7,6 +7,7 @@
 	z-index: 10000;
 	display: flex;
 	justify-content: space-around;
+	align-items: center;
 	height: 100rpx;
 }
 .main_bar.custom {
@@ -19,14 +20,14 @@
 	/* float: left; */
 	text-align: center;
 	padding: 0;
-	display: flex;
+	/* display: flex; */
 	flex: 1;
-	flex-direction: column;
-	justify-content: center;
+	/* flex-direction: column; */
+	/* justify-content: center; */
 }
  
 .tab_img {
-	display: flex;
+	/* display: flex; */
 	justify-content: center;
 	position: relative;
 }
@@ -39,6 +40,7 @@
 	/* background-position: center;
 	background-repeat: no-repeat; */
 	background-size: 100%;
+	margin: 0 auto;
 }
  
 .cart_num {
@@ -55,3 +57,17 @@
 	right: 34rpx;
 	/* margin-right: -70rpx; */
 }
+
+.tabbar_item_wrapper {
+	background-color: white;
+	position: relative;
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 50%;
+	bottom: 14rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0 auto;
+}
+