底部导航优化

yvan.ni
1 parent 16474176
Showing 5 changed files with 10 additions and 65 deletions
pages/cart/cart/cart.js
pages/goods/categoryList/categoryList.js
pages/index/index/index.js
pages/tabbar/tabbar.wxml
pages/user/index/index.js
@@ -1300,20 +1300,7 @@ Page({
      var prom_id=e.currentTarget.dataset.prom_id;
      var url="/pages/goods/goodsList/goodsList?prom_type=3&prom_id="+prom_id;
      getApp().goto(url);
-  },
-
-  load_nav(e){
-    var $width=e.detail.width,    //获取图片真实宽度
-        $height=e.detail.height,
-        ratio=$width/$height;    //图片的真实宽高比例
-    var viewHeight=52,           //设置图片显示宽度，左右留有16rpx边距
-        viewWidth=viewHeight*ratio;    //计算的高度值
-    var image=this.data.tabBar.list[e.target.dataset.index];
-    //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
-    image.width=viewWidth;
-    this.setData({
-      ['tabBar.list['+e.target.dataset.index+']']:image
-    })
   }
  
+
 });
 \ No newline at end of file
@@ -961,19 +961,6 @@ Page({
       var ob = { "card_list": new_arr, "name_map": card_name_map };
       func(ob);
     })
-  },
+  }
  
-    load_nav(e){
-        var $width=e.detail.width,    //获取图片真实宽度
-            $height=e.detail.height,
-            ratio=$width/$height;    //图片的真实宽高比例
-        var viewHeight=52,           //设置图片显示宽度，左右留有16rpx边距
-            viewWidth=viewHeight*ratio;    //计算的高度值
-        var image=this.data.tabBar.list[e.target.dataset.index];
-        //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
-        image.width=viewWidth;
-        this.setData({
-            ['tabBar.list['+e.target.dataset.index+']']:image
-        })
-    }
 });
 \ No newline at end of file
@@ -827,23 +827,7 @@ Page({
 			  is_disgraceful: 1
 			})
 	  })
-  },
-
-  load_nav(e){
+  }
  
-    var $width=e.detail.width,    //获取图片真实宽度
-        $height=e.detail.height,
-        ratio=$width/$height;    //图片的真实宽高比例
-    var viewHeight=52,           //设置图片显示宽度，左右留有16rpx边距
-        viewWidth=viewHeight*ratio;    //计算的高度值
-    var image=this.data.tabBar.list[e.target.dataset.index];
-    if(image.width) return fasle;
  
-    //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
-    image.width=viewWidth;
-    this.setData({
-      ['tabBar.list['+e.target.dataset.index+']']:image
-    })
-  }
-  
 });
 \ No newline at end of file
@@ -2,16 +2,16 @@
 <!--pages/tabbar.wxml-->
   <template name="tabBar">
     <!-- 如果是自定义的话 -->
-    <view hidden="{{tabBar.iscustom=='2'}}" class="tab-bar" style="width:100%;height:{{tabBar.isIpx ? '168rpx' : '100rpx'}};position:fixed;color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; bottom: 0;z-index:9999999;">
+    <view hidden="{{tabBar.iscustom=='2'}}" class="tab-bar" style="width:100%;height:{{tabBar.isIpx ? '172rpx' : '104rpx'}};position:fixed;color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; bottom: 0;z-index:9999999;">
       <block wx:for="{{tabBar.list}}" wx:key="weappurl">
-
        <block wx:if="{{!item.active}}">
             <navigator url="{{item.weappurl}}" open-type="redirect"  class="tabbar_item {{item.clas}}" style="position:relative;width:{{100 / tabBar.length}}%;height:100%;float:left;text-align:center;padding:5px 0;">
                 <view wx:if="{{item.nav_name=='购物车'}}"  style="top:0;background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;line-height:40rpx;height: 40rpx;position: absolute;z-index: 100;right:30rpx;">
                     {{tabBar.cartGoodsNum}}
                 </view>
-              <view style="width:35%;height:54rpx;margin-left:33%;">
-                   <image src="{{item.src}}"  bindload="load_nav" data-index="{{ index }}"  class="img" style="max-width: 100%;  width:{{item.width?item.width:0}}rpx;height:52rpx"></image>
+              <view style="width:35%;height:58rpx;margin-left:33%;display: flex; justify-content: center;align-items: center">
+                   <!--<image src="{{item.src}}"  bindload="load_nav" data-index="{{ index }}"  class="img" style="max-width: 100%;  width:{{item.width?item.width:0}}rpx;height:{{item.height}}rpx"></image>-->
+                   <view class="nav_imgage" style="background-image: url({{item.src}});height: 50rpx; width: 50rpx;background-position: center;background-repeat: no-repeat;background-size: auto 85%;"></view>
               </view>
               <view style="height:20px;line-height:15px; position: relative; top: -8rpx"><text class="tabbar_text" wx:if="{{item.nav_name}}" style="font-size:0.6rem">{{item.nav_name}}</text></view>
             </navigator>
@@ -21,8 +21,9 @@
                <view wx:if="{{item.nav_name=='购物车'}}"  style="top:0;background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;line-height:40rpx;height: 40rpx;position: absolute;z-index: 100;right:30rpx;">
                    {{tabBar.cartGoodsNum}}
                </view>
-               <view style="width:35%;height:54rpx;margin-left:33%;">
-                     <image src="{{item.src_sele}}"  bindload="load_nav"  data-index="{{ index }}"  class="img" style="max-width: 100%;width:{{item.width?item.width:0}}rpx;height:52rpx"></image>
+               <view style="width:35%;height:58rpx;margin-left:33%; display: flex; justify-content: center;align-items: center">
+                   <!--<image src="{{item.src_sele}}"  bindload="load_nav"  data-index="{{ index }}"  class="img" style="max-width: 100%;width:{{item.width?item.width:0}}rpx;height:{{item.height}}rpx"></image>-->
+                   <view class="nav_imgage" style="background-image: url({{item.src_sele}});height: 50rpx; width: 50rpx;background-position: center;background-repeat: no-repeat;background-size: auto 85%;"></view>
                </view>
                <view style="height:20px;line-height:15px; position: relative; top: -8rpx"><text class="tabbar_text" wx:if="{{item.nav_name}}" style="font-size:0.6rem">{{item.nav_name}}</text></view>
            </view>
@@ -638,20 +638,6 @@ Page({
  
       }
     })
-  },
-
-  load_nav(e){
-    var $width=e.detail.width,    //获取图片真实宽度
-        $height=e.detail.height,
-        ratio=$width/$height;    //图片的真实宽高比例
-    var viewHeight=52,           //设置图片显示宽度，左右留有16rpx边距
-        viewWidth=viewHeight*ratio;    //计算的高度值
-    var image=this.data.tabBar.list[e.target.dataset.index];
-    //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
-    image.width=viewWidth;
-    this.setData({
-      ['tabBar.list['+e.target.dataset.index+']']:image
-    })
   }