Commit 68d39c008f6735caa426ddd86900d98788725957
1 parent
958405e8
底部导航的优化
Showing
9 changed files
with
89 additions
and
31 deletions
pages/cart/cart/cart.js
| ... | ... | @@ -1300,6 +1300,20 @@ Page({ |
| 1300 | 1300 | var prom_id=e.currentTarget.dataset.prom_id; |
| 1301 | 1301 | var url="/pages/goods/goodsList/goodsList?prom_type=3&prom_id="+prom_id; |
| 1302 | 1302 | getApp().goto(url); |
| 1303 | + }, | |
| 1304 | + | |
| 1305 | + load_nav(e){ | |
| 1306 | + var $width=e.detail.width, //获取图片真实宽度 | |
| 1307 | + $height=e.detail.height, | |
| 1308 | + ratio=$width/$height; //图片的真实宽高比例 | |
| 1309 | + var viewHeight=52, //设置图片显示宽度，左右留有16rpx边距 | |
| 1310 | + viewWidth=viewHeight*ratio; //计算的高度值 | |
| 1311 | + var image=this.data.tabBar.list[e.target.dataset.index]; | |
| 1312 | + //将图片的datadata-index作为image对象的key,然后存储图片的宽高值 | |
| 1313 | + image.width=viewWidth; | |
| 1314 | + this.setData({ | |
| 1315 | + ['tabBar.list['+e.target.dataset.index+']']:image | |
| 1316 | + }) | |
| 1303 | 1317 | } |
| 1304 | 1318 | |
| 1305 | 1319 | }); |
| 1306 | 1320 | \ No newline at end of file | ... | ... |
pages/cart/cart/cart.wxml
| 1 | +<import src="../../tabbar/tabbar.wxml" /> | |
| 2 | +<template is="tabBar" data="{{tabBar}}" /> | |
| 3 | + | |
| 1 | 4 | <!-- 广告图片 --> |
| 2 | 5 | <navigator class="picture" url="/pages/activity/seckill_list/seckill_list" wx:if="{{is_has_flash}}"> |
| 3 | 6 | <image class="picture" src="{{iurl}}miniapp/images/stores/Seckill.png"></image> |
| ... | ... | @@ -181,5 +184,3 @@ |
| 181 | 184 | |
| 182 | 185 | |
| 183 | 186 | <warn id="warn"></warn> |
| 184 | -<import src="../../tabbar/tabbar.wxml" /> | |
| 185 | -<template is="tabBar" data="{{tabBar}}" /> | |
| 186 | 187 | \ No newline at end of file | ... | ... |
pages/goods/categoryList/categoryList.js
| ... | ... | @@ -962,4 +962,18 @@ Page({ |
| 962 | 962 | func(ob); |
| 963 | 963 | }) |
| 964 | 964 | }, |
| 965 | + | |
| 966 | + load_nav(e){ | |
| 967 | + var $width=e.detail.width, //获取图片真实宽度 | |
| 968 | + $height=e.detail.height, | |
| 969 | + ratio=$width/$height; //图片的真实宽高比例 | |
| 970 | + var viewHeight=52, //设置图片显示宽度，左右留有16rpx边距 | |
| 971 | + viewWidth=viewHeight*ratio; //计算的高度值 | |
| 972 | + var image=this.data.tabBar.list[e.target.dataset.index]; | |
| 973 | + //将图片的datadata-index作为image对象的key,然后存储图片的宽高值 | |
| 974 | + image.width=viewWidth; | |
| 975 | + this.setData({ | |
| 976 | + ['tabBar.list['+e.target.dataset.index+']']:image | |
| 977 | + }) | |
| 978 | + } | |
| 965 | 979 | }); |
| 966 | 980 | \ No newline at end of file | ... | ... |
pages/goods/categoryList/categoryList.wxml
| 1 | -<!-- 风格1 --> | |
| 1 | +<import src="../../tabbar/tabbar.wxml" /> | |
| 2 | +<template is="tabBar" data="{{tabBar}}" /> | |
| 3 | + | |
| 4 | +<!-- 风格1 --> | |
| 2 | 5 | <block wx:if="{{is_used_share==0}}"> |
| 3 | 6 | <view class='top_view' wx:if="{{is_show_pl || is_show_gb || is_show_pp }}"> |
| 4 | 7 | <view class="swiper-tab" > |
| ... | ... | @@ -507,5 +510,3 @@ |
| 507 | 510 | </block> |
| 508 | 511 | |
| 509 | 512 | </block> |
| 510 | - <import src="../../tabbar/tabbar.wxml" /> | |
| 511 | - <template is="tabBar" data="{{tabBar}}" /> | |
| 512 | 513 | \ No newline at end of file | ... | ... |
pages/index/index/index.js
| ... | ... | @@ -827,6 +827,23 @@ Page({ |
| 827 | 827 | is_disgraceful: 1 |
| 828 | 828 | }) |
| 829 | 829 | }) |
| 830 | + }, | |
| 831 | + | |
| 832 | + load_nav(e){ | |
| 833 | + | |
| 834 | + var $width=e.detail.width, //获取图片真实宽度 | |
| 835 | + $height=e.detail.height, | |
| 836 | + ratio=$width/$height; //图片的真实宽高比例 | |
| 837 | + var viewHeight=52, //设置图片显示宽度，左右留有16rpx边距 | |
| 838 | + viewWidth=viewHeight*ratio; //计算的高度值 | |
| 839 | + var image=this.data.tabBar.list[e.target.dataset.index]; | |
| 840 | + if(image.width) return fasle; | |
| 841 | + | |
| 842 | + //将图片的datadata-index作为image对象的key,然后存储图片的宽高值 | |
| 843 | + image.width=viewWidth; | |
| 844 | + this.setData({ | |
| 845 | + ['tabBar.list['+e.target.dataset.index+']']:image | |
| 846 | + }) | |
| 830 | 847 | } |
| 831 | 848 | |
| 832 | 849 | }); |
| 833 | 850 | \ No newline at end of file | ... | ... |
pages/index/index/index.wxml
| 1 | +<import src="../../tabbar/tabbar.wxml" /> | |
| 2 | +<template is="tabBar" data="{{tabBar}}"/> | |
| 3 | + | |
| 1 | 4 | <!--普通界面--> |
| 2 | 5 | <wxs module="filter" src="../../../utils/filter.wxs"></wxs> |
| 3 | 6 | <view class="container rel" wx:if="{{ishow}}"> |
| ... | ... | @@ -360,8 +363,7 @@ |
| 360 | 363 | </view> |
| 361 | 364 | </block> |
| 362 | 365 | |
| 363 | - <import src="../../tabbar/tabbar.wxml" /> | |
| 364 | - <template is="tabBar" data="{{tabBar}}"/> | |
| 366 | + | |
| 365 | 367 | |
| 366 | 368 | |
| 367 | 369 | ... | ... |
pages/tabbar/tabbar.wxml
| 1 | + | |
| 1 | 2 | <!--pages/tabbar.wxml--> |
| 2 | 3 | <template name="tabBar"> |
| 3 | 4 | <!-- 如果是自定义的话 --> |
| ... | ... | @@ -9,10 +10,10 @@ |
| 9 | 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;"> |
| 10 | 11 | {{tabBar.cartGoodsNum}} |
| 11 | 12 | </view> |
| 12 | - <view style="width:35%;height:30px;margin-left:33%;"> | |
| 13 | - <image src="{{item.src}}" wx:if="{{!item.active}}" mode="widthFix" class="img" style="max-width:100%;max-height:100%"></image> | |
| 13 | + <view style="width:35%;height:54rpx;margin-left:33%;"> | |
| 14 | + <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> | |
| 14 | 15 | </view> |
| 15 | - <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> | |
| 16 | + <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> | |
| 16 | 17 | </navigator> |
| 17 | 18 | </block> |
| 18 | 19 | <block wx:else> |
| ... | ... | @@ -20,17 +21,10 @@ |
| 20 | 21 | <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;"> |
| 21 | 22 | {{tabBar.cartGoodsNum}} |
| 22 | 23 | </view> |
| 23 | - <view style="width:35%;height:30px;margin-left:33%;"> | |
| 24 | - <block wx:if="{{item.active}}"> | |
| 25 | - <image src="{{item.src_sele}}" mode="widthFix" class="img" style="max-width:100%;max-height:100%"></image> | |
| 26 | - </block> | |
| 27 | - <block wx:else> | |
| 28 | - <navigator url="{{item.weappurl}}"> | |
| 29 | - <image src="{{item.src}}" wx:if="{{!item.active}}" mode="widthFix" class="img" style="max-width:100%;max-height:100%"></image> | |
| 30 | - </navigator> | |
| 31 | - </block> | |
| 24 | + <view style="width:35%;height:54rpx;margin-left:33%;"> | |
| 25 | + <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> | |
| 32 | 26 | </view> |
| 33 | - <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> | |
| 27 | + <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> | |
| 34 | 28 | </view> |
| 35 | 29 | </block> |
| 36 | 30 | |
| ... | ... | @@ -43,7 +37,7 @@ |
| 43 | 37 | <!-- 1 --> |
| 44 | 38 | <block wx:if="{{tabBar.active!='/pages/index/index/index'}}"> |
| 45 | 39 | <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;"> |
| 46 | - <view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 40 | + <view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 47 | 41 | <image src="{{tabBar.url}}/miniapp/images/bar/index.png" class="img" style="width:100%;height:100%"></image> |
| 48 | 42 | </view> |
| 49 | 43 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">首页</text></view> |
| ... | ... | @@ -51,7 +45,7 @@ |
| 51 | 45 | </block> |
| 52 | 46 | <block wx:else> |
| 53 | 47 | <view class="tabbar_item {{item.clas}}" style="color:#f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;"> |
| 54 | - <view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 48 | + <view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 55 | 49 | <image src="{{tabBar.url}}/miniapp/images/bar/index_on.png" class="img" style="width:100%;height:100%"></image> |
| 56 | 50 | </view> |
| 57 | 51 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">首页</text></view> |
| ... | ... | @@ -62,7 +56,7 @@ |
| 62 | 56 | <!-- 2 --> |
| 63 | 57 | <block wx:if="{{tabBar.active!='/pages/goods/categoryList/categoryList'}}"> |
| 64 | 58 | <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;"> |
| 65 | - <view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 59 | + <view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 66 | 60 | <image src="{{tabBar.url}}/miniapp/images/bar/fl.png" class="img" style="width:100%;height:100%"></image> |
| 67 | 61 | </view> |
| 68 | 62 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" wx:if="分类" style="font-size:0.6rem">分类</text></view> |
| ... | ... | @@ -70,7 +64,7 @@ |
| 70 | 64 | </block> |
| 71 | 65 | <block wx:else> |
| 72 | 66 | <view class="tabbar_item {{tabBar.clas}}" style="color:#f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;"> |
| 73 | - <view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 67 | + <view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 74 | 68 | <image src="{{tabBar.url}}/miniapp/images/bar/fl_on.png" class="img" style="width:100%;height:100%"></image> |
| 75 | 69 | </view> |
| 76 | 70 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" wx:if="分类" style="font-size:0.6rem">分类</text></view> |
| ... | ... | @@ -83,7 +77,7 @@ |
| 83 | 77 | <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;"> |
| 84 | 78 | <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%"> |
| 85 | 79 | {{tabBar.cartGoodsNum}} |
| 86 | - </view><view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 80 | + </view><view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 87 | 81 | <image src="{{tabBar.url}}/miniapp/images/bar/car.png" class="img" style="width:100%;height:100%"></image> |
| 88 | 82 | </view> |
| 89 | 83 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">购物车</text></view> |
| ... | ... | @@ -93,7 +87,7 @@ |
| 93 | 87 | <view class="tabbar_item {{tabBar.clas}}" style="color: #f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;"> |
| 94 | 88 | <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%"> |
| 95 | 89 | {{tabBar.cartGoodsNum}} |
| 96 | - </view><view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 90 | + </view><view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 97 | 91 | <image src="{{tabBar.url}}/miniapp/images/bar/car_on.png" class="img" style="width:100%;height:100%"></image> |
| 98 | 92 | </view> |
| 99 | 93 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">购物车</text></view> |
| ... | ... | @@ -103,7 +97,7 @@ |
| 103 | 97 | <!-- 4 --> |
| 104 | 98 | <block wx:if="{{tabBar.active!='/pages/user/index/index'}}"> |
| 105 | 99 | <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;"> |
| 106 | - <view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 100 | + <view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 107 | 101 | <image src="{{tabBar.url}}/miniapp/images/bar/user.png" class="img" style="width:100%;height:100%"></image> |
| 108 | 102 | </view> |
| 109 | 103 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">我的</text></view> |
| ... | ... | @@ -111,8 +105,8 @@ |
| 111 | 105 | </block> |
| 112 | 106 | <block wx:else> |
| 113 | 107 | <view class="tabbar_item {{tabBar.clas}}" style="color: #f23030;position:relative;width:25%;height:100%;float:left;text-align:center;padding:2px 0;"> |
| 114 | - <view style="width:30%;height:57rpx;margin-left:35%;"> | |
| 115 | - <image src="{{tabBar.url}}/miniapp/images/bar/user_on.png" class="img" style="width:100%;height:100%"></image> | |
| 108 | + <view style="width:30%;height:54rpx;margin-left:35%;"> | |
| 109 | + <image src="{{tabBar.url}}/miniapp/images/bar/user_on.png" class="img" style="width:100%;height:100%"></image> | |
| 116 | 110 | </view> |
| 117 | 111 | <view style="height:40rpx;line-height:22rpx;"><text class="tabbar_text" style="font-size:0.6rem">我的</text></view> |
| 118 | 112 | </view> | ... | ... |
pages/user/index/index.js
| ... | ... | @@ -638,6 +638,20 @@ Page({ |
| 638 | 638 | |
| 639 | 639 | } |
| 640 | 640 | }) |
| 641 | + }, | |
| 642 | + | |
| 643 | + load_nav(e){ | |
| 644 | + var $width=e.detail.width, //获取图片真实宽度 | |
| 645 | + $height=e.detail.height, | |
| 646 | + ratio=$width/$height; //图片的真实宽高比例 | |
| 647 | + var viewHeight=52, //设置图片显示宽度，左右留有16rpx边距 | |
| 648 | + viewWidth=viewHeight*ratio; //计算的高度值 | |
| 649 | + var image=this.data.tabBar.list[e.target.dataset.index]; | |
| 650 | + //将图片的datadata-index作为image对象的key,然后存储图片的宽高值 | |
| 651 | + image.width=viewWidth; | |
| 652 | + this.setData({ | |
| 653 | + ['tabBar.list['+e.target.dataset.index+']']:image | |
| 654 | + }) | |
| 641 | 655 | } |
| 642 | 656 | |
| 643 | 657 | ... | ... |
pages/user/index/index.wxml
| 1 | +<import src="../../tabbar/tabbar.wxml" /> | |
| 2 | +<template is="tabBar" data="{{tabBar}}" /> | |
| 3 | + | |
| 1 | 4 | <view class="xc-page" style="margin-bottom:{{isIpx ? '168rpx' : '100rpx'}}"> |
| 2 | 5 | <view class="xc-user"> |
| 3 | 6 | <view class="xc-head rel"> |
| ... | ... | @@ -297,5 +300,3 @@ |
| 297 | 300 | </view> |
| 298 | 301 | |
| 299 | 302 | <pop_txt id="pop_txt"></pop_txt> |
| 300 | - <import src="../../tabbar/tabbar.wxml" /> | |
| 301 | - <template is="tabBar" data="{{tabBar}}" /> | |
| 302 | 303 | \ No newline at end of file | ... | ... |