商品详情的顶部的风格的优化

yvan.ni
1 parent 9b073ad1
Showing 28 changed files with 536 additions and 36 deletions
app.wxss
components/diy_top_nav/diy_top_nav.js
components/diy_top_nav/diy_top_nav.json
components/diy_top_nav/diy_top_nav.wxml
components/diy_top_nav/diy_top_nav.wxss
packageA/pages/goodsInfo/goodsInfo.js
packageA/pages/goodsInfo/goodsInfo.json
packageA/pages/goodsInfo/goodsInfo.wxml
packageA/pages/goodsInfo/goodsInfo.wxss
packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.js
packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.json
packageA/pages/serviceCard_pd/goodsInfo/goodsInfo.wxml
packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.js
packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.json
packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxml
packageC/pages/luckyGo/luckyGo_goodsInfo/luckyGo_goodsInfo.wxss
packageC/pages/presell/cardInfo/goodsInfo.js
packageC/pages/presell/cardInfo/goodsInfo.json
packageC/pages/presell/cardInfo/goodsInfo.wxml
packageC/pages/presell/cardInfo/goodsInfo.wxss
@@ -1211,6 +1211,11 @@ background: #ffe3e2;
     content: "\e618";
 }
+.icon-weixin:before {
+	content: "\e677";
+}
+
+
 /* 去掉零售价划线 */
 .no_line_x{
   text-decoration: none !important;
+// components/diy_top_nav/diy_top_nav.js
+const app = getApp();
+var os = app.globalData.setting;
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    nav_type:{
+      type:Number,
+      value:0,
+    },
+    istop:{
+      type:Number,
+      value:0,
+    },
+    nav_title:{
+      type:String,
+      value:'首页',
+    },
+    nav_frontColor:{
+      type:String,
+      value:'#ffffff',
+    },
+    nav_backgroundColor:{
+      type:String,
+      value:'#ff7295',
+    },
+    is_share:{
+      type:Boolean,
+      value:true
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    imghots: os.imghost,
+    nav_h:0, //导航胶囊上面状态栏的高度
+    mentButt_h:0,//导航胶囊高度
+    navleft_pb:0, //导航左边的自定义内容的左右内边距
+    nav_left_w:281,  // 导航左边自定义的内容宽度
+    navleft_w:0,   //左边胶囊宽度
+    nav_pb:0,  // 导航的下内边距  
+    show_menu:false,//详情页导航下拉菜单显示
+    men_list:[
+      {
+        name:'首页',
+        img:'miniapp/js_img/goods_info/home.png?v=3',
+        url:'/pages/index/index/index' 
+      },
+      {
+        name:'我的订单',
+         img:'miniapp/js_img/goods_info/order.png?v=3',
+        url:'/pages/user/order_list/order_list' 
+      },
+      {
+        name:'我的收藏',
+         img:'miniapp/js_img/goods_info/collect.png?v=3',
+        url:'/packageB/pages/user/collect_list/collect_list' 
+      },
+      // {
+      //   name:'浏览足迹',
+      //   img:'',
+      //   url:'' 
+      // },
+    ]
+  },
+  lifetimes:{
+    attached:function(){
+      //满屏顶部导航参数获取-----------
+      try {
+        let systemInfo = wx.getSystemInfoSync()
+        let mentButt = wx.getMenuButtonBoundingClientRect()
+        let nav_pb = mentButt.top - systemInfo.statusBarHeight
+        let navleft_pb = systemInfo.windowWidth - mentButt.right
+
+        let user_no='';
+        if(getApp().globalData.userInfo){
+          user_no=getApp().globalData.userInfo.erpvipno
+        }
+
+        this.setData({
+          nav_h:mentButt.top,
+          mentButt_h:mentButt.height,
+          nav_left_w:mentButt.left,
+          navleft_pb,
+          nav_pb,
+          navleft_w:mentButt.width*0.9,
+          user_no
+        })
+      } catch (e) {
+        console.error(e);
+        wx.showToast({
+          title: '系统参数获取失败',
+          icon: 'none',
+          duration: 2000
+        })
+        // this.setData({
+        //   is_full_screen_navigation:false
+        // })
+        // Do something when catch error
+      }
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    nav_menu(e){
+      let url=e.currentTarget.dataset.url
+      getApp().goto(url)
+    },
+    show_menu_fn(){
+      this.setData({
+        show_menu:!this.data.show_menu
+      })
+    },
+    hide_menu_fn(){
+      this.setData({
+        show_menu:false
+      })
+    },
+    //分享
+    fenx_fn(){
+      this.triggerEvent('clickShare')
+    },
+    call_back(){
+      wx.navigateBack({
+        delta:1,
+        fail:()=>{
+          wx.reLaunch({
+            url: '/pages/index/index/index',
+          })
+        }
+      })
+    },
+    nav_search(){
+      getApp().goto('/pages/goods/search/search')
+    }
+  }
+})
+{
+  "component": true,
+  "usingComponents": {}
+}
 \ No newline at end of file
