轮播滑动开发

static/nativeComponents/GoodsList/GoodsItem/index.js

@@ -29,6 +29,7 @@ const componentOptions = {
     isBeginSecKill: false, // 是否开始秒杀
     isLessTenHour: false, // 秒杀活动小于 10 小时
     currentSecKillInfo: {}, // 当前秒杀信息
+    priceTextStyle: 'flex-start'
   },
   // 数据监听器
   observers: {
@@ -60,6 +61,12 @@ const componentOptions = {
         imgFillType
       })
       log.info('datas');
+      const textStyle = {
+        'left': 'flex-start',
+        'center': 'center',
+        'right': 'flex-end'
+      };
+      this.setData({ priceTextStyle: textStyle[this.data.datas.componentData['priceTextAlign']] })
     },
     // 获取当前秒杀信息
     getSecKillInfo(val) {

static/nativeComponents/GoodsList/GoodsItem/index.wxml

@@ -117,7 +117,7 @@
 			<view class="itemNo" wx:if="{{datas.componentData['itemNo']}}">{{items.productCode}}</view>
 			<view class="info-top flex">
 				<view
-				 class="name"
+				 class="{{datas.componentData.style === 'swipe' ? 'line-clamp1' : 'name'}}"
 				 wx:if="{{datas.componentData['nameShow']}}"
 				 style="color:{{datas.componentData['nameColor']}};font-weight:{{datas.componentData['nameFontWeight']}};font-size:{{datas.componentData['nameFontSize']}}em;"
 				>
@@ -158,7 +158,7 @@
 			<!-- 底部 -->
 			<view class="bottom" wx:if="{{datas.componentData['goodsType'] !=1}}">
 				<!-- 价格 -->
-				<view class="priceItem flex" style="flex-wrap:{{items && items.secondKillActivityInfoGoodsList ? 'wrap' : 'nowrap'}}">
+				<view class="priceItem flex" style="flex-wrap:{{items && items.secondKillActivityInfoGoodsList ? 'wrap' : 'nowrap'}};justify-content:{{priceTextStyle}}">
 					<!-- 秒杀展示 -->
           <block wx:if="{{items && items.secondKillActivityInfoGoodsList}}">
             <view class="flex" style="margin: 12rpx 0 6rpx;align-items: center;width: 100%;">

static/nativeComponents/GoodsList/GoodsItem/index.wxss

@@ -418,3 +418,10 @@ margin-right: 8rpx;
   font-weight: 600;
   margin-top: 12rpx;
 }
+.line-clamp1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
\ No newline at end of file

static/nativeComponents/GoodsList/index.js

@@ -68,6 +68,8 @@ const componentOptions = {
     randomNumber: "",
     selectScreen: false, // 筛选选中状态
     clientHeight: 0, //窗口高度
+    swipeInfo: [],
+    currentSwiperIndex: 0
   },
   // 数据监听器
   observers: {},
@@ -233,6 +235,26 @@ const componentOptions = {
           this.getInterList(2);
         }
       }
+      this.getSwipeLen();
+    },
+    handleSwipeChange(e) {
+      this.setData({ currentSwiperIndex: e.detail.current })
+    },
+    getSwipeLen() {
+      const goodsListLen = this.data.datas.componentData.goodsList.length || 0;
+      const len = Math.ceil((goodsListLen / this.data.datas.componentData.columnNum));
+      const result = [];
+      for (let i = 0; i < len; i++) {
+        const itemLen = this.getSwipeItemLen(i);
+        result.push(itemLen)
+      }
+      this.setData({ swipeInfo: result });
+    },
+    getSwipeItemLen(index) {
+      const goodsListLen = this.data.datas.componentData.goodsList.length || 0;
+      const columnNum = this.data.datas.componentData.columnNum;
+      const total = (index + 1) * columnNum;
+      return total > goodsListLen ? goodsListLen - (index * columnNum) : columnNum
     },
     getProductList(code, type) {
       let { goodsSort,attributeValueList } = this.data.datas.componentData;

static/nativeComponents/GoodsList/index.wxml

@@ -149,6 +149,26 @@
     <view class="goods-heap-Item" wx:if="{{datas.componentData.style==='heap'}}">
       <heap-item datas="{{datas}}"></heap-item>
     </view>
+    <view wx:if="{{datas.componentData.style === 'swipe'}}">
+      <swiper bindchange="handleSwipeChange">
+        <block wx:for="{{swipeInfo}}">
+          <swiper-item style="display: grid;gap:{{datas.componentData.proGap*2}}rpx;grid-template-columns:repeat({{datas.componentData.columnNum}}, 1fr)">
+            <view wx:for="{{item}}" wx:for-index="indey">
+              <goods-item
+                datas="{{datas}}"
+                items="{{datas.componentData.goodsList[index * datas.componentData.columnNum + indey]}}"
+                indexs="{{index}}"
+              ></goods-item>
+            </view>
+          </swiper-item>
+        </block>
+      </swiper>
+      <view class="flex custom-indicator">
+        <block wx:for="{{swipeInfo}}">
+          <view class="custom-indicator__item {{currentSwiperIndex === index && 'custom-indicator__active'}}"></view>
+        </block>
+      </view>
+    </view>
     <view class="noGoods" wx:if="{{datas.componentData.goodsList.length == 0 && datas.componentData.filterComponentsFlag && !loading && datas.componentData.style != 'rowList'}}">
       <image mode="widthFix" src="https://cdn.mayi888.com/static/img/empty-goods.png"></image>
       没有找到商品

static/nativeComponents/GoodsList/index.wxss

@@ -208,3 +208,19 @@ image{
   font-size: 28rpx;
   margin-top: 10rpx;
 }
+
+.custom-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.custom-indicator .custom-indicator__item {
+  width: 32rpx;
+  border: 2rpx solid rgba(0, 0, 0, 0.1);
+}
+
+.custom-indicator .custom-indicator__active {
+  border: 2rpx solid #C72A30;
+}