布局
<swiper style="height:{{50+picHeight*(1+0.1*(showIndex-1))+cardTop+cardBottom}}rpx">
  <swiper-item>
    <scroll-view catchTouchStart="onTouchStart" catchTouchMove="catchmove" catchTouchEnd="onTouchEnd" >
      <view style="width:714rpx;margin:0 auto;overflow:hidden;background-color:{{moduleBgColor}}">
        <!-- 文字滚动头条 -->
        <view style="width:714rpx;height:50rpx;background-color:{{writeBgColor}};display:flex;justify-content:center;align-items:center">
          <view style="width:678rpx;height:50rpx;overflow:hidden;display:flex;align-items:center;">
            <view class="write" onTransitionEnd="onTransitionEnd" style="margin-left:{{flag==true?width:0}}px;transition:all {{flag==true?writeTime:0.000000001}}s;color:{{writeColor}};font-size:24rpx;white-space:nowrap;">
          {{writeTitle}}
            </view>
          </view>
        </view>
        <!-- 卡片多图滚动 -->
        <view style="width:714rpx;display:flex;justify-content:center">
          <view style="width:{{picWidth}}rpx;display:flex;margin:{{cardTop}}rpx 0 {{cardBottom}}rpx;" >
            <view   style="display:flex;height:{{picHeight*(1+0.1*(showIndex-1))}}rpx;position:relative">
              <block a:for="{{bannerArr}}">
                <view  style="z-Index:{{property[index][0].zIndex}};
                             width:{{property[index][0].width}}rpx;
                             height:{{property[index][0].height}}rpx;
                             opacity:{{property[index][0].opacity}};
                             position:absolute;
                             top:50%;
                             transform:translateY(-50%);
                             transition-property:width,height,opacity;
                             transition-duration:{{property[index][0].time}}s,{{property[index][0].time}}s,{{property[index][0].time}}s;
                             transition-timing-function:ease-in-out,ease-in-out" animation="{{animations[index]}}" onTransitionEnd="cardEnd">
                  <image mode="scaleToFill" src="{{item.img||item.image}}" style="width:100%;height:100%;border-radius:{{isRound==1?12:0}}rpx;background-size:100 100%"/>
                </view>
              </block>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <swiper-item>
  </swiper-item>
