tabbar.wxml 8.65 KB

<!--pages/tabbar.wxml-->
  <template name="tabBar">
    <!-- 如果是自定义的话 -->
    <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: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>
       </block>
       <block wx:else>
           <view  class="tabbar_item {{item.clas}}" style="color: {{item.selectedColor? item.selectedColor :tabBar.selectedColor}};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: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>
       </block>

      </block>
    </view>


   <!-- 如果是默认的话 -->
    <view hidden="{{tabBar.iscustom=='1'}}" class="tab-bar" style="width:100%;height:{{tabBar.isIpx ? '168rpx' : '100rpx'}};position:fixed;color:#6e6d6b; background:#ffffff; bottom: 0;z-index:9999999;padding:2px 0;">
    <!-- 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: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>
        </navigator>
    </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: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>
        </view>
     </block>


    <!-- 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: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>
    </navigator>
    </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: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>
        </view>
    </block>


    <!-- 3 -->
    <block wx:if="{{tabBar.active!='/pages/cart/cart/cart'}}">
        <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%;display: flex;align-items: center;justify-content: center;">
          {{tabBar.cartGoodsNum}}
          </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>
        </navigator>
     </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="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%;display: flex;align-items: center;justify-content: center;">
                    {{tabBar.cartGoodsNum}}
             </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>
         </view>
      </block>

    <!-- 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: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>
        </navigator>
    </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: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>
    </block>

  </view>
  </template>