From 68d39c008f6735caa426ddd86900d98788725957 Mon Sep 17 00:00:00 2001
From: yvan.ni <765199919@qq.com>
Date: Thu, 11 Jun 2020 09:04:38 +0800
Subject: [PATCH] 底部导航的优化

---
 pages/cart/cart/cart.js                    | 14 ++++++++++++++
 pages/cart/cart/cart.wxml                  |  5 +++--
 pages/goods/categoryList/categoryList.js   | 14 ++++++++++++++
 pages/goods/categoryList/categoryList.wxml |  7 ++++---
 pages/index/index/index.js                 | 17 +++++++++++++++++
 pages/index/index/index.wxml               |  6 ++++--
 pages/tabbar/tabbar.wxml                   | 38 ++++++++++++++++----------------------
 pages/user/index/index.js                  | 14 ++++++++++++++
 pages/user/index/index.wxml                |  5 +++--
 9 files changed, 89 insertions(+), 31 deletions(-)

diff --git a/pages/cart/cart/cart.js b/pages/cart/cart/cart.js
index 5fb75d9..3c34d18 100644
--- a/pages/cart/cart/cart.js
+++ b/pages/cart/cart/cart.js
@@ -1300,6 +1300,20 @@ 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
diff --git a/pages/cart/cart/cart.wxml b/pages/cart/cart/cart.wxml
index 8744b68..76f395c 100644
--- a/pages/cart/cart/cart.wxml
+++ b/pages/cart/cart/cart.wxml
@@ -1,3 +1,6 @@
+<import src="../../tabbar/tabbar.wxml" />
+<template is="tabBar" data="{{tabBar}}" />
+
 <!-- 广告图片 -->
 <navigator class="picture" url="/pages/activity/seckill_list/seckill_list" wx:if="{{is_has_flash}}">
   <image class="picture" src="{{iurl}}miniapp/images/stores/Seckill.png"></image>
@@ -181,5 +184,3 @@
 
 
 <warn id="warn"></warn>