+<!--components/diy_top_nav/diy_top_nav.wxml-->
+<!-- 支撑作用 -->
+<view wx:if="{{nav_type==-1}}" style="padding-bottom:{{nav_pb}}px;color: {{nav_frontColor}};">
+  <view  style="height: {{nav_h}}px;width: 100%;"></view>
+  <view style="width: 100%;height:{{mentButt_h}}px;line-height:{{mentButt_h}}px;text-align: center;"></view>
+</view>
+<!-- 默认没有返回按钮 -->
+<view wx:if="{{nav_type==0}}" style="padding-bottom:{{nav_pb}}px;background-color:{{nav_backgroundColor}};color: {{nav_frontColor}};">
+  <view  style="height: {{nav_h}}px;width: 100%;"></view>
+  <view style="width: 100%;height:{{mentButt_h}}px;line-height:{{mentButt_h}}px;text-align: center;">{{nav_title}}</view>
+</view>
+<!-- 默认有返回按钮 -->
+<view wx:if="{{nav_type==5}}" style="padding-bottom:{{nav_pb}}px;background-color:{{nav_backgroundColor}};color: {{nav_frontColor}};">
+  <view  style="height: {{nav_h}}px;width: 100%;"></view>
+  <view style="width: 100%;height:{{mentButt_h}}px;line-height:{{mentButt_h}}px;text-align: center;position: relative;">
+    <view catchtap="call_back" class="call_back_box">
+          <text class="nav_fh" ></text>
+        </view> 
+    {{nav_title}}
+  </view>
+</view>
+
+<!-- 广告轮播时 -->
+<view wx:if="{{nav_type==1}}" style="padding-bottom:{{nav_pb}}px;color: {{nav_frontColor}};">
+  <view  style="height: {{nav_h}}px;width: 100%;"></view>
+  <view style="width: 100%;height:{{mentButt_h}}px;line-height:{{mentButt_h}}px;text-align: left;padding-left: 20rpx;">{{nav_title}}</view>
+</view>
+
+<!-- 详情页面 -->
+<view wx:if="{{nav_type==2}}" style="padding-bottom:{{nav_pb}}px;{{ istop ? '' : ('background-color:'+nav_backgroundColor)}};color:{{nav_frontColor}};">
+  <!-- 显示一下user_id -->
+  <view  style="position:relative;height: {{nav_h}}px;width: 100%; ">
+       <view wx:if="{{user_no}}" class="tb_con" >ID:{{user_no}}</view>
+  </view>
+  <view style="width: 100%;height:{{mentButt_h}}px;line-height:{{mentButt_h}}px;display: flex;">
+    <view class="nav_left" style="width: {{nav_left_w}}px;padding: 0 {{navleft_pb}}px;">
+      <view class="navl_left flex" style="width:{{navleft_w}}px;padding: 0;">
+        <!-- <text class="iconfont1 icon-line-homeshouye-01" style="color: #000;font-size: 20px;"></text> -->
+        <view catchtap="call_back" class="flex nav_left_box">
+          <text class="nav_fh" ></text>
+        </view> 
+        <text class="navl_left_b"></text>
+        <!-- <text  class="iconfont icon-xingyungou" style="color:#898989;"></text> -->
+        <view catchtap="show_menu_fn"  class="flex nav_left_box">
+          <view class="iconfont icon-fenlei" style="color: #000;position: relative;" >
+            <view class="list_menu" wx:if="{{show_menu}}">
+              <view class="list_menu_top"></view>
+              <view wx:for="{{men_list}}" class="menu_item" data-url="{{item.url}}" catchtap="nav_menu">
+                <image src="{{imghots + item.img}}" class="logo" lazy-load></image>
+                <view>{{item.name}}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view wx:if="{{!istop}}" catchtap="nav_search" class="navl_minddle" style="margin: 0 {{navleft_pb}}px;">
+        <icon type="search" size="28rpx" color="#898989"  class="nav_search"/>
+        <text>搜索更多商品</text>
+      </view>
+      <view  wx:else ></view>
+      <view wx:if="{{is_share}}" class="navl_right" catchtap="fenx_fn" style="height:{{mentButt_h}}px;width:{{mentButt_h}}px;">
+        <text  class="iconfont icon-weixin" style="color:rgb(4, 174, 15);size: 16rpx;"></text>
+	 			  <!-- <image class="we_chat" src="{{imghots}}/miniapp/images/we_chat.png"></image> -->
+      </view>
+      <view wx:else></view>
+    </view>
+    <view class="nav_right">1212121</view>
+  </view>
+</view>
+/* components/diy_top_nav/diy_top_nav.wxss */
+@import '../../app.wxss';
+.nav_left{
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.nav_left_box{
+  width: 48%;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.nav_right{
+  flex: 1;
+}
+.navl_left{
+  height: 100%;
+  background-color:rgba(255, 255, 255, .5);
+  border-radius:30rpx;
+  border: 1rpx solid rgba(227, 227, 227);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 4%;
+  box-sizing: border-box;
+}
+
+.navl_minddle{
+  height: 100%;
+  flex: 1;
+  background-color: bisque; 
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  /* justify-content: center; */
+  border-radius: 30rpx;
+  background-color: rgb(242, 243, 245);
+  /* background-color: #898989; */
+  font-size: 28rpx;
+  color: #898989;
+}
+.nav_search{
+  display: flex;
+  align-items: center;
+  margin: 0 10rpx 0 20rpx;
+}
+.navl_right{
+  background-color: #fff;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1rpx solid rgba(227, 227, 227);
+}
+.navl_left_b{
+  width: 1rpx;
+  height: 65%;
+  background-color:rgb(227,227,227) ;
+}
+.we_chat{
+  width: 45rpx;
+  height: 45rpx;
+}
+.nav_fh {
+	width: 18rpx;
+	height: 18rpx;
+	border-top: 2rpx solid #000;
+	border-right: 2rpx solid #000;
+	transform: rotateZ(-135deg);
+	display: inline-block;
+	margin-bottom: 3rpx;
+}
+.list_menu{
+  position: absolute;
+  /* bottom: -10rpx; */
+  /* top: -13rpx; */
+  left: -35rpx;
+  /* width: 180rpx; */
+  /* width: auto; */
+  padding: 10rpx 26rpx;
+  /* height: 400rpx; */
+  margin-top: 18rpx;
+  background-color: #fff;
+  /* background-color: rebeccapurple; */
+  border-radius: 15rpx;
+  z-index: 9999999;
+}
+.list_menu_top{
+  position: absolute;
+  top: -10rpx;
+  left: 50rpx;
+  width: 26rpx;
+	height: 26rpx;
+  /* background-color: rebeccapurple; */
+  background-color: #fff;
+	transform: rotateZ(45deg);
+  display: inline-block;
+}
+.menu_item{
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  white-space: nowrap;
+  /* padding: 20rpx; */
+}
+.menu_item image{
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 20rpx;
+}
+.call_back_box{
+  width: 100rpx;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  /* background-color: blueviolet; */
+  left: 0;
+  bottom: 0;
+}
+.call_back_box .nav_fh{
+  width: 20rpx;
+  height: 20rpx;
+}
+
+.tb_con{
+  position: absolute; bottom: 0; right: 24rpx; font-size: 18rpx;color: #333;
+}
 \ No newline at end of file
@@ -212,9 +212,15 @@ Page({
 		hiddenCS: true, //控制客服操作菜单显示和控制
-    openSpecModal_flash_normal: 0,
-    keyword:'', //门店搜索
-    sec_i:-1,//选中分类门店 下标
+        openSpecModal_flash_normal: 0,
+        keyword:'', //门店搜索
+        sec_i:-1,//选中分类门店 下标
+
+        nav_frontColor: "#ffffff",
+        nav_backgroundColor: "#ffffff",
+        nav_type: 2,  //导航类型
+        istop: 0, //是否置顶风格为1
+        searchbox_transparent: 1,
   },
   //------初始化加载----------
@@ -6,7 +6,7 @@
         "warn": "/components/long_warn/long_warn",
         "serviceCard_recommend": "/components/serviceCard_list/serviceCard_list",
         "privacy_pop": "/components/privacy_pop/privacy_pop",
-        "com_top_nav": "/components/com_top_nav/com_top_nav"
+        "top_nav": "/components/diy_top_nav/diy_top_nav"
     },
     "navigationStyle": "custom"
 }
 \ No newline at end of file
@@ -2,16 +2,20 @@
 <wxs module="filters" src="../../../utils/filter.wxs"></wxs>
 <wxs module="g_filters" src="g_filter.wxs"></wxs>
 <wxs module="tool" src="filter.wxs"></wxs>
-
-<com_top_nav title="{{data.goods_name}}"></com_top_nav>
-
 <!-- 判断隐私是不是显示 -->
 <privacy_pop id="privacy_pop" bind:agree_pri="agree_pri"></privacy_pop>
-
+<!-- 顶开 -->
+<top_nav wx:if="{{!istop || activeCategoryId>0}}" nav_type="{{-1}}" nav_frontColor="{{nav_frontColor}}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
 <!-- 商品内容区域,普通商品,秒杀,拼团 -->
 <block wx:if="{{isshow}}">
 	<view class="container">
-		<view class="type-navbar" style="top:{{top_nav}}px">
+
+		<view class="type-navbar_box">
+			<top_nav id="my-nav" bindclickShare="clickShare" nav_type="{{nav_type}}" is_share="{{false}}"
+					 nav_frontColor="{{nav_frontColor}}" istop="{{(istop && searchbox_transparent && activeCategoryId==0)  ? 1 : 0 }}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+		</view>
+
+		<view class="type-navbar" style="top:{{top_nav-4}}px">
 			<view class="type-box" wx:for="{{categories}}" wx:key="categories">
 				<view bindtap="tabClick" class="type-navbar-item {{activeCategoryId==item.id?'type-item-on':''}}" id="{{item.id}}">
 					{{item.name}}
@@ -2993,3 +2993,10 @@ button.custom-service::after{
   padding-left: 30rpx;
 }
+.type-navbar_box{
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+}
+
@@ -197,6 +197,12 @@ Page({
         user_order_pt_state: 0,
         is_retail_price: 0,
+
+        nav_frontColor: "#ffffff",
+        nav_backgroundColor: "#ffffff",
+        nav_type: 2,  //导航类型
+        istop: 0, //是否置顶风格为1
+        searchbox_transparent: 1,
     },
     //------初始化加载----------
@@ -7,7 +7,7 @@
         "serviceCard_recommend": "/components/serviceCard_list/serviceCard_list",
 		"share": "/components/share/share",
         "privacy_pop": "/components/privacy_pop/privacy_pop",
-        "com_top_nav": "/components/com_top_nav/com_top_nav"
+        "top_nav": "/components/diy_top_nav/diy_top_nav"
     },
     "navigationStyle": "custom"
 }
 \ No newline at end of file
