小程序之滑动缩放

HTML
<swiper style="height:{{moduleHeight}}rpx">
  <swiper-item>
    <scroll-view catchTouchStart="start" catchTouchMove="move" catchTouchEnd="end">
      <!-- 滑动展开 -->
      <view style="display:flex;flex-wrap:wrap;width:714rpx;margin:0 auto;height:{{moduleHeight}}rpx;background-color:{{moduleBgColor}};background-image:({{moduleImg||moduleImage}});background-size:100% 100%">
        <!-- 标题 -->
        <view a:if="{{isTitleName=='1'?true:false}}">
          <view style="width:714rpx;display:flex;height:{{headHeight}}rpx;justify-content:center;margin-top:{{headTop}}rpx">
            <view style="font-size:{{headFontSize}}rpx;color:{{headFontColor}};line-height:{{headHeight}}rpx;">{{'# New Fashion'}}</view>
          </view>
        </view>
        <!-- 滑动动画 -->
        <view style="margin:{{picTop}}rpx 0 {{picBottom}}rpx 0;width:714rpx;">
          <!-- 图片 -->
          <view style="position:relative;width:{{picLes*picWidth+(picLes-1)*picSpace}}rpx;height:{{picHeight}}rpx">
            <block a:for="{{picArr}}">
              <view style="position:absolute;
                     left:{{animationArr[index].left}}rpx;
                     width:{{picWidth}}rpx;
                     height:{{picHeight}}rpx;
                     background-size:100% 100%;
                     opacity:{{animationArr[index].opacity}};
                     border-radius:{{isRound==1?roundSize:0}}rpx;
                     transform:scale({{animationArr[index].scale}});
                     transition-property: left,transform;
                     transition-duration: {{animationArr[index].time}}s,{{animationArr[index].time}}s;
                     background-image:url({{item.img||item.image}})">
                     <view style="position:relative;width:{{picWidth}}rpx;height:{{picHeight}}rpx">
                         <view style="width:{{smallWidth}}rpx;height:{{smallHeight}}rpx;position:absolute;left:50%;transform:translateX(-50%);bottom:50%">
                             <view style="width:{{smallWidth}}rpx;height:{{smallHeight}}rpx;transform:scale({{animationArr[index].scale}});transition:all {{animationArr[index].time}}s">
                                <image mode="scaleToFill" src="{{item.small_img||item.small_image}}" style="width:100%;height:100%;background-size:100% 100%;"/>
                             </view>
                         </view>
                     </view>
              </view>
            </block>
          </view>
          <!-- 圆点 -->
          <view style="width:714rpx;height:{{dotSize}}rpx;margin-top:{{dotTop}}rpx;display:flex;justify-content:center">
            <view style="display:flex;width:{{dotSize*dotLes+(dotLes-1)*dotSpace}}rpx;justify-content:space-between">
              <block a:for="{{dotArr}}">
                <view style="width:{{dotSize}}rpx;height:{{dotSize}}rpx;border-radius:100%;background-color:{{index==dotIndex?activeColor:dotColor}}"></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: {
    dotIndex: 0,
    leftIndex: 0,
    rightIndex: 0,
    animationArr: [],
    picArr: [
      {
        "small_image": "https://img.alicdn.com/imgextra/i4/39767794/O1CN01uZ6wGz27RhbCe0DJJ_!!39767794.png",
        "image": "https://img.alicdn.com/imgextra/i4/39767794/O1CN01sYrKWB27Rhb48wJ5W_!!39767794.png",
        "url": "//shop116716739.m.taobao.com"
      },
      {
        "small_image": "https://img.alicdn.com/imgextra/i1/39767794/O1CN01m856Pb27Rhb75x6iu_!!39767794.png",
        "image": "https://img.alicdn.com/imgextra/i1/39767794/O1CN019GZ1e227Rhb8UCIgz_!!39767794.png",
        "url": "//shop116716739.m.taobao.com"
      },
      {
        "small_image": "https://img.alicdn.com/imgextra/i2/39767794/O1CN01yQ9QEY27RhbAbGvZN_!!39767794.png",
        "image": "https://img.alicdn.com/imgextra/i2/39767794/O1CN01BRtHIe27Rhb2Gg9It_!!39767794.png",
        "url": "//shop116716739.m.taobao.com"
      },
      {
        "small_image": "https://img.alicdn.com/imgextra/i2/39767794/O1CN01fhtMDz27RhbAbU1Ht_!!39767794.png",
        "image": "https://img.alicdn.com/imgextra/i3/39767794/O1CN011bWmYC27RhbCB534k_!!39767794.png",
        "url": "//shop116716739.m.taobao.com"
      }
    ]
  },

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

  didMount() {
    // 加载成功后可以异步获取数据更新数据展示，例如请求接口等操作
    const { gdc = {}, mds = {}, modUtils } = this.props.data;
    let data = mds.moduleData;
    this.setData({
      isRound: data.isRound || '1',
      roundSize: data.roundSize || '20',
      // 模块
      moduleHeight: data.moduleHeight || '1000',
      moduleBgColor: data.moduleBgColor || '#fcc',
      moduleImg: data.moduleImg,
      moduleImage: data.moduleImage,
      //  head标题
      isTitleName: data.isTitleName || '1',
      headSize: data.headSize || '100,40,40,#000',
      //  图片
      picSize: data.picSize || '400,700,20,20,30',
      animationTime: data.animationTime || '0.5,3',
      smallSize: data.smallSize || '100,400,',
      // 圆点
      dotSize: data.dotSize || '20,20,20',
      dotSizeColor: data.dotSizeColor || '#fff,#000',
      isAuto: data.isAuto || '1'
    });
    // 预设图片数组
    if (!data.picArr || !data.picArr[0] || !data.picArr[0].image || data.picArr[0].image == '') {
      this.setData({ picArr: this.data.picArr })
    } else {
      this.setData({ picArr: data.picArr })
    }
    // head标题字体大小，上间距，字体颜色
    let headSize = this.data.headSize.split(",");
    this.setData({ headHeight: parseInt(headSize[0]), headFontSize: parseInt(headSize[1]), headTop: parseInt(headSize[2]), headFontColor: headSize[3] });
    //大图宽，高，上间距，下间距
    let picSize = this.data.picSize.split(",");
    this.setData({ picWidth: parseInt(picSize[0]), picHeight: parseInt(picSize[1]), picTop: parseInt(picSize[2]), picBottom: parseInt(picSize[3]), picSpace: parseInt(picSize[4]) });
    let smallSize = this.data.smallSize.split(",");
    this.setData({ smallWidth: parseInt(smallSize[0]), smallHeight: parseInt(smallSize[1]) })
    //  圆点大小，上间距，右间距
    let dotSize = this.data.dotSize.split(",");
    this.setData({ dotSize: parseInt(dotSize[0]), dotTop: parseInt(dotSize[1]), dotSpace: parseInt(dotSize[2]) });
    // 动画切换时间，展示时间
    let animationTime = this.data.animationTime.split(",");
    this.setData({ duration: animationTime[0], intavel: animationTime[1] })
    // 圆点默认颜色，选中颜色
    let dotSizeColor = this.data.dotSizeColor.split(",");
    this.setData({ dotColor: dotSizeColor[0], activeColor: dotSizeColor[1] });
    this.setData({ dotArr: this.data.picArr });
    this.setData({ dotLes: this.data.dotArr.length });
    // 模块高度
    this.setData({ moduleHeight: this.data.headHeight + this.data.headTop + this.data.dotTop + this.data.dotSize + this.data.picHeight + this.data.picTop + this.data.picBottom })
    // 图片位置
    let picArr = this.data.picArr.concat(this.data.picArr);
    this.data.picArr = this.data.picArr.concat(picArr);
    // 图片的长度
    this.setData({ picLes: this.data.picArr.length })
    this.data.picArr.map((item, index) => {
      this.data.animationArr[index] = {
        "left": (index - this.data.picLes / 3) * (this.data.picWidth + this.data.picSpace) + (714 - this.data.picWidth) / 2,
        "opacity": ((index >= (this.data.picLes / 3 - 1)) && (index < (this.data.picLes * 2 / 3 - 1))) ? 1 : 1,
        "time": this.data.duration,
        'scale': (index != this.data.picLes / 3) ? 0.6 : 1
      }
    });
    this.setData({ animationArr: this.data.animationArr });
    this.setData({ leftIndex: this.data.picLes - 1 })
    if (this.data.isAuto == '1') {
      this.timer = setInterval(() => {
        this.left()
      }, this.data.intavel * 1000)
    }
  },

  methods: {
    start(e) {
      clearInterval(this.timer)
      this.setData({ start: e.changedTouches[0].clientX })
    },
    end(e) {
      if (this.data.isAuto == '1') {
        this.timer = setInterval(() => {
          this.left()
        }, this.data.intavel * 1000)
      }
      this.setData({ gap: e.changedTouches[0].clientX - 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.picLes - 1) {
        this.setData({ leftIndex: 0 })
      } else {
        this.setData({ leftIndex: ++this.data.leftIndex })
      }
      if ((this.data.rightIndex + 1) > this.data.picLes - 1) {
        this.setData({ rightIndex: 0 })
      } else {
        this.setData({ rightIndex: ++this.data.rightIndex })
      }
      // 圆点
      if (this.data.dotIndex + 1 > this.data.dotLes - 1) {
        this.setData({ dotIndex: 0 })
      } else {
        this.setData({ dotIndex: ++this.data.dotIndex })
      }
      let leftArr = this.data.animationArr.pop();
      this.data.animationArr.unshift(leftArr);
      this.data.animationArr.map((item, index) => {
        if (index == this.data.leftIndex) {
          this.data.animationArr[index].time = 0
        } else {
          this.data.animationArr[index].time = this.data.duration
        }
      })
      this.setData({ animationArr: this.data.animationArr })
    },
    right() {
      if ((this.data.rightIndex - 1) < 0) {
        this.setData({ rightIndex: this.data.picLes - 1 })
      } else {
        this.setData({ rightIndex: --this.data.rightIndex })
      }
      if ((this.data.leftIndex - 1) < 0) {
        this.setData({ leftIndex: this.data.picLes - 1 })
      } else {
        this.setData({ leftIndex: --this.data.leftIndex })
      }
      // 圆点
      if (this.data.dotIndex - 1 < 0) {
        this.setData({ dotIndex: this.data.dotLes - 1 })
      } else {
        this.setData({ dotIndex: --this.data.dotIndex })
      }
      let rightArr = this.data.animationArr.shift();
      this.data.animationArr.push(rightArr);
      this.data.animationArr.map((item, index) => {
        if (index == this.data.rightIndex) {
          this.data.animationArr[index].time = 0
        } else {
          this.data.animationArr[index].time = this.data.duration
        }
      })
      this.setData({ animationArr: this.data.animationArr })
    },
    move(e) {

    }
  }
}));