-<import src="../../tabbar/tabbar.wxml" />
-<template is="tabBar" data="{{tabBar}}" />
\ No newline at end of file
diff --git a/pages/goods/categoryList/categoryList.js b/pages/goods/categoryList/categoryList.js
index 28cce2e..5b08d98 100644
--- a/pages/goods/categoryList/categoryList.js
+++ b/pages/goods/categoryList/categoryList.js
@@ -962,4 +962,18 @@ Page({
       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
diff --git a/pages/goods/categoryList/categoryList.wxml b/pages/goods/categoryList/categoryList.wxml
index 960a5ab..4cf04a6 100644
--- a/pages/goods/categoryList/categoryList.wxml
+++ b/pages/goods/categoryList/categoryList.wxml
@@ -1,4 +1,7 @@
-<!-- 风格1 --> 
+<import src="../../tabbar/tabbar.wxml" />
+<template is="tabBar" data="{{tabBar}}" />
+
+<!-- 风格1 -->
 <block wx:if="{{is_used_share==0}}">
   <view class='top_view' wx:if="{{is_show_pl || is_show_gb || is_show_pp }}">
     <view class="swiper-tab" >
@@ -507,5 +510,3 @@
     </block>
 
 </block>
-  <import src="../../tabbar/tabbar.wxml" />
-  <template is="tabBar" data="{{tabBar}}" />
\ No newline at end of file
diff --git a/pages/index/index/index.js b/pages/index/index/index.js
index d7099f7..02b0772 100644
--- a/pages/index/index/index.js
+++ b/pages/index/index/index.js
@@ -827,6 +827,23 @@ 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
diff --git a/pages/index/index/index.wxml b/pages/index/index/index.wxml
index 2c18783..73cd56c 100644
--- a/pages/index/index/index.wxml
+++ b/pages/index/index/index.wxml
@@ -1,3 +1,6 @@
+<import src="../../tabbar/tabbar.wxml" />
+<template is="tabBar" data="{{tabBar}}"/>
+
 <!--普通界面-->
 <wxs module="filter" src="../../../utils/filter.wxs"></wxs>
 <view class="container rel" wx:if="{{ishow}}">
@@ -360,8 +363,7 @@
   </view>
 </block>
 
-  <import src="../../tabbar/tabbar.wxml" />
-  <template is="tabBar" data="{{tabBar}}"/>
+
 
 
 
diff --git a/pages/tabbar/tabbar.wxml b/pages/tabbar/tabbar.wxml
index d7e9c76..acc9422 100644
--- a/pages/tabbar/tabbar.wxml
+++ b/pages/tabbar/tabbar.wxml
@@ -1,3 +1,4 @@
+
 <!--pages/tabbar.wxml-->
   <template name="tabBar">
     <!-- 如果是自定义的话 -->
@@ -9,10 +10,10 @@
                 <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:30px;margin-left:33%;">
-                   <image src="{{item.src}}" wx:if="{{!item.active}}" mode="widthFix"  class="img" style="max-width:100%;max-height:100%"></image>
+              <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>
-              <view style="height:20px;line-height:15px; position: relative; top: -15rpx"><text class="tabbar_text" wx:if="{{item.nav_name}}" style="font-size:0.6rem">{{item.nav_name}}</text></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>
        </block>
        <block wx:else>
@@ -20,17 +21,10 @@
                <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:30px;margin-left:33%;">
-                   <block wx:if="{{item.active}}">
-                       <image src="{{item.src_sele}}"  mode="widthFix"  class="img" style="max-width:100%;max-height:100%"></image>
-                   </block>
-                   <block wx:else>
-                       <navigator  url="{{item.weappurl}}">
-                           <image src="{{item.src}}" wx:if="{{!item.active}}" mode="widthFix"  class="img" style="max-width:100%;max-height:100%"></image>
-                       </navigator>
-                   </block>
+               <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>
-               <view style="height:20px;line-height:15px; position: relative; top: -15rpx"><text class="tabbar_text" wx:if="{{item.nav_name}}" style="font-size:0.6rem">{{item.nav_name}}</text></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>
        </block>
 
@@ -43,7 +37,7 @@
     <!-- 1 -->
     <block wx:if="{{tabBar.active!='/pages/index/index/index'}}">
         <navigator url="/pages/index/index/index" class="tabbar_item {{item.clas}}" open-type="redirect" style="position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-          <view style="width:30%;height:57rpx;margin-left:35%;">
+          <view style="width:30%;height:54rpx;margin-left:35%;">
                <image src="{{tabBar.url}}/miniapp/images/bar/index.png" class="img" style="width:100%;height:100%"></image>
           </view>
           <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">首页</text></view>
@@ -51,7 +45,7 @@
     </block>
     <block wx:else>
         <view class="tabbar_item {{item.clas}}"  style="color:#f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-            <view style="width:30%;height:57rpx;margin-left:35%;">
+            <view style="width:30%;height:54rpx;margin-left:35%;">
                 <image src="{{tabBar.url}}/miniapp/images/bar/index_on.png"  class="img" style="width:100%;height:100%"></image>
             </view>
             <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">首页</text></view>
@@ -62,7 +56,7 @@
     <!-- 2 -->
     <block wx:if="{{tabBar.active!='/pages/goods/categoryList/categoryList'}}">
     <navigator  url="/pages/goods/categoryList/categoryList" class="tabbar_item {{tabBar.clas}}" open-type="redirect" style="position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-      <view style="width:30%;height:57rpx;margin-left:35%;">
+      <view style="width:30%;height:54rpx;margin-left:35%;">
           <image src="{{tabBar.url}}/miniapp/images/bar/fl.png"  class="img" style="width:100%;height:100%"></image>
       </view>
       <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" wx:if="分类" style="font-size:0.6rem">分类</text></view>
@@ -70,7 +64,7 @@
     </block>
     <block wx:else>
         <view  class="tabbar_item {{tabBar.clas}}" style="color:#f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-            <view style="width:30%;height:57rpx;margin-left:35%;">
+            <view style="width:30%;height:54rpx;margin-left:35%;">
                  <image src="{{tabBar.url}}/miniapp/images/bar/fl_on.png"  class="img" style="width:100%;height:100%"></image>
             </view>
             <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" wx:if="分类" style="font-size:0.6rem">分类</text></view>
@@ -83,7 +77,7 @@
         <navigator url="/pages/cart/cart/cart" open-type="redirect" class="tabbar_item {{tabBar.clas}}" style="position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
           <view style="background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;height: 40rpx;line-heith:40rpx;position: fixed;z-index: 100;left:63%">
           {{tabBar.cartGoodsNum}}
-          </view><view style="width:30%;height:57rpx;margin-left:35%;">
+          </view><view style="width:30%;height:54rpx;margin-left:35%;">
               <image src="{{tabBar.url}}/miniapp/images/bar/car.png"  class="img" style="width:100%;height:100%"></image>
            </view>
           <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">购物车</text></view>
@@ -93,7 +87,7 @@
           <view class="tabbar_item {{tabBar.clas}}" style="color:  #f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
              <view style="background-color: red;color: #fff;font-size: 20rpx;border-radius: 50%;width: 40rpx;height: 40rpx;line-heith:40rpx;position: fixed;z-index: 100;left:63%">
                     {{tabBar.cartGoodsNum}}
-             </view><view style="width:30%;height:57rpx;margin-left:35%;">
+             </view><view style="width:30%;height:54rpx;margin-left:35%;">
                     <image src="{{tabBar.url}}/miniapp/images/bar/car_on.png"  class="img" style="width:100%;height:100%"></image>
             </view>
             <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">购物车</text></view>
@@ -103,7 +97,7 @@
     <!-- 4 -->
     <block wx:if="{{tabBar.active!='/pages/user/index/index'}}">
         <navigator url="/pages/user/index/index" open-type="redirect" class="tabbar_item {{tabBar.clas}}" style="position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-          <view style="width:30%;height:57rpx;margin-left:35%;">
+          <view style="width:30%;height:54rpx;margin-left:35%;">
                <image src="{{tabBar.url}}/miniapp/images/bar/user.png"  class="img" style="width:100%;height:100%"></image>
            </view>
           <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text"  style="font-size:0.6rem">我的</text></view>
@@ -111,8 +105,8 @@
     </block>
     <block wx:else>
         <view  class="tabbar_item {{tabBar.clas}}" style="color:  #f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;">
-            <view style="width:30%;height:57rpx;margin-left:35%;">
-                 <image src="{{tabBar.url}}/miniapp/images/bar/user_on.png"  class="img" style="width:100%;height:100%"></image>
+            <view style="width:30%;height:54rpx;margin-left:35%;">
+                 <image src="{{tabBar.url}}/miniapp/images/bar/user_on.png"   class="img" style="width:100%;height:100%"></image>
             </view>
             <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text"  style="font-size:0.6rem">我的</text></view>
         </view>
diff --git a/pages/user/index/index.js b/pages/user/index/index.js
index 3e25205..4c43841 100644
--- a/pages/user/index/index.js
+++ b/pages/user/index/index.js
@@ -638,6 +638,20 @@ 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
+    })
   }
 
 
diff --git a/pages/user/index/index.wxml b/pages/user/index/index.wxml
index efec660..19479fc 100644
--- a/pages/user/index/index.wxml
+++ b/pages/user/index/index.wxml
@@ -1,3 +1,6 @@
+<import src="../../tabbar/tabbar.wxml" />
+<template is="tabBar" data="{{tabBar}}" />
+
 <view class="xc-page" style="margin-bottom:{{isIpx ? '168rpx' : '100rpx'}}">
   <view class="xc-user">
     <view class="xc-head rel">
@@ -297,5 +300,3 @@
 </view>
 
 <pop_txt id="pop_txt"></pop_txt>
-  <import src="../../tabbar/tabbar.wxml" />
-  <template is="tabBar" data="{{tabBar}}" />
\ No newline at end of file
--
libgit2 0.21.4