横向标签

src/components/basicTool/transverse-label/main.json

+{
+  "usingComponents": {
+    "van-tabs": "/static/vant/tabs/index",
+    "van-tab": "/static/vant/tab/index",
+    "banner": "/static/nativeComponents/Banner/index",
+    "goods-list": "/static/nativeComponents/GoodsList/index",
+    "time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
+    "waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
+    "van-button": "/static/vant/button/index",
+    "area-navigation":"/static/nativeComponents/AreaNavigation/index",
+    "cube-nav":"/static/nativeComponents/CubeNav/index",
+    "float-button":"/static/nativeComponents/FloatButton/index",
+    "goods-search":"/static/nativeComponents/GoodsSearch/index",
+    "notice":"/static/nativeComponents/Notice/index",
+    "pop-up":"/static/nativeComponents/PopUp/index",
+    "share-popup":"/static/nativeComponents/SharePopup/index",
+    "speedy-nav":"/static/nativeComponents/SpeedyNav/index",
+    "video-player":"/static/nativeComponents/VideoPlayer/index"
+  },
+  "enablePullDownRefresh":true,
+  "styleIsolation": "apply-shared"
+}
\ No newline at end of file

src/pages/home/index.vue

@@ -66,6 +66,9 @@
           <div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
 			      <official-account></official-account>
           </div>
+          <div v-if="item.componentCode == 'transverse-label' && item.componentInfo.visible == 1">
+			      <transverse-label :datas="item" :componentIndex="index"></transverse-label>
+          </div>
         </div>
 
       <bottomCont></bottomCont>
@@ -95,6 +98,7 @@ import links from '@/components/basicTool/link/index.vue'
 import interval from '@/components/basicTool/interval/index.vue'
 import partition from '@/components/basicTool/partition/index.vue'
 import shopPopup from '@/components/basicTool/shop-popup/index.vue'
+import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
 import text from '@/components/content/text'
 import imgText from '@/components/content/imgText'
 import coupon from '@/components/activity/coupon'
