wuqy-component/components/carousel/index.js

这是一个微信小程序自定义组件库

// components/qqbm1/qqbm1.js
const {
  height,
  width,
  top,
  bottom,
  left,
  right,
} = wx.getMenuButtonBoundingClientRect();
import { photoData } from "./data";
let timer = null;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    radius: {
      type: Number,
      vlue: 45,
    },
    height: {
      type: Number,
      vlue: top + height,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    swiperList: photoData(),
    autoPlay: true,
    direction: "left",
    interval: 5000,
    currData: {},
    navTop: top,
    navHeight: 56,
    navObj: height,
    navObjwid: 94,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tauchSwiper(name) {
      let list = this.data[name];
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex =
          parseInt(list.length / 2) +
          1 -
          Math.abs(i - parseInt(list.length / 2));
        list[i].mLeft = i - parseInt(list.length / 2);
      }
      this.setData(
        {
          swiperList: list,
          currData: list.find(
            (i) =>
              i.zIndex ==
              Math.max.apply(
                Math,
                list.map((i) => i.zIndex)
              )
          ), //找到最大的数(zIndex)，再写入data
        },
        () => {
          this.handleSwiperAuto(); //当数据写入成功后会调用定时器，让后执行循环播放。
        }
      );
    },

    tauchStart(e) {
      this.destoryTimer(); //当触摸事件发生后，定时器会被清空，然后timer再次被赋值为null（初始值）。此时画面不会轮播。
      this.setData({
        tauchStart: e.touches[0].pageX,
      });
    },
    tauchMove(e) {
      this.setData({
        direction:
          e.touches[0].pageX - this.data.tauchStart > 0 ? "right" : "left",
      });
    },
    tauchEnd(e) {
      let direction = this.data.direction,
        list = this.data.swiperList;
      let currData = list.find(
        (i) =>
          i.zIndex ==
          Math.max.apply(
            Math,
            list.map((i) => i.zIndex)
          )
      );
      if (direction == "right") {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < list.length; i++) {
          list[i - 1].mLeft = list[i].mLeft;
          list[i - 1].zIndex = list[i].zIndex;
        }

        list[list.length - 1].mLeft = mLeft;
        list[list.length - 1].zIndex = zIndex;
        currData = list.find(
          (i) =>
            i.zIndex ==
            Math.max.apply(
              Math,
              list.map((i) => i.zIndex)
            )
        );
      } else {
        let mLeft = list[list.length - 1].mLeft,
          zIndex = list[list.length - 1].zIndex;
        for (let i = list.length - 1; i > 0; i--) {
          list[i].mLeft = list[i - 1].mLeft;
          list[i].zIndex = list[i - 1].zIndex;
        }
        list[0].mLeft = mLeft;
        list[0].zIndex = zIndex;
        currData = list.find(
          (i) =>
            i.zIndex ==
            Math.max.apply(
              Math,
              list.map((i) => i.zIndex)
            )
        );
      }
      this.setData({
        swiperList: list,
        currData,
      });
      if (!e) return; //当tauchEnd(e)传递的e非空时，即为true，说明有触摸结束事件，if中设置了个取反，当触发了tauchEnd（）函数时，会执行下面的函数。用户按住屏幕不动时，tauchEnd该函数无法执行，图片会停止轮播。
      this.handleSwiperAuto();
    },

    handleSwiperAuto() {
      //这是一个加了条件的定时器
      if (!this.data.autoPlay) return; //自动播放功能设置为true时，会执行下列代码，否则不会轮播。
      this.destoryTimer(); //被调用的这个destoryTimer函数是为了防止被重复加定时器，不然会定时器内部的函数会次数加倍执行，造成混乱，因为加了好几个定时器。所以当加过一个定时器时会清楚之前的定时器，执行下面的定时器。
      timer = setInterval(() => {
        //timer此时被赋值了，当隐藏或被调用会触发 destoryTimer()函数，执行清空定时器函数clearInterval(‘相当于定时器的名字’），clearInterval接收的参数为函数，指定清空哪个定时器，比如这里的timer。
        this.tauchEnd();
      }, this.data.interval);
    },

    destoryTimer() {
      //这个函数当隐藏了才会触发。上面给timer赋值了，当页面隐藏会把timer改为null。
      timer && clearInterval(timer); //当timer为定时器的名字时，布尔值为true，clearInterval(timer)函数会清空名字为timer的定时器;
      timer = null; //实参被设置为null，初始化了，方便该handleSwiperAuto()函数下次执行。
    }, //综上这个destoryTimer()函数是暂停定时器的运行，这个handleSwiperAuto()函数是重启定时器。
  },
  lifetimes: {
    attached() {
      //组件在页面中使用时，执行该函数
    },
    detached() {
      //组件在页面中被移除时执行,比如用if来判断是否渲染，已经存在的组件，在if中的判断条件里改为false时，就相当于移除。
    },
  },
  pageLifetimes: {
    //组件监听所在页面的函数
    show: function () {
      this.tauchSwiper("swiperList");
    },
    hide: function () {
      this.destoryTimer();
    },
  },
});