</swiper>
js部分
import { enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
  data: {
    flag: true,
    cardFlag: true,
    opacity: 1,
    leftIndex: 0,
    rightIndex:0,
    gap: 0,
    animations: [],
    property: [],
    picArr: [
      {
        "image": "https://img.alicdn.com/imgextra/i4/2432558160/TB2UwQZXxXkpuFjy0FiXXbUfFXa_!!2432558160-0-shop_design.jpg",
        "url": "//shop116716739.m.taobao.com"
      },
      {
        "image": "https://img.alicdn.com/imgextra/i3/2432558160/TB27cs0XrVkpuFjSspcXXbSMVXa_!!2432558160-0-shop_design.jpg",
        "url": "//shop116716739.m.taobao.com"
      },
      {
        "image": "https://img.alicdn.com/imgextra/i2/2432558160/TB2I8ynXUdnpuFjSZPhXXbChpXa_!!2432558160-0-shop_design.jpg",
        "url": "//shop116716739.m.taobao.com"
      },
      {
        "image": "https://img.alicdn.com/imgextra/i3/2432558160/TB2UnA0XwxlpuFjSszbXXcSVpXa_!!2432558160-0-shop_design.jpg",
        "url": "//shop116716739.m.taobao.com"
      }
    ]
  },

  onInit() {
    // mock数据需要修改client文件夹中的page文件
    // 正常运行过程中模块总是默认传入data参数
  },

  didMount() {
    // 加载成功后可以异步获取数据更新数据展示，例如请求接口等操作
    const { gdc = {}, mds = {}, modUtils } = this.props.data;
    let data = mds.moduleData
    this.setData({
      moduleBgColor: data.moduleBgColor || '#000',
      writeBgColor: data.writeBgColor || '#61100c',
      writeColor: data.writeColor || '#fff',
      writeTitle: data.writeTitle || '恢复试讲将另放的YSL LOVERS,因*喀什,克牧勒苏柯尔自治州,图木舒克,和田地区受到疫情影响，将暂停对该地区的收派件服务.',
      writeTime: data.writeTime || 20,
      picWidth: data.picWidth || 660,
      cardTop: data.cardTop || 20,
      cardBottom: data.cardBottom || 20,
      picHeight: parseInt(data.picHeight) || 150,
      isRound: data.isRound || 1,
      showIndex: parseInt(data.showIndex) || 3,
      cardTimes: parseInt(data.cardTimes) || 1,
      isAuto: data.isAuto || false
    });
    // 复制
    this.data.writeTitle += this.data.writeTitle
    this.setData({ writeTitle: this.data.writeTitle });
    // 获取元素的高度属性
    my.createSelectorQuery()
      .select('.write').boundingClientRect().exec((data) => {
        this.setData({ width: -parseInt(data[0].width / 2) });
      });
    if (!data.imgArr || !data.imgArr[0].imgArr || data.imgArr[0].imgArr == '' || data.imgArr.length < 2) {
      this.setData({ bannerArr: this.data.picArr });
    } else {
      this.setData({ bannerArr: data.imgArr });
    }
    // 获取数组长度
    this.setData({ picLes: this.data.bannerArr.length });
    // 倒序
    this.data.bannerArr = this.data.bannerArr.reverse();
    this.setData({ bannerArr: this.data.bannerArr })
    // 计算
    this.setData({ gap: this.data.bannerArr.length - this.data.showIndex });
    // 复制数组
    let bannerArr = this.data.bannerArr.concat(this.data.bannerArr);
    this.data.bannerArr = this.data.bannerArr.concat(bannerArr);
    this.setData({ bannerArr: this.data.bannerArr })
    // 动画效果
    this.data.bannerArr.map((item, index) => {
      // 前面一段数组
      if (index < this.data.bannerArr.length / 3) {
        this.data.property[index] = [
          {
            "width": `${this.data.picWidth}`,
            "height": `${this.data.picHeight}`,
            "opacity": 0,
            "zIndex": `${index}`,
            "time": `${this.data.cardTimes}`
          }
        ]
      }
      // 中间一段数组
      else if ((index < this.data.bannerArr.length * 2 / 3 )&&index>=this.data.bannerArr.length/3) {
        this.data.property[index] = [
          {
            "width": `${((index - this.data.gap-this.data.bannerArr.length/ 3) < 0) ? this.data.picWidth : this.data.picWidth * (1 - 0.1 * (index - this.data.gap-this.data.bannerArr.length/ 3))}`,
            "height": `${((index - this.data.gap-this.data.bannerArr.length/ 3) < 0) ? this.data.picHeight : this.data.picHeight * (1 + 0.1 * (index - this.data.gap-this.data.bannerArr.length/ 3))}`,
            "opacity": 1,
            "zIndex": `${index}`,
            "time": `${this.data.cardTimes}`
          }
        ]
      }
      // 末尾一段数组
      else {
        this.data.property[index] = [
          {
            "width": `${this.data.picWidth * (1 - 0.1 * (this.data.showIndex-1))}`,
            "height": `${this.data.picHeight * (1 + 0.1 * (this.data.showIndex-1))}`,
            "opacity": 0,
            "zIndex": `${index}`,
            "time": `${this.data.cardTimes}`
          }
        ]
      }

    });
    this.setData({ property: this.data.property });

    this.setData({ leftIndex: this.data.property.length-1 });
  },

  methods: {
    // 过渡结束时触发
    onTransitionEnd() {
      this.setData({ flag: !this.data.flag })
    },
    // 触摸开始
    onTouchStart(e) {
      this.setData({ start: e.changedTouches[0].clientX })
    },
    // 触摸结束
    onTouchEnd(e) {
      this.setData({ end: e.changedTouches[0].clientX });
      this.setData({ gap: this.data.end - this.data.start })
      // 判断向左
      if (this.data.gap < 0) {
        this.left();
      } else if (this.data.gap > 0) {
        this.right();
      }
    },
    left() {
        if(this.data.leftIndex+1>this.data.property.length-1){
            this.setData({leftIndex:0})
        }else{
           this.setData({leftIndex:++this.data.leftIndex})
        }
        let leftArr=this.data.property.shift();
        this.data.property.push(leftArr);
        this.data.property.map((item,index)=>{
          if(index==this.data.leftIndex){
             this.data.property[index][0].time=0
          }else{
            this.data.property[index][0].time=this.data.cardTimes
          }
        })
        this.setData({property:this.data.property})
    },
    right() {
        let rightArr=this.data.property.pop();
        this.data.property.unshift(rightArr);
        this.setData({property:this.data.property})
    },
    cardEnd(e) {
     
    },
    catchmove(e) {
      //  console.log(e)
    },
    /**
     * 宝贝点击跳转
     * @param {宝贝链接} url 
     */
    onClickBaby(e) {
      const { mds = {} } = this.props.data;
      console.log(e.currentTarget.dataset.url)
      let gotoObj = {
        url: e.currentTarget.dataset.url, //字符串，可以是小程序内部url，也可以是H5/WEEX url，也可以是其他小程序url
        mds: mds,//必填,从props.data下发的模块moduleData
        config: {
          spmd: 0,//spm参数D位，默认为0（就是之前的nid）
          type: "",//跳转方式，默认为空，如果有定制需求，可以传递：replace/replaceAll/switchTab
        }
      }
      this.props.data.modUtils.router.navigateToUrl(gotoObj.url, gotoObj.mds, gotoObj.config);
    }
  }
}));