@@ -3,15 +3,21 @@
 <wxs module="g_filters" src="g_filter.wxs"></wxs>
 <wxs module="tool" src="filter.wxs"></wxs>
-<com_top_nav title="{{data.goods_name}}"></com_top_nav>
-
 <!-- 判断隐私是不是显示 -->
 <privacy_pop id="privacy_pop" bind:agree_pri="agree_pri"></privacy_pop>
+<!-- 顶开 -->
+<top_nav wx:if="{{!istop || activeCategoryId>0}}" nav_type="{{-1}}" nav_frontColor="{{nav_frontColor}}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
 <!-- 商品内容区域,普通商品,秒杀,拼团 -->
 <block wx:if="{{isshow}}">
 	<view class="container">
-		<view class="type-navbar" style="top:{{top_nav}}px">
+
+		<view class="type-navbar_box">
+			<top_nav id="my-nav" bindclickShare="clickShare" nav_type="{{nav_type}}" is_share="1"
+					 nav_frontColor="{{nav_frontColor}}" istop="{{(istop && searchbox_transparent && activeCategoryId==0)  ? 1 : 0 }}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+		</view>
+
+		<view class="type-navbar" style="top:{{top_nav-4}}px">
 			<view class="type-box" wx:for="{{categories}}" wx:key="categories">
 				<view bindtap="tabClick" class="type-navbar-item {{activeCategoryId==item.id?'type-item-on':''}}" id="{{item.id}}">
 					{{item.name}}
