小程序之多图滑动缩放

axml

<swiper style="height:{{moduleHeight}}rpx">
  <swiper-item>
    <scroll-view catchTouchStart="start" catchTouchMove="move" catchTouchEnd="end">
      <!-- 多图滑动 -->
      <view style="display:flex;justify-content:center;width:714rpx;background-color:{{moduleBgColor}};background-image:url({{moduleImg||moduleImage}});margin:0 atuo;">
        <view style="width:714rpx;height:{{picHeight}}rpx;margin:{{picTop||0}}rpx 0 {{picBottom||0}}rpx 0;overflow:hidden;">
          <view style="width:{{picLes*picWidth+(picLes-1)*picSpace}}rpx;height:{{picHeight}}rpx;position:relative;">
            <block a:for="{{picArr}}">
              <view style="width:{{picWidth}}rpx;
                        height:{{picHeight}}rpx;
                        position:absolute;
                        left:{{animationArr[index].left}}rpx;
                        transform:scale({{animationArr[index].scale}});
                        transition-property:left,transform;
                        transition-duration:{{animationArr[index].time}}s,{{animationArr[index].time}}s
                        ">
                <view style="width:{{picWidth}}rpx;height:{{picHeight}}rpx;">
                  <image mode="scaleToFill" src="{{item.img||item.image}}" style="width:100%;height:100%;background-size:100% 100%;border-radius:{{isRound==1?roundSize:0}}rpx"/>
                </view>
              </view>
            </block>
          </view>
        </view>
      </view>
    </scroll-view>
  </swiper-item>
  <swiper-item>
  </swiper-item>
</swiper>

js

import { enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
  data: {
    gap: 0,
    leftIndex: 0,
    rightIndex: 0,
    animationArr: [],
    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({
      fs: this.props.data.modUtils.env.screenWidth / 750,
      moduleBgColor: data.moduleBgColor || '#fcc',
      moduleImg: data.moduleImg,
      moduleImage: data.moduleImage,
      picSize: data.picSize || '180,180,20,20,0',
      isRound: data.isRound || '1',
      roundSize: data.roundSize || '50',
      picTime: data.picTime || '0.5,3',
      scale: data.scale || '0.9',
      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 })
    }
    // 图片宽，高，上边距，下边距
    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 picTime = this.data.picTime.split(",");
    this.setData({ duration: picTime[0], intaval: picTime[1] })
    // 动画
    let picArr = this.data.picArr.concat(this.data.picArr);
    this.data.picArr = this.data.picArr.concat(picArr);
    this.setData({ picArr: this.data.picArr });
    this.data.picArr.map((item, index) => {
      this.data.animationArr[index] = {
        "left": (index - this.data.picArr.length / 3) * (this.data.picWidth + this.data.picSpace),
        "scale": (((this.data.picArr.length % 2 != 1) ? (index + 1) : index) % 2 == 1) ? 1 : this.data.scale,
        "time": this.data.duration
      }
    });
    this.setData({ animationArr: this.data.animationArr });
    // 图片长度
    this.setData({ picLes: this.data.picArr.length });
    // 滚动最大距离
    this.setData({ maxWidth: this.data.picLes * (this.data.picWidth + this.data.picSpace) - 714 });
    // 模块高度
    this.setData({ moduleHeight: this.data.picHeight + this.data.picTop + this.data.picBottom });
    this.setData({ leftIndex: this.data.picArr.length - 1 });
    // 自动滚动
    if (this.data.isAuto == '1') {
      this.timer = setInterval(() => {
        this.left()
      }, this.data.intaval * 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.intaval * 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.picArr.length - 1) {
        this.setData({ leftIndex: 0 })
      } else {
        this.setData({ leftIndex: ++this.data.leftIndex })
      }
      if (this.data.rightIndex + 1 > this.data.picArr.length - 1) {
        this.setData({ rightIndex: 0 })
      } else {
        this.setData({ rightIndex: ++this.data.rightIndex })
      }
      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.picArr.length - 1 })
      } else {
        this.setData({ rightIndex: --this.data.rightIndex })
      }
      if (this.data.leftIndex - 1 < 0) {
        this.setData({ leftIndex: this.data.picArr.length - 1 })
      } else {
        this.setData({ leftIndex: --this.data.leftIndex })
      }
      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) {

    },
    /**
    * 宝贝点击跳转
    * @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);
    }

  }
}));