@@ -125,7 +129,8 @@ export default {
     'text-text':text,
     'img-text':imgText,
     coupon,
-    integralTurntable
+    integralTurntable,
+    transverseLabel
   },
   onShareAppMessage(res) {
     let shareVal={};

src/pages/home/main.json

 {
   "usingComponents": {
+    "van-tabs": "/static/vant/tabs/index",
+    "van-tab": "/static/vant/tab/index",
     "banner": "/static/nativeComponents/Banner/index",
     "goods-list": "/static/nativeComponents/GoodsList/index",
     "time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",

static/nativeComponents/GoodsList/index.js

@@ -19,7 +19,8 @@ const componentOptions = {
     classificationLoadNum: 10,
     queryProductInfoLoading: false,
     loading: false,
-    finished: false
+    finished: false,
+    goodsList:[],
   },
   // 数据监听器
   observers: {},
@@ -32,9 +33,7 @@ const componentOptions = {
     moved() {},
     detached() {}
   },
-  attached() {
-    
-  },
+  attached() {},
   definitionFilter() {},
   // 页面生命周期
   pageLifetimes: {
@@ -226,7 +225,7 @@ const componentOptions = {
         item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
         item.minPrice = Number(item.minPrice).toFixed(2);
         item.qty = Number(item.qty);
-        item.saleQty = item.saleQty?Number(item.saleQty):1;
+        item.saleQty = item.saleQty ? Number(item.saleQty) : 1;
         item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
         item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
           ? Number(item.minPriceAfterRecommendedCardPriceTable)
@@ -245,7 +244,8 @@ const componentOptions = {
         }
       });
       this.setData({
-        "datas.componentData.goodsList": goodsList
+        "datas.componentData.goodsList": goodsList,
+        goodsList
       });
       if (type == 1) {
         // 初始化
@@ -342,7 +342,12 @@ const componentOptions = {
       this.getProductList(1, 2);
     },
     viewMore() {
-      let { goodsType,style, categoryName, categoryId } = this.data.datas.componentData;
+      let {
+        goodsType,
+        style,
+        categoryName,
+        categoryId
+      } = this.data.datas.componentData;
       let linkVal = "";
       if (goodsType != 1) {
         if (style == "list") {
@@ -355,7 +360,7 @@ const componentOptions = {
       }
       $themeToLink({
         type: 1,
-        link:linkVal,
+        link: linkVal
       });
     }
   }

static/nativeComponents/GoodsList/index.wxml

@@ -25,14 +25,14 @@
 		 style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
 		>
 			<view
-			 wx:for="{{datas.componentData.goodsList}}"
+			 wx:for="{{goodsList}}"
 			 wx:key="index"
 			 class="goods-item"
 			 style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
 			>
 				<goods-item
 				 datas="{{datas}}"
-				 items="{{datas.componentData.goodsList[index]}}"
+				 items="{{goodsList[index]}}"
 				 indexs="{{index}}"
 				></goods-item>
 			</view>

static/nativeComponents/TimeLimitedDiscount/index.js

@@ -123,15 +123,22 @@ const componentOptions = {
     days: 0,
     hours: 0,
     minute: 0,
-    second: 0
+    second: 0,
+    goodsList:[],
   },
   // 数据监听器
   observers: {},
   // 组件方法
   methods: {
     init() {
-      let { goodsList, activityCode, selectActivityValue, dimension } = this.data.datas.componentData;
+      let {
+        goodsList,
+        activityCode,
+        selectActivityValue,
+        dimension
+      } = this.data.datas.componentData;
       let { deleteFlag, endTimeData } = this.data;
+      let _this = this;
       if (activityCode == "") {
         return;
       }
@@ -146,13 +153,14 @@ const componentOptions = {
           if (dimension == 0 && copyData.goodsItems.length == 0) {
             deleteFlag = true;
           }
-          endTimeData = new Date(copyData.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
+          endTimeData =
+            new Date(copyData.endTime.replace(/-/g, "/")).getTime() -
+            new Date().getTime();
 
           console.log(endTimeData, "----------------------150");
           this.setData({ endTime: endTimeData });
-          let _this = this;
           this.setData({ deleteFlag });
-          console.log("------------155")
+          console.log("------------155");
           // setTimeout(() => {
           //   xcsoft.countdown(_this.data.datas.componentData.endTime, function (time) {
           //     console.log("--------------157")
@@ -171,10 +179,11 @@ const componentOptions = {
           // }, 100);
           copyData.goodsItems.forEach((item, index) => {
             item.productImgUrl = DFSImg(item.imgUrl);
+            item.productImgUrl1 = DFSImg(item.imgUrl);
             item.minPrice = parseFloat(item.discountPrice);
             item.maxPrice = parseFloat(item.salePrice);
           });
-          this.setData({
+          _this.setData({
             goodsList: copyData.goodsItems,
             selectActivityValue: copyData.singleItemActivityName
           });
@@ -191,30 +200,44 @@ const componentOptions = {
         });
       }
       if (ids.length == 0) {
-        this.setData({ isLoading:false });
+        this.setData({ isLoading: false });
         return;
       }
       promoteApi.query_single_item_activity_list_by_ids(ids).then(res => {
         if (res.data.code == 200) {
-          let list = res.data.data ||[];
+          let list = res.data.data || [];
           if (list.length > 0) {
             let hideNum = 0;
             list.forEach((item, index) => {
-              if (new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime() <= 0) {
+              if (
+                new Date(item.endTime.replace(/-/g, "/")).getTime() -
+                  new Date().getTime() <=
+                0
+              ) {
                 item.isEnd = true;
                 hideNum += 1;
               } else {
                 item.isEnd = false;
               }
-              item.startTimeTimeStamp = new Date(item.startTime.replace(/-/g, "/")).getTime() - new Date().getTime();
-              item.endTimeTimeStamp = new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
-              item.singleItemActivityCoverImage = DFSImg(item.singleItemActivityCoverImage);
-              item.isStart = new Date(item.startTime.replace(/-/g, "/")).getTime() > new Date().getTime() ? true : false;
-              console.log(item.isEnd,'-----------------------213');
-            })
+              item.startTimeTimeStamp =
+                new Date(item.startTime.replace(/-/g, "/")).getTime() -
+                new Date().getTime();
+              item.endTimeTimeStamp =
+                new Date(item.endTime.replace(/-/g, "/")).getTime() -
+                new Date().getTime();
+              item.singleItemActivityCoverImage = DFSImg(
+                item.singleItemActivityCoverImage
+              );
+              item.isStart =
+                new Date(item.startTime.replace(/-/g, "/")).getTime() >
+                new Date().getTime()
+                  ? true
+                  : false;
+              console.log(item.isEnd, "-----------------------213");
+            });
             this.setData({ "datas.componentData.actList": list });
             if (hideNum == actList.length) {
-              this.setData({ hideAll:true });
+              this.setData({ hideAll: true });
             }
           }
         }
@@ -224,12 +247,28 @@ const componentOptions = {
       this.setData({ timeData: e.detail });
     },
     onclickProduct(e) {
-      console.log(e.currentTarget.dataset.items,'-------------------------226');
-      let { terminalProductId, terminalGoodsMixId, productId } = e.currentTarget.dataset.items;
-      $themeToLink({ type: 1, link: `/goods/${productId}?limitedLime=true&endTime=${this.data.datas.componentData.endTime}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}` });
+      console.log(
+        e.currentTarget.dataset.items,
+        "-------------------------226"
+      );
+      let {
+        terminalProductId,
+        terminalGoodsMixId,
+        productId
+      } = e.currentTarget.dataset.items;
+      $themeToLink({
+        type: 1,
+        link: `/goods/${productId}?limitedLime=true&endTime=${
+          this.data.datas.componentData.endTime
+        }&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}`
+      });
     },
     onclickOrder(e) {
-      let { terminalGoodsMixId, terminalGoodsId, goodsId } = e.currentTarget.dataset.items;
+      let {
+        terminalGoodsMixId,
+        terminalGoodsId,
+        goodsId
+      } = e.currentTarget.dataset.items;
       $themeToLink({
         type: 1,
         link: `/order/orderConfirm?productGoodsMixId=${terminalGoodsMixId}&productGoodsId=${terminalGoodsId}&goodsId=${goodsId}&qty=1&goodsString=null`

static/nativeComponents/TimeLimitedDiscount/index.wxml

@@ -44,11 +44,11 @@
 						<view
 						 class="goodsPicture"
 						 bindtap="onclickProduct"
-						 data-items="{{datas.componentData.goodsList[index]}}"
+						 data-items="{{goodsList[index]}}"
 						 style="padding:{{datas.componentData.imgSize}}"
 						>
-							<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
-							<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
+							<image mode="widthFix" src="{{goodsList[index]['productImgUrl1']}}"></image>
+							<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
 								<view class="cover">
 									<text>商品</text>
 									<text>售罄</text>
@@ -58,20 +58,20 @@
 					</view>
 					<view class="info">
 						<view class="name">
-							{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['productName']:'名称'}}
+							{{goodsList[index]!=null?goodsList[index]['productName']:'名称'}}
 						</view>
 						<view class="allPrice">
 							<view>
 								<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
 								<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
 								<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
-								<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
-								<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
+								<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
+								<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
 							</view>
 							<view
 							 class="btn"
 							 style="background:#333;"
-							 data-items="{{datas.componentData.goodsList[index]}}"
+							 data-items="{{goodsList[index]}}"
 							 catchtap="onclickOrder"
 							>
 								立即抢购
@@ -86,20 +86,20 @@
 	<view class="goods1" wx:elif="{{datas.componentData.style==='across'}}">
 		<view
 		 class="goods-item"
-		 wx:for="{{datas.componentData.goodsList}}"
+		 wx:for="{{goodsList}}"
 		 wx:key="index"
 		>
 			<view class="items">
 				<view class="imgBox slidebox2">
 					<view
 					 class="goodsPicture"
-					 wx:if="{{datas.componentData.goodsList[index]!=null}}"
+					 wx:if="{{goodsList[index]!=null}}"
 					 style="padding:{{datas.componentData.imgSize}}"
-					 data-items="{{datas.componentData.goodsList[index]}}"
+					 data-items="{{goodsList[index]}}"
 					 bindtap="onclickProduct"
 					>
-						<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
-						<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
+						<image mode="widthFix" src="{{goodsList[index]['productImgUrl']}}"></image>
+						<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&goodsList[index].saleQty-0<=0}}">
 							<view class="cover">
 								<text>商品</text>
 								<text>售罄</text>
@@ -111,8 +111,8 @@
 					<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
 					<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
 					<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
-					<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
-					<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
+					<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
+					<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
 				</view>
 			</view>
 		</view>

static/nativeComponents/TransverseLabel/ComponentsList/index.js

+const componentOptions = {
+  // 组件选项
+  options: {
+    multipleSlots: true
+  },
+  behaviors: [],
+  properties: {
+    datas: {
+      type: Object
+    }
+  },
+  // 组件数据
+  data: {
+    isPageHidden: false // 页面是否处于隐藏状态
+  },
+  // 数据监听器
+  observers: {},
+  // 组件方法
+  methods: {
+    init() {}
+  },
+  // 组件生命周期
+  lifetimes: {
+    created() {},
+    attached() {
+      this.init();
+    },
+    ready() {},
+    moved() {},
+    detached() {}
+  },
+  definitionFilter() {},
+  // 页面生命周期
+  pageLifetimes: {
+    // 页面被展示
+    show() {
+      const { isPageHidden } = this.data;
+
+      // show事件发生前，页面不是处于隐藏状态时
+      if (!isPageHidden) {
+        return;
+      }
+
+      // 重新执行定时器等操作
+    },
+    // 页面被隐藏
+    hide() {
+      this.setData({
+        isPageHidden: true
+      });
+
+      // 清除定时器等操作
+    },
+    // 页面尺寸变化时
+    resize() {}
+  }
+};
+
+Component(componentOptions)

static/nativeComponents/TransverseLabel/ComponentsList/index.json

+{
+  "component": true,
+  "usingComponents": {
+    "banner": "/static/nativeComponents/Banner/index",
+    "goods-list": "/static/nativeComponents/GoodsList/index",
+    "time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
+    "waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
+    "van-button": "/static/vant/button/index",
+    "area-navigation": "/static/nativeComponents/AreaNavigation/index",
+    "cube-nav": "/static/nativeComponents/CubeNav/index",
+    "float-button": "/static/nativeComponents/FloatButton/index",
+    "goods-search": "/static/nativeComponents/GoodsSearch/index",
+    "notice": "/static/nativeComponents/Notice/index",
+    "pop-up": "/static/nativeComponents/PopUp/index",
+    "share-popup": "/static/nativeComponents/SharePopup/index",
+    "speedy-nav": "/static/nativeComponents/SpeedyNav/index",
+    "video-player": "/static/nativeComponents/VideoPlayer/index",
+    "transverse-label": "/static/nativeComponents/TransverseLabel/index"
+  }
+}
\ No newline at end of file

static/nativeComponents/TransverseLabel/ComponentsList/index.wxml

+<!-- 组件集合 -->
+<view class="ComponentsList">
+	<block wx:for="{{datas}}">
+		<block wx:if="{{item.componentCode=='banner' && item.componentInfo.visible == 1}}">
+			<banner datas="{{item}}"></banner>
+		</block>
+		<block wx:elif="{{item.componentCode=='goods-list' && item.componentInfo.visible == 1}}">
+			<goods-list class="goodsListItem" datas="{{item}}"></goods-list>
+		</block>
+		<block wx:elif="{{item.componentCode=='area-navigation' && item.componentInfo.visible == 1}}">
+			<area-navigation datas="{{item}}" :changeLocation="changeLocation"></area-navigation>
+		</block>
+		<block wx:elif="{{item.componentCode=='cube-nav' && item.componentInfo.visible == 1}}">
+			<cube-nav datas="{{item}}"></cube-nav>
+		</block>
+		<block wx:elif="{{item.componentCode=='time-limited-discount' && item.componentInfo.visible == 1}}">
+			<time-limited-discount datas="{{item}}"></time-limited-discount>
+		</block>
+		<block wx:elif="{{item.componentCode=='links' && item.componentInfo.visible == 1}}">
+			<links datas="{{item}}"></links>
+		</block>
+		<block wx:elif="{{item.componentCode=='interval' && item.componentInfo.visible == 1}}">
+			<interval datas="{{item}}"></interval>
+		</block>
+		<block wx:elif="{{item.componentCode=='partition' && item.componentInfo.visible == 1}}">
+			<partition datas="{{item}}"></partition>
+		</block>
+		<block wx:elif="{{item.componentCode=='shop-popup' && item.componentInfo.visible == 1}}">
+			<shop-popup datas="{{item}}"></shop-popup>
+		</block>
+		<block wx:elif="{{item.componentCode=='float-button' && item.componentInfo.visible == 1}}">
+			<float-button datas="{{item}}"></float-button>
+		</block>
+		<block wx:elif="{{item.componentCode=='text-text' && item.componentInfo.visible == 1}}">
+			<text-text datas="{{item}}"></text-text>
+		</block>
+		<block wx:elif="{{item.componentCode=='img-text' && item.componentInfo.visible == 1}}">
+			<img-text datas="{{item}}"></img-text>
+		</block>
+		<block wx:elif="{{item.componentCode=='goods-search' && item.componentInfo.visible == 1}}">
+			<goods-search datas="{{item}}"></goods-search>
+		</block>
+		<block wx:elif="{{item.componentCode=='notice' && item.componentInfo.visible == 1}}">
+			<notice datas="{{item}}"></notice>
+		</block>
+		<block wx:elif="{{item.componentCode=='pop-up' && item.componentInfo.visible == 1}}">
+			<pop-up datas="{{item}}"></pop-up>
+		</block>
+		<block wx:elif="{{item.componentCode=='coupon' && item.componentInfo.visible == 1}}">
+			<coupon datas="{{item}}"></coupon>
+		</block>
+		<block wx:elif="{{item.componentCode=='integral-turntable' && item.componentInfo.visible == 1}}">
+			<integralTurntable datas="{{item}}"></integralTurntable>
+		</block>
+		<block wx:elif="{{item.componentCode=='speedy-nav' && item.componentInfo.visible == 1}}">
+			<speedy-nav datas="{{item}}"></speedy-nav>
+		</block>
+		<block wx:elif="{{item.componentCode=='video-player' && item.componentInfo.visible == 1}}">
+			<video-player datas="{{item}}" :indexs="index"></video-player>
+		</block>
+		<block wx:elif="{{item.componentCode=='official-account' && item.componentInfo.visible == 1}}">
+			<official-account></official-account>
+		</block>
+	</block>
+</view>
+

static/nativeComponents/TransverseLabel/ComponentsList/index.wxss

+
+

static/nativeComponents/TransverseLabel/index.js

+const componentOptions = {
+  // 组件选项
+  options: {
+    multipleSlots: true,
+    styleIsolation: "shared"
+  },
+  behaviors: [],
+  properties: {
+    datas: {
+      type: Object
+    }
+  },
+  // 组件数据
+  data: {
+    isPageHidden: false, // 页面是否处于隐藏状态
+    active: 0
+  },
+  // 数据监听器
+  observers: {},
+  // 组件方法
+  methods: {
+    init() {},
+    onChange(event) {}
+  },
+  // 组件生命周期
+  lifetimes: {
+    created() {},
+    attached() {
+      this.init();
+    },
+    ready() {},
+    moved() {},
+    detached() {}
+  },
+  definitionFilter() {},
+  // 页面生命周期
+  pageLifetimes: {
+    // 页面被展示
+    show() {
+      const { isPageHidden } = this.data;
+
+      // show事件发生前，页面不是处于隐藏状态时
+      if (!isPageHidden) {
+        return;
+      }
+
+      // 重新执行定时器等操作
+    },
+    // 页面被隐藏
+    hide() {
+      this.setData({
+        isPageHidden: true
+      });
+
+      // 清除定时器等操作
+    },
+    // 页面尺寸变化时
+    resize() {}
+  }
+};
+
+Component(componentOptions)

static/nativeComponents/TransverseLabel/index.json

+{
+  "component": true,
+  "usingComponents": {
+    "van-tabs":"/static/vant/tabs/index",
+    "van-tab":"/static/vant/tab/index",
+    "components-list":"./ComponentsList/index"
+  }
+}

static/nativeComponents/TransverseLabel/index.wxml

+<view class="TransverseLabel" style="--defaultTabTextColor:{{datas.componentData.defaultTabTextColor}};--defaultTabTextSize:{{datas.componentData.defaultTabTextSize*2}}rpx;--defaultTabBackgroundColor:{{datas.componentData.defaultTabBackgroundColor}};--defaultTabUnderlineColor:{{datas.componentData.defaultTabUnderlineColor}};--selectTabTextColor:{{datas.componentData.selectTabTextColor}};--selectTabTextSize:{{datas.componentData.selectTabTextSize*2}}rpx;--selectTabBackgroundColor:{{datas.componentData.selectTabBackgroundColor}};--selectTabUnderlineColor:{{datas.componentData.selectTabUnderlineColor}};--tabBackgroundColor:{{datas.componentData.tabBackgroundColor}};">
+	<van-tabs
+	 custom-class="vanTabs {{datas.componentData.tabStyle==1?'tabStyle1':'tabStyle2'}}"
+	 nav-class="tabNav tabLayout{{datas.componentData.tabLayout}}"
+	 tab-class="vanTab"
+	 tab-active-class="vanActiveTab"
+	 active="{{ active }}"
+	 animated="{{true}}"
+	 sticky="{{datas.componentData.stickyTop}}"
+	 swipeable="{{true}}"
+	 bind:change="onChange"
+	 line-width="{{50}}"
+	 color="{{'#333'}}"
+	>
+		<van-tab
+		 title="{{item.title}}"
+		 wx:for="{{datas.componentData.tabList}}"
+		 wx:if="{{item.visible==undefined||item.visible==1}}"
+		>
+			<components-list datas="{{item.contentList}}"></components-list>
+		</van-tab>
+	</van-tabs>
+</view>
+

static/nativeComponents/TransverseLabel/index.wxss

+.vanTabs{
+  position: relative;
+}
+.vanTab .van-ellipsis{
+  padding: 0 20rpx;
+  margin: 0 12rpx;
+}
+.van-tab {
+  position: relative;
+  z-index: 98;
+}
+/* 样式1 */
+.tabStyle1 .van-tabs__line {
+  width: 100%;
+  height: 30px;
+  bottom: 7px;
+  border-radius: 38px;
+}
+.tabStyle1 .tabTitle {
+  color: var(--main-color);
+}
+.tabStyle1 .selectTitle {
+  color: #fff;
+}
+.tabStyle1 .defaultTabTextSize {
+  font-size: var(--defaultTabTextSize);
+}
+.tabStyle1 .defaultTabTextColor {
+  color: var(--defaultTabTextColor);
+}
+.tabStyle1 .selectTabTextSize {
+  font-size: var(--selectTabTextSize);
+}
+.tabStyle1 .selectTabTextColor {
+  color: var(--selectTabTextColor);
+}
+/* 样式2 */
+.tabStyle2 .van-tabs__line{
+  
+}
+/* 标签背景色 */
+.tabNav {
+  background: var(--tabBackgroundColor);
+}
+/* 布局 */
+.tabLayout1 .van-tab{
+  flex: none;
+}
+
+.tabLayout2{
+  justify-content: center;
+}
+.tabLayout2 .van-tab{
+  flex: none;
+}
\ No newline at end of file

static/vant/tabs/index.js

@@ -10,11 +10,11 @@ import {
 import { isDef } from '../common/validator';
 VantComponent({
   mixins: [touch],
-  classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
+  classes: ["nav-class", "tab-class", "tab-active-class", "line-class"],
   relation: {
-    name: 'tab',
-    type: 'descendant',
-    current: 'tabs',
+    name: "tab",
+    type: "descendant",
+    current: "tabs",
     linked(target) {
       target.index = this.children.length - 1;
       this.updateTabs();
@@ -25,7 +25,7 @@ VantComponent({
         return child;
       });
       this.updateTabs();
-    },
+    }
   },
   props: {
     sticky: Boolean,
@@ -40,16 +40,24 @@ VantComponent({
         this.children.forEach((child, index) =>
           child.updateRender(index === this.data.currentIndex, this)
         );
-      },
+      }
     },
     lineWidth: {
       type: [String, Number],
       value: 40,
-      observer: 'resize',
+      // observer: "resize"
+    },
+    lineLengthType: {
+      type: [String, Number],
+      value: 1  // 1默认自适应 2短自适应 3 固定宽度取值lineWidth
+    },
+    linePosition: {
+      type: [String, Number],
+      value: 1  // 1默认右对齐 2居中 3铺满
     },
     lineHeight: {
       type: [String, Number],
-      value: -1,
+      value: -1
     },
     active: {
       type: [String, Number],
@@ -58,41 +66,41 @@ VantComponent({
         if (name !== this.getCurrentName()) {
           this.setCurrentIndexByName(name);
         }
-      },
+      }
     },
     type: {
       type: String,
-      value: 'line',
+      value: "line"
     },
     ellipsis: {
       type: Boolean,
-      value: true,
+      value: true
     },
     duration: {
       type: Number,
-      value: 0.3,
+      value: 0.3
     },
     zIndex: {
       type: Number,
-      value: 1,
+      value: 1
     },
     swipeThreshold: {
       type: Number,
       value: 5,
       observer(value) {
         this.setData({
-          scrollable: this.children.length > value || !this.data.ellipsis,
+          scrollable: this.children.length > value || !this.data.ellipsis
         });
-      },
+      }
     },
     offsetTop: {
       type: Number,
-      value: 0,
+      value: 0
     },
     lazyRender: {
       type: Boolean,
-      value: true,
-    },
+      value: true
+    }
   },
   data: {
     tabs: [],
@@ -101,24 +109,35 @@ VantComponent({
     currentIndex: 0,
     container: null,
     skipTransition: true,
-    lineOffsetLeft: 0,
+    lineOffsetLeft: 0
   },
   mounted() {
+    this.getElementInfo();
     requestAnimationFrame(() => {
       this.setData({
-        container: () => this.createSelectorQuery().select('.van-tabs'),
+        container: () => this.createSelectorQuery().select(".van-tabs")
       });
       this.resize(true);
       this.scrollIntoView();
     });
   },
   methods: {
+    getElementInfo() {
+      let that = this;
+      wx
+        .createSelectorQuery()
+        .in(this)
+        .selectAll(".van-tab")
+        .boundingClientRect()
+        .exec((rect = []) =>
+          that.triggerEvent("getEleInfo", { rect, vanTabsThis: this })
+        );
+    },
     updateTabs() {
       const { children = [], data } = this;
       this.setData({
-        tabs: children.map((child) => child.data),
-        scrollable:
-          this.children.length > data.swipeThreshold || !data.ellipsis,
+        tabs: children.map(child => child.data),
+        scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
       });
       this.setCurrentIndexByName(data.active || this.getCurrentName());
     },
@@ -131,18 +150,18 @@ VantComponent({
       this.$emit(eventName, {
         index: currentChild.index,
         name: currentChild.getComputedName(),
-        title: currentChild.data.title,
+        title: currentChild.data.title
       });
     },
     onTap(event) {
       const { index } = event.currentTarget.dataset;
       const child = this.children[index];
       if (child.data.disabled) {
-        this.trigger('disabled', child);
+        this.trigger("disabled", child);
       } else {
         this.setCurrentIndex(index);
         nextTick(() => {
-          this.trigger('click');
+          this.trigger("click");
         });
       }
     },
@@ -150,7 +169,7 @@ VantComponent({
     setCurrentIndexByName(name) {
       const { children = [] } = this;
       const matched = children.filter(
-        (child) => child.getComputedName() === name
+        child => child.getComputedName() === name
       );
       if (matched.length) {
         this.setCurrentIndex(matched[0].index);
@@ -181,9 +200,9 @@ VantComponent({
       nextTick(() => {
         this.resize();
         this.scrollIntoView();
-        this.trigger('input');
+        this.trigger("input");
         if (shouldEmitChange) {
-          this.trigger('change');
+          this.trigger("change");
         }
       });
     },
@@ -194,26 +213,55 @@ VantComponent({
       }
     },
     resize(skipTransition = false) {
-      if (this.data.type !== 'line') {
+      console.log("resize")
+      if (this.data.type !== "line") {
         return;
       }
       const { currentIndex, ellipsis } = this.data;
       Promise.all([
-        getAllRect(this, '.van-tab'),
-        getRect(this, '.van-tabs__line'),
+        getAllRect(this, ".van-tab"),
+        getRect(this, ".van-tabs__line")
       ]).then(([rects = [], lineRect]) => {
         const rect = rects[currentIndex];
         if (rect == null) {
           return;
         }
-        let lineOffsetLeft = rects
+        let lineWidths = 0;
+        let lineOffsetLeft = 0;
+        if (this.data.lineLengthType == 1) {
+          if (this.data.linePosition == 2) {
+            lineOffsetLeft = rect.left;
+          } else {
+            lineOffsetLeft = rects
+              .slice(0, currentIndex)
+              .reduce((prev, curr) => prev + curr.width, 0);
+            lineOffsetLeft += 8;
+          }
+          lineWidths = rect.width;
+        } else if (this.data.lineLengthType == 2) {
+          // 宽度*80%
+          if (this.data.linePosition == 2) {
+            lineOffsetLeft = rect.left+rect.width*0.2;
+          } else {
+            lineOffsetLeft = rects
               .slice(0, currentIndex)
               .reduce((prev, curr) => prev + curr.width, 0);
-        lineOffsetLeft +=
-          (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
+            lineOffsetLeft += rect.width * 0.2;
+            lineOffsetLeft += 8;
+          }
+          lineWidths = rect.width * 0.6;
+        } else {
+          // 有问题暂不支持固定宽度
+          // lineOffsetLeft = rects
+          //   .slice(0, currentIndex)
+          //   .reduce((prev, curr) => prev + curr.width, 0);
+          // lineOffsetLeft += this.data.lineWidth / 2;
+          // lineWidths = this.data.lineWidth;
+        }
         this.setData({
+          lineWidth: lineWidths,
           lineOffsetLeft,
-          skipTransition,
+          skipTransition
         });
       });
     },
@@ -224,20 +272,20 @@ VantComponent({
         return;
       }
       Promise.all([
-        getAllRect(this, '.van-tab'),
-        getRect(this, '.van-tabs__nav'),
+        getAllRect(this, ".van-tab"),
+        getRect(this, ".van-tabs__nav")
       ]).then(([tabRects, navRect]) => {
         const tabRect = tabRects[currentIndex];
         const offsetLeft = tabRects
           .slice(0, currentIndex)
           .reduce((prev, curr) => prev + curr.width, 0);
         this.setData({
-          scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
+          scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
         });
       });
     },
     onTouchScroll(event) {
-      this.$emit('scroll', event.detail);
+      this.$emit("scroll", event.detail);
     },
     onTouchStart(event) {
       if (!this.data.swipeable) return;
@@ -252,7 +300,7 @@ VantComponent({
       if (!this.data.swipeable) return;
       const { direction, deltaX, offsetX } = this;
       const minSwipeDistance = 50;
-      if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
+      if (direction === "horizontal" && offsetX >= minSwipeDistance) {
         const index = this.getAvaiableTab(deltaX);
         if (index !== -1) {
           this.setCurrentIndex(index);
@@ -278,6 +326,6 @@ VantComponent({
         }
       }
       return -1;
-    },
-  },
+    }
+  }
 });