@@ -286,12 +286,19 @@ Page({
     canBuy: false,
     btnHidden: false,
-	hiddenCS: true,
+  	hiddenCS: true,
     is_get_guide:0,
     keyword:'', //门店搜索
     sec_i:-1,//选中分类门店 下标
     goodInfo_ad:"",//商品详情广告
-    adding:0  //避免重复点击
+    adding:0,  //避免重复点击
+
+    nav_frontColor: "#ffffff",
+    nav_backgroundColor: "#ffffff",
+    nav_type: 2,  //导航类型
+    istop: 0, //是否置顶风格为1
+    searchbox_transparent: 1
+
   },
   //------初始化加载----------
@@ -7,7 +7,7 @@
         "goods_recommend": "/components/goods_list/goods_list",
 		"share": "/components/share/share",
         "privacy_pop": "/components/privacy_pop/privacy_pop",
-        "com_top_nav": "/components/com_top_nav/com_top_nav"
+        "top_nav": "/components/diy_top_nav/diy_top_nav"
     },
     "navigationStyle": "custom"
 }
 \ No newline at end of file
@@ -2,19 +2,25 @@
 <wxs module="filters" src="../../../../utils/filter.wxs"></wxs>
 <wxs module="g_filters" src="g_filter.wxs"></wxs>
 <wxs module="tool" src="filter.wxs"></wxs>
-
-<com_top_nav title="{{gtitle}}"></com_top_nav>
-
+<!--<com_top_nav title="{{gtitle}}"></com_top_nav>-->
 <!-- 判断隐私是不是显示 -->
 <privacy_pop id="privacy_pop" bind:agree_pri="agree_pri"></privacy_pop>
+<top_nav wx:if="{{!istop || activeCategoryId>0}}" nav_type="{{-1}}" nav_frontColor="{{nav_frontColor}}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+
 <!-- 商品内容区域,普通商品,秒杀,拼团 -->
 <block wx:if="{{isshow}}">
   <view class="container">
 		<!-- 幸运购规则 -->
 		<view class="rules" bindtap="showRules">规则</view>
-		<!-- tab选项卡 -->
-    <view class="type-navbar" style="top:{{top_nav}}px">
+
+    <view class="type-navbar_box">
+      <top_nav id="my-nav" bindclickShare="clickShare" nav_type="{{nav_type}}" is_share="1"
+               nav_frontColor="{{nav_frontColor}}" istop="{{(istop && searchbox_transparent && activeCategoryId==0)  ? 1 : 0 }}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+    </view>
+
+	  <!-- tab选项卡 -->
+    <view class="type-navbar" style="top:{{top_nav-4}}px">
       <view class="type-box" wx:for="{{categories}}" wx:key="categories">
         <view bindtap="tabClick" class="type-navbar-item {{activeCategoryId==item.id?'type-item-on':''}}" id="{{item.id}}">{{item.name}}</view>
       </view>
@@ -22,7 +28,6 @@
 		<!-- 商品详情 -->
     <view class="goods-detail">
-			
       <view class="goods-info"  hidden="{{activeCategoryId==0?false:true}}">
 				<!-- 幸运购中奖记录 -->
 				<view class="swiper-container">
@@ -3151,3 +3151,9 @@ button.custom-service::after{
     color: #d60021;
     font-size: 26rpx;
 }
+.type-navbar_box{
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+}
 \ No newline at end of file
@@ -216,7 +216,15 @@ Page({
     keyword:'', //门店搜索
     sec_i:-1,//选中分类门店 下标
-    c_curr_p:1
+    c_curr_p:1,
+
+    //-- 顶部导航的优化 --
+    nav_frontColor: "#ffffff",
+    nav_backgroundColor: "#ffffff",
+    nav_type: 2,  //导航类型
+    istop: 0,     //是否置顶风格为1
+    searchbox_transparent: 1
+
   },
   //------初始化加载----------
@@ -7,7 +7,7 @@
         "goods_recommend": "/components/goods_list/goods_list",
 		"share": "/components/share/share",
         "privacy_pop": "/components/privacy_pop/privacy_pop",
-        "com_top_nav": "/components/com_top_nav/com_top_nav"
+        "top_nav": "/components/diy_top_nav/diy_top_nav"
     },
     "navigationStyle": "custom"
 }
 \ No newline at end of file
@@ -2,16 +2,21 @@
 <wxs module="filters" src="../../../../utils/filter.wxs"></wxs>
 <wxs module="g_filters" src="g_filter.wxs"></wxs>
 <wxs module="tool" src="filter.wxs"></wxs>
-
-<com_top_nav title="{{data.goods_name}}"></com_top_nav>
-
+<!-- <com_top_nav title="{{data.goods_name}}"></com_top_nav> -->
 <!-- 判断隐私是不是显示 -->
 <privacy_pop id="privacy_pop" bind:agree_pri="agree_pri"></privacy_pop>
+<!-- 顶开 -->
+<top_nav wx:if="{{!istop || activeCategoryId>0}}" nav_type="{{-1}}" nav_frontColor="{{nav_frontColor}}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
 <block wx:if="{{show}}">
 <!-- 商品内容区域,普通商品,秒杀,拼团 -->
 <view class="container">
-  <view class="type-navbar" style="top:{{top_nav}}px">
+  <!-- 自定义顶部的优化 -->
+  <view class="type-navbar_box">
+    <top_nav id="my-nav" bindclickShare="clickShare" nav_type="{{nav_type}}" is_share="1"
+             nav_frontColor="{{nav_frontColor}}" istop="{{(istop && searchbox_transparent && activeCategoryId==0)  ? 1 : 0 }}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+  </view>
+  <view class="type-navbar" style="top:{{top_nav-4}}px">
     <view class="type-box" wx:for="{{categories}}" wx:key="categories">
       <view bindtap="tabClick" class="type-navbar-item {{activeCategoryId==item.id?'type-item-on':''}}" id="{{item.id}}">
         {{item.name}}
