nazw/nnzwminiapp/pagesPublic/pages/tdcr/index.js

// pagesPublic/pages/tdcr/index.js
const {imgUrl} = require('../api/request')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgPath: imgUrl + 'tdcr/',
    cursorGuys: [{
      left: 48,
      top: 1.5
    }, {
      left: 20,
      top: 4
    }],
    cursors: [{
      id: 0,
      txt: '中西医结合医院',
      top: -12,
      left: 28,
      dropTop: 3.5,
      dropLeft: 12,
      zIndex: 10
    }, {
      id: 2,
      txt: '廖家山地块',
      top: -16,
      left: 20,
      dropTop: 5,
      dropLeft: 5
    }, {
      id: 1,
      txt: '南坪东路588号',
      top: -30,
      left: 61,
      dropTop: 4,
      dropLeft: 5,
      zIndex: 11
    }, {
      id: 3,
      txt: '四公里片区',
      top: -30,
      left: 61,
      dropTop: 4,
      dropLeft: 5,
      zIndex: 9
    }, {
      id: 4,
      txt: '双峰山1号地块',
      top: -39,
      left: 35,
      dropTop: 4,
      dropLeft: 5
    }],
    list: [{
      icon: 'icon-quyu.png',
      txt: '两江四岸、区域核心',
      top: 0,
      left: 12
    }, {
      icon: 'icon-house.png',
      txt: '山城花冠、主城肺叶',
      top: 1,
      left: 5
    }, {
      icon: 'icon-ai.png',
      txt: '南部增长极，金融“第三极”',
      top: 1,
      left: 0
    }, {
      icon: 'icon-car.png',
      txt: '毗邻机场、坐拥东站',
      top: 1,
      left: 12
    }, {
      icon: 'icon-bod.png',
      txt: '产业坚实、人才汇聚',
      top: 1,
      left: 20
    }],
    touchData: {
      flag: 0,
      lastX: 0,
      lastY: 0
    },
    animationData: {},
    currentIndex: 0,
    isAnimating: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.initAnimations();
    setTimeout(() => {
     this.startAnimationLoop();
    }, 500);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return {
      title: '2024年土地出让',
      imageUrl: imgUrl + '/tdcr/share.jpg'
    }
  },
  handleTouchend() {
    let touchData = this.data.touchData
    touchData.flag = 0
    //停止滑动
    this.setData({
      touchData
    })
  },
  handleTouchstart(event) {
    this.setData({
      touchData: {
        flag: 0,
        lastX: event.changedTouches[0].pageX,
        lastY: event.changedTouches[0].pageY
      }
    })
  },
  handleTouchmove(event) {
    let touchData = this.data.touchData
    if (touchData.flag !== 0) {
      return;
    }
    let currentX = event.changedTouches[0].pageX;
    let currentY = event.changedTouches[0].pageY;
    let tx = currentX - touchData.lastX;
    let ty = currentY - touchData.lastY;
    //左右方向偏移大于上下偏移认为是左右滑动
    if (Math.abs(tx) - Math.abs(ty) > 5) {
      // 向左滑动
      if (tx < 0) {
        // 如果到最右侧
        console.log('向左滑动');
        touchData.flag = 1;
        wx.navigateTo({
          url: './tdcr-list/index',
        })
      } else if (tx > 0) {
        // 如果到最左侧
        touchData.flag = 2;
        console.log('向右滑动');
        wx.navigateBack()
      }
    }
    //将当前坐标进行保存以进行下一次计算
    touchData.lastX = currentX;
    touchData.lastY = currentY;
    this.setData({
      touchData
    })
  },
  initAnimations: function() {
    const list = this.data.list;
    list.forEach((item, index) => {
      this.createAnimation(index);
    });
  },
  createAnimation: function(index) {
    const animation = wx.createAnimation({
      duration: 1000, // 动画持续时间
      timingFunction: 'ease', // 动画效果
    });
  
    this.setData({
      ['animationData[' + index + ']']: animation.export(),
    });
  },
  startAnimationLoop: function() {
    const list = this.data.list;
    const currentIndex = this.data.currentIndex;
    
    if (currentIndex < list.length) {
      if (this.data.isAnimating) return;
      this.setData({
        isAnimating: true
      })
      // 获取当前索引的动画对象
      const animation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'linear',
      });
  
      // 放大动画
      animation.scale(1.2, 1.2).step();
  
      // 更新动画数据
      this.setData({
        ['animationData[' + currentIndex + ']']: animation.export(),
        isAnimating: this.data.isAnimating
      });
  
      // 设置动画结束后回调
      setTimeout(() => {
        // 恢复到原始大小
        const restoreAnimation = wx.createAnimation({
          duration: 1000,
          timingFunction: 'linear',
        });
        restoreAnimation.scale(1, 1).step();
  
        this.setData({
          ['animationData[' + currentIndex + ']']: restoreAnimation.export(),
          isAnimating: false
        });
  
        // 动画结束后，索引递增，如果到达列表末尾，则重置为0
        this.setData({
          currentIndex: (currentIndex + 1) % list.length,
        });
        if ((currentIndex + 1) % list.length == 0 && currentIndex != 0) {
          setTimeout(() => {
            this.startAnimationLoop();
          }, 2000);
        } else {
          this.startAnimationLoop();
        }
      }, 1500);
    }
  },
  toDetail(e) {
    wx.navigateTo({
      url: './details/detail?index=' + e.target.dataset.index,
    })
  }
})