@@ -3063,4 +3063,11 @@ button.custom-service::after{
 .c-red {
     color: #f23030;
-}
 \ No newline at end of file
+}
+
+.type-navbar_box{
+	position: fixed;
+	top: 0;
+    z-index: 999;
+    width: 100%;
+}
@@ -263,7 +263,14 @@ Page({
     sec_i:-1,//选中分类门店 下标
     goodInfo_ad:'',//商品详情广告
-    c_curr_p:1
+    c_curr_p:1,
+
+    nav_frontColor: "#ffffff",
+    nav_backgroundColor: "#ffffff",
+    nav_type: 2,  //导航类型
+    istop: 0,     //是否置顶风格为1
+    searchbox_transparent: 1
+
   },
   //------初始化加载----------
@@ -7,7 +7,7 @@
         "goods_recommend": "/components/goods_list/goods_list",
 		"share": "/components/share/share",
         "privacy_pop": "/components/privacy_pop/privacy_pop",
-        "com_top_nav": "/components/com_top_nav/com_top_nav"
+        "top_nav": "/components/diy_top_nav/diy_top_nav"
     },
     "navigationStyle": "custom"
 }
 \ No newline at end of file
-<com_top_nav title="{{gtitle}}"></com_top_nav>
+<!-- <com_top_nav title="{{gtitle}}"></com_top_nav> -->
 <import src="../../../../utils/wxParse/wxParse.wxml"></import>
 <wxs module="filters" src="../../../../utils/filter.wxs"></wxs>
 <wxs module="g_filters" src="g_filter.wxs"></wxs>
@@ -6,11 +6,20 @@
 <!-- 判断隐私是不是显示 -->
 <privacy_pop id="privacy_pop" bind:agree_pri="agree_pri"></privacy_pop>
+<!-- 顶开 -->
+<top_nav wx:if="{{!istop || activeCategoryId>0}}" nav_type="{{-1}}" nav_frontColor="{{nav_frontColor}}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+
 <block wx:if="{{show}}">
 <!-- 商品内容区域,普通商品,秒杀,拼团 -->
 <view class="container">
-  <view class="type-navbar" style="top:{{top_nav}}px">
+  <!-- 自定义顶部的优化 -->
+  <view class="type-navbar_box">
+    <top_nav id="my-nav" bindclickShare="clickShare" nav_type="{{nav_type}}" is_share="1"
+             nav_frontColor="{{nav_frontColor}}" istop="{{(istop && searchbox_transparent && activeCategoryId==0)  ? 1 : 0 }}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+  </view>
+
+  <view class="type-navbar" style="top:{{top_nav-4}}px">
     <view class="type-box" wx:for="{{categories}}" wx:key="categories">
       <view bindtap="tabClick" class="type-navbar-item {{activeCategoryId==item.id?'type-item-on':''}}" id="{{item.id}}">
         {{item.name}}
@@ -3019,3 +3019,10 @@ button.custom-service::after{
 .c-red22{
   color: #d60021
 }
+
+.type-navbar_box{
+	position: fixed;
+	top: 0;
+    z-index: 999;
+    width: 100%;
+}
@@ -278,6 +278,13 @@ Page({
         adding:0 , //加入购物车的避免重复
         goodInfo_ad:"",//商品详情广告
+
+        nav_frontColor: "#ffffff",
+        nav_backgroundColor: "#ffffff",
+        nav_type: 2,  //导航类型
+        istop: 0, //是否置顶风格为1
+        searchbox_transparent: 1,
+
       },
       //------初始化加载----------
@@ -1328,6 +1335,13 @@ Page({
         this.setData({
           activeCategoryId: e
         }), 1 == e ? this.tabGoodsContent() : 2 == e && this.tabComment();
+
+        if(e>0){
+          wx.pageScrollTo({
+             scrollTop:0
+          })
+        }
+
       },
       tabClick2: function (t) {
         this.setData({
@@ -1371,6 +1385,7 @@ Page({
           activeCategoryId: 1
         });
+
         if (th.data.cat_name == '') {
           //过去国别，分类，品牌的名称
           i.get("/api/weshop/goodscategory/get/" + o.stoid + "/" + th.data.data.cat_id, {
@@ -9054,4 +9069,31 @@ Page({
                                 },
+                                //滚动监听
+                                onPageScroll(e) {
+                                  this.on_menu_list()
+                                  if (this.data.istop) {
+                                    let num = e.scrollTop
+                                    if (num >= 100) {
+                                      this.setData({
+                                        searchbox_transparent: 0
+                                      })
+                                    }
+                                    if (num < 100) {
+                                      this.setData({
+                                        searchbox_transparent: 1
+                                      })
+                                    }
+                                  }
+                                },
+
+
+                                 //隐藏导航下拉菜单
+                                on_menu_list() {
+                                  let child = this.selectComponent('#my-nav');
+                                  child.hide_menu_fn()
+                                },
+
+
+
       })
 \ No newline at end of file
@@ -8,7 +8,7 @@
 		"share": "/components/share/share",
 		"pro_pop": "/components/promate_pop/promate_pop",
         "privacy_pop": "/components/privacy_pop/privacy_pop",
-         "com_top_nav": "/components/com_top_nav/com_top_nav"
+        "top_nav": "/components/diy_top_nav/diy_top_nav"
     },
     "navigationStyle": "custom"
 }
 \ No newline at end of file
-<com_top_nav title="{{gtitle}}"></com_top_nav>
+<!-- 顶部的优化 -->
+<top_nav wx:if="{{!istop || activeCategoryId>0}}" nav_type="{{-1}}" nav_frontColor="{{nav_frontColor}}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
 <!-- 判断隐私是不是显示 -->
 <privacy_pop id="privacy_pop" bind:agree_pri="agree_pri"></privacy_pop>
@@ -15,11 +16,19 @@
   <view class="container">
     <!-- 拼单规则规则 -->
     <view wx:if="{{prom_type== 6}}" class="rules" bindtap="showRules">规则</view>
-    <view class="type-navbar" style="top:{{top_nav}}px">
+
+    <view class="type-navbar_box">
+          <top_nav id="my-nav" bindclickShare="clickShare" nav_type="{{nav_type}}" is_share="1"
+                   nav_frontColor="{{nav_frontColor}}" istop="{{(istop && searchbox_transparent && activeCategoryId==0)  ? 1 : 0 }}" nav_backgroundColor="{{nav_backgroundColor}}" nav_title="{{gtitle}}"></top_nav>
+    </view>
+
+    <view class="type-navbar" style="top:{{top_nav-4}}px" wx:if="{{activeCategoryId>0 || !istop || ( istop && !searchbox_transparent)}}" >
       <view class="type-box" wx:for="{{categories}}" wx:key="id">
         <view bindtap="tabClick" class="type-navbar-item {{activeCategoryId==item.id?'type-item-on':''}}" id="{{item.id}}">{{item.name}}</view>
       </view>
     </view>
+
+    
     <view class="goods-detail">
       <view class="goods-info" style="position: relative;" hidden="{{activeCategoryId==0?false:true}}">
@@ -4043,4 +4043,11 @@ button.custom-service::after {
   border-radius: 30rpx;
   border: 2rpx solid rgb(238, 238, 238);
   padding-left: 30rpx;
+}
+
+.type-navbar_box{
+	position: fixed;
+	top: 0;
+     z-index: 9999;
+     width: 100%;
 }
 \ No newline at end of file