微信/支付寶小程序?qū)崿F(xiàn)彈窗動(dòng)畫縮放到某個(gè)位置的示例代碼

更新時(shí)間：2024年10月17日 10:50:53 作者：鶴鳴的日常

本文詳細(xì)介紹了如何使用HTML、CSS和JavaScript實(shí)現(xiàn)動(dòng)畫函數(shù),包括參數(shù)設(shè)置和動(dòng)畫過程中的狀態(tài)管理,文章還涉及了如何獲取DOM元素、設(shè)置動(dòng)畫開始和結(jié)束的回調(diào)函數(shù),感興趣的朋友跟隨小編一起看看吧

HTML

  <view wx:if="{{advertiseFlag}}" class="advertise-wrapper" style="background-color:{{transitionData.statusBtn == 'playing'?'rgba(255,255,255,0)':''}}" bindtap="jumpFn">
    <view class="advertise-box" style="width:{{transitionData.width}};height:{{transitionData.height}};left:{{transitionData.left}};top:{{transitionData.top}};opacity:{{transitionData.opacity}};animation:{{transitionData.animation}}">
      <image data-status="{{transitionData.statusBtn}}" catchtap="handleJumpValue" src="{{ advertiseMsg.url || 'https://yizhen-mamapai-dev.oss-cn-zhangjiakou.aliyuncs.com/certification/2024-06-13/b1791b525e974c0aae8a0c82a8410a9b.png'}}">
      </image>
      <view class="jump-box" catchtap="jumpFn" data-status="{{transitionData.statusBtn}}">
        跳過{{defaultTime?defaultTime:''}}
      </view>
    </view>
  </view>

CSS

.advertise-wrapper {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.advertise-box {
  width: 580rpx;
  height: 980rpx;
  position: absolute;
  transition: all 1s linear;
}
@keyframes shrinkAndMoveToPosition {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.5);
    opacity: 0;
  }
}
.advertise-box image {
  width: 100%;
  height: 100%;
}
.jump-box {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 4rpx 16rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  color: #fff;
  font-size: 12px;
}

動(dòng)畫函數(shù)

options的參數(shù)

from : 起始值比如：0

to : 結(jié)束值比如：100

totalMS ：變化總時(shí)間比如： 1000

duration : 每多少秒變化的次數(shù) 比如： 1

onmove ：開始移動(dòng)的回調(diào)函數(shù)

onend ：移動(dòng)結(jié)束的回調(diào)函數(shù)

let timer;
function createAnimation(option) {
  // 起始值、結(jié)束值、變化總時(shí)間
  var {
    from,
    to,
    totalMS,
    duration,
    onmove,
    onend
  } = option;
  totalMS = totalMS || 1000;
  duration = duration || 10; // 每多少時(shí)間變化一次
  var times = Math.floor(totalMS / duration); // 變化的次數(shù)
  var dis = (to - from) / times; // 每次變化的量
  var curTimes = 0;
  // 每次變化的函數(shù)
  var timer = setInterval(() => {
    from += dis;
    curTimes++;
    // 變化完成，這里保證onmove 在 onend以前執(zhí)行
    if (curTimes >= times) {
      from = to;
      onmove && onmove(from);
      onend && onend();
      clearInterval(timer);
      return;
    }
    onmove && onmove(from);
  }, duration);
}

獲取dom

我們點(diǎn)擊跳轉(zhuǎn)的時(shí)候,首先需要獲取到當(dāng)前點(diǎn)擊 dom 的 status，如果當(dāng)前的狀態(tài)為 playing 直接 return,否則開始獲取當(dāng)前的 dom 信息，找到當(dāng)前點(diǎn)擊的 dom 和所要跳轉(zhuǎn)到的 dom 所在位置，然后找到所要跳轉(zhuǎn)的位置后，把當(dāng)前點(diǎn)擊的dom和所要去的dom傳給開始的動(dòng)畫函數(shù)

  handleGetDom(type) {
    if (!type || type <= 0) return
    let _this = this
    wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
      .selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
        const [popRect, endDoms] = ret;
        const targetIndex = endDoms.findIndex((item) => item.id == type);
        if (targetIndex === -1) return;
        const endDom = endDoms[targetIndex];
        _this.startTransition(popRect, endDom);
      })
  },

開始動(dòng)畫過渡

根據(jù)獲取 dom 和所要去的 dom 的位置,在拿到要結(jié)束 dom 之前先把 status 狀態(tài)設(shè)置為 playing ，這樣后我們就可以設(shè)置動(dòng)畫效果然后把對(duì)應(yīng)的參數(shù)傳給動(dòng)畫函數(shù) createAnimation 。

  // 開始動(dòng)畫過渡
  startTransition(popRect, endDom) {
    const _this = this;
    // 設(shè)置點(diǎn)擊狀態(tài)為playing
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'playing'
      }
    });
    const centerX = endDom.left
    const centerY = endDom.top
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        animation: "shrinkAndMoveToPosition 2s forwards"
      }
    });
    createAnimation({
      from: popRect.left,
      to: centerX,
      totalMS: 1000,
      onmove: (n) => {
        _this.updateTransitionData(endDom, centerX, centerY);
      },
      onend: () => {
        _this.endTransition(endDom);
      }
    });
  },

動(dòng)畫的更新函數(shù)

這個(gè)地方需要注意的是在支付寶中 left、top 不用需要加 px,width和height自行決定用不用除以2

  // 更新動(dòng)畫過程中的數(shù)據(jù)
  updateTransitionData(endDom, centerX, centerY) {
    this.setData({
      transitionData: {
        ...this.data.transitionData,
        width: `${endDom.width / 2}px`,
        height: `${endDom.height / 2}px`,
        left: `${centerX}px`,
        top: `${centerY}px`
      }
    });
  },

動(dòng)畫的結(jié)束函數(shù)

在動(dòng)畫結(jié)束的時(shí)候我們需要把 status 更改為 end , opacity 設(shè)置為 0，清除定時(shí)器就可以了

 // 結(jié)束動(dòng)畫并處理跳轉(zhuǎn)
  endTransition(endDom) {
    const _this = this;
    wx.showTabBar();
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'end',
        opacity: 0
      },
      advertiseFlag: false
    });
    clearInterval(timer);
    const currItem = {
      ...endDom.dataset.item,
      richTextType: 2,
      appletAdvertisementId: endDom.dataset.item.type
    }
    _this.handleJumpTypePage(currItem);
  },

動(dòng)畫所有相關(guān)的事件函數(shù)

  // 跳轉(zhuǎn)類型
  handleJumpValue(e) {
    let {
      relationHomeSwitch,
      relationHomeType,
      id
    } = this.data.advertisingPopup
    this.handleClickDataSave(id)
    if (relationHomeType && relationHomeSwitch == 1) {
      let status = e.currentTarget.dataset.status
      // 判斷是否有點(diǎn)擊過  statusBtn
      if (status == 'playing') return;
      this.handleGetDom(relationHomeType)
    } else if (relationHomeSwitch == 2) {
      let data = {
        ...this.data.advertisingPopup,
        richTextType: 3,
      }
      this.handleJumpTypePage(data)
    } else {
      wx.showTabBar();
      this.setData({
        advertiseFlag: false
      });
      clearInterval(timer);
    }
  },
  // 獲取dom
  handleGetDom(type) {
    if (!type || type <= 0) return
    let _this = this
    wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
      .selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
        const [popRect, endDoms] = ret;
        const targetIndex = endDoms.findIndex((item) => item.id == type);
        if (targetIndex === -1) return;
        const endDom = endDoms[targetIndex];
        _this.startTransition(popRect, endDom);
      })
  },
  // 開始動(dòng)畫過渡
  startTransition(popRect, endDom) {
    const _this = this;
    // 設(shè)置點(diǎn)擊狀態(tài)為playing
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'playing'
      }
    });
    const centerX = endDom.left
    const centerY = endDom.top
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        animation: "shrinkAndMoveToPosition 2s forwards"
      }
    });
    createAnimation({
      from: popRect.left,
      to: centerX,
      totalMS: 1000,
      onmove: (n) => {
        _this.updateTransitionData(endDom, centerX, centerY);
      },
      onend: () => {
        _this.endTransition(endDom);
      }
    });
  },
  // 更新動(dòng)畫過程中的數(shù)據(jù)
  updateTransitionData(endDom, centerX, centerY) {
    this.setData({
      transitionData: {
        ...this.data.transitionData,
        width: `${endDom.width / 2}px`,
        height: `${endDom.height / 2}px`,
        left: `${centerX}px`,
        top: `${centerY}px`
      }
    });
  },
  // 結(jié)束動(dòng)畫并處理跳轉(zhuǎn)
  endTransition(endDom) {
    const _this = this;
    wx.showTabBar();
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'end',
        opacity: 0
      },
      advertiseFlag: false
    });
    clearInterval(timer);
    const currItem = {
      ...endDom.dataset.item,
      richTextType: 2,
      appletAdvertisementId: endDom.dataset.item.type
    }
    _this.handleJumpTypePage(currItem);
  },
  // 點(diǎn)擊
  handleHomeConfigClick(id) {
    let params = {
      id: id
    }
    api.post('/main-service/home-config/click', params).then((res) => {
      if (res.code == 1) {
        console.log(res, 'res');
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },
  jumpFn() {
    wx.showTabBar();
    this.setData({
      advertiseFlag: false
    });
    clearInterval(timer);
  },
  // 動(dòng)畫end

完整實(shí)現(xiàn)代碼

// pages/prize/prize.js
const api = require('../../common/api')
const App = getApp()
const getAuthCode = require('../../common/authen.js').getAuthCode
let timer;
let count = 0;
function createAnimation(option) {
  // 起始值、結(jié)束值、變化總時(shí)間
  var {
    from,
    to,
    totalMS,
    duration,
    onmove,
    onend
  } = option;
  totalMS = totalMS || 1000;
  duration = duration || 10; // 沒多少時(shí)間變化一次
  var times = Math.floor(totalMS / duration); // 變化的次數(shù)
  var dis = (to - from) / times; // 每次變化的量
  var curTimes = 0;
  // 每次變化的函數(shù)
  var timer = setInterval(() => {
    from += dis;
    curTimes++;
    // 變化完成，這里保證onmove 在 onend以前執(zhí)行
    if (curTimes >= times) {
      from = to;
      onmove && onmove(from);
      onend && onend();
      clearInterval(timer);
      return;
    }
    onmove && onmove(from);
  }, duration);
}
Page({
  data: {
    transitionData: {
      statusBtn: '', // 是否已經(jīng)點(diǎn)擊過
      left: '',
      top: '',
      width: '580rpx',
      height: '980rpx',
      opacity: 1
    },
    marketingId: "", // 營(yíng)銷id
    styleConfigData: {},
    imgSrc: [],
    paramStr: '',
    indicatorDots: false,
    autoplay: true,
    vertical: false,
    interval: 2000,
    circular: true,
    duration: 1500,
    defaultTime: 4, //默認(rèn)時(shí)間
    advertiseFlag: false,
    advertiseMsg: {},
    activityData: {
      sourceType: ''
    },
    styleHomeImage: {},
    activeIndex: "", // 切換下標(biāo)
    interval: 3000,
    advertisingRotation: [], // 廣告位輪播
    newHomepage: [],
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    // this.getImage()
    // this.getStyleConfig()
    this.getAuth()
    this.getHomeConfigPage()
    this.handleGetAxiosData()
    this.getAdvertisement()
  },
  onShow() {
    let token = wx.getStorageSync('token')
    if (App.globalData.activityData.sourceType == 'activity' && App.globalData.inviteCustomerNum < 2 && token) {
      this.handleActivity()
    }
  },
  handleActivity() {
    const params = App.globalData.activityData
    api.post('/main-service/customer-invite-record', params).then((res) => {
      if (res.code === 1) {
        console.log('邀請(qǐng)?zhí)幚沓晒?)
        App.globalData.inviteCustomerNum = 2
      }
      if (res.code == 1010002) {
        console.log('邀請(qǐng)?zhí)幚硎?)
        App.globalData.inviteCustomerNum = 1
      }
    })
  },
  // 獲取首頁頭部配置
  getHomeConfigPage() {
    api.get("/main-service/home-config/list").then((res) => {
      if (res.code == 1) {
        let originalHomepage = res.data && res.data.sort((a, b) => {
          return a.type - b.type
        }) || []
        // 處理數(shù)據(jù)，添加額外屬性用于渲染
        const processedHomepage = originalHomepage.map(item => {
          return {
            ...item,
            shouldDisplay: this.shouldDisplayItem(item),
            className: this.getClassByType(item.type),
            imageMode: this.getImageMode(item.type),
            showMenu: item.type >= 5,
            defaultImage: this.getDefaultImage(item.type)
          };
        });
        this.setData({
          newHomepage: processedHomepage
        })
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },
  // 獲取頁面樣式配置
  getStyleConfig() {
    api.get('/main-service/activity_style_config').then((res) => {
      if (res.code === 1) {
        const {
          data
        } = res
        this.setData({
          styleConfigData: {
            ...data,
            topImg: res.data.imgUrl.split(",")[0],
            bottomImg: res.data.imgUrl.split(",")[1],
          }
        })
      }
    })
  },
  //數(shù)據(jù)
  handleGetAxiosData() {
    let params = {
      type: 39
    }
    api.get(`/main-service/sys/info`, params).then((res) => {
      console.log(res, 'res')
      if (res.code == 1) {
        this.setData({
          styleHomeImage: res.data.remark ? JSON.parse(res.data.remark) : {},
        })
      }
    })
  },
  getImage() {
    api.get('/main-service/home-page/advertising').then(res => {
      this.setData({
        imgSrc: res.data.weChatBackgroundUrl
      })
    })
  },
  // 獲取 廣告位輪播圖
  getAdvertisement() {
    const params = {
      position: 1
    }
    api.get('/main-service/advertisement', params).then((res) => {
      if (res.code == 1) {
        this.setData({
          advertisingRotation: res.data
        })
      }
    })
  },
  // 改變圖片
  changeImg(e) {
    this.activeIndex = e.detail.current
    this.setData({
      activeIndex: e.detail.current
    })
  },
  getAuth() {
    getAuthCode().then(res => {
      let authCode = res.authCode;
      let params = {
        code: authCode
      };
      this.getAdvertiseMsg(params);
    });
  },
  //獲取彈窗廣告信息
  getAdvertiseMsg(params) {
    api.get("/main-service/applet-advertisement/v2", params).then(res => {
      if (res.code == 1) {
        this.setData({
          advertiseFlag: res.data.status == 1 ? true : false,
          advertiseMsg: res.data,
          advertisingPopup: {
            ...res.data
          }
        });
        if (res.data.id) {
          wx.hideTabBar();
        }
        if (res.data.status == 1) {
          timer = setInterval(() => {
            if (this.data.defaultTime > 0) {
              let time = (this.data.defaultTime -= 1);
              this.setData({
                defaultTime: time
              });
              return;
            }
            if (!this.data.defaultTime) {
              clearInterval(timer);
              this.isLike();
            }
          }, 1000);
        }
      }
    });
  },
  //是否感興趣
  isLike() {
    let id = this.data.advertiseMsg.id;
    if (id) {
      api.get(`/main-service/applet-advertisement/${id}`).then(res => {
        if (res.code == 1) {
          console.log("感興趣");
        }
      });
    }
  },
  // 跳轉(zhuǎn)詳情
  handleJumpDetails(item) {
    let {
      id,
      jumpType
    } = item.currentTarget.dataset.value
    if (jumpType == 13) {
      wx.navigateTo({
        url: `/addressManagement/pages/richText/richText?jumpId=${id}`
      });
    }
  },
  // 頁面跳轉(zhuǎn)
  handleJumpToPage(e) {
    let {
      item
    } = e.currentTarget.dataset
    this.handleHomeConfigClick(item.id)
    wx.hideLoading()
    let data = {
      ...item,
      richTextType: 2,
      appletAdvertisementId: item.type
    }
    wx.hideLoading()
    this.handleJumpTypePage(data)
  },
  // 根據(jù)跳轉(zhuǎn)類型處理頁面跳轉(zhuǎn)
  handleJumpTypePage(item) {
    const jumpType = Number(item.jumpType);
    this.jumpFn()
    const routes = {
      1: () => this.handlePageTo(),
      2: () => wx.navigateTo({
        url: "/addressManagement/pages/invitingWithCourtesy/invitingWithCourtesy"
      }),
      3: () => wx.navigateTo({
        url: `/addressManagement/pages/invitationGiftDetail/invitationGiftDetail?id=${item.jumpValue}`
      }),
      4: () => wx.switchTab({
        url: '/pages/activity/activity'
      }),
      5: () => wx.navigateTo({
        url: `/pages/activityDetail/activityDetail?activityId=${item.jumpValue}`
      }),
      6: () => wx.navigateTo({
        url: `/addressManagement/pages/richText/richText?jumpId=${item.appletAdvertisementId}&type=${item.richTextType}`
      }),
      // 7: () => wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${item.jumpValue}&type=1` }),
      // 8: () => wx.navigateTo({ url: `/pages/content-detail/content-detail?id=${item.jumpValue}&type=3` }),
      9: () => wx.navigateTo({
        url: `/addressManagement/pages/richText/richText?jumpId=${item.appletAdvertisementId}&status=btn&type=${item.richTextType}`
      }),
      10: () => wx.navigateTo({
        url: `/addressManagement/pages/marketing/marketing?id=${item.type}&type=home`
      }),
    };
    if (routes[jumpType]) {
      routes[jumpType]();
    }
  },
  // 點(diǎn)擊數(shù)據(jù)
  handleClickDataSave(id) {
    let params = {
      appletAdvertisementCustomerRecordId: id
    }
    api.get('/main-service/applet-advertisement/save-click-data', params).then((res) => {
      if (res.code == 1) {
        console.log(res, 'res');
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },
  // 跳轉(zhuǎn)類型
  handleJumpValue(e) {
    let {
      relationHomeSwitch,
      relationHomeType,
      id
    } = this.data.advertisingPopup
    this.handleClickDataSave(id)
    if (relationHomeType && relationHomeSwitch == 1) {
      let status = e.currentTarget.dataset.status
      // 判斷是否有點(diǎn)擊過  statusBtn
      if (status == 'playing') return;
      this.handleGetDom(relationHomeType)
    } else if (relationHomeSwitch == 2) {
      let data = {
        ...this.data.advertisingPopup,
        richTextType: 3,
      }
      this.handleJumpTypePage(data)
    } else {
      wx.showTabBar();
      this.setData({
        advertiseFlag: false
      });
      clearInterval(timer);
    }
  },
  // 獲取dom
  handleGetDom(type) {
    if (!type || type <= 0) return
    let _this = this
    wx.createSelectorQuery().select('.advertise-box').boundingClientRect()
      .selectAll('.grid-container .item').boundingClientRect().exec((ret) => {
        const [popRect, endDoms] = ret;
        const targetIndex = endDoms.findIndex((item) => item.id == type);
        if (targetIndex === -1) return;
        const endDom = endDoms[targetIndex];
        _this.startTransition(popRect, endDom);
      })
  },
  // 開始動(dòng)畫過渡
  startTransition(popRect, endDom) {
    const _this = this;
    // 設(shè)置點(diǎn)擊狀態(tài)為playing
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'playing'
      }
    });
    const centerX = endDom.left
    const centerY = endDom.top
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        animation: "shrinkAndMoveToPosition 2s forwards"
      }
    });
    createAnimation({
      from: popRect.left,
      to: centerX,
      totalMS: 1000,
      onmove: (n) => {
        _this.updateTransitionData(endDom, centerX, centerY);
      },
      onend: () => {
        _this.endTransition(endDom);
      }
    });
  },
  // 更新動(dòng)畫過程中的數(shù)據(jù)
  updateTransitionData(endDom, centerX, centerY) {
    this.setData({
      transitionData: {
        ...this.data.transitionData,
        width: `${endDom.width / 2}px`,
        height: `${endDom.height / 2}px`,
        left: `${centerX}px`,
        top: `${centerY}px`
      }
    });
  },
  // 結(jié)束動(dòng)畫并處理跳轉(zhuǎn)
  endTransition(endDom) {
    const _this = this;
    wx.showTabBar();
    _this.setData({
      transitionData: {
        ..._this.data.transitionData,
        statusBtn: 'end',
        opacity: 0
      },
      advertiseFlag: false
    });
    clearInterval(timer);
    const currItem = {
      ...endDom.dataset.item,
      richTextType: 2,
      appletAdvertisementId: endDom.dataset.item.type
    }
    _this.handleJumpTypePage(currItem);
  },
  // 點(diǎn)擊
  handleHomeConfigClick(id) {
    let params = {
      id: id
    }
    api.post('/main-service/home-config/click', params).then((res) => {
      if (res.code == 1) {
        console.log(res, 'res');
      }
    }).catch((err) => {
      console.log(err, 'err');
    })
  },
  jumpFn() {
    wx.showTabBar();
    this.setData({
      advertiseFlag: false
    });
    clearInterval(timer);
  },
  // 動(dòng)畫end
  handlePageTo: function () {
    let that = this
    wx.showLoading({
      title: '加載中',
      mask: true
    })
    this.checkAttestation()
    // that.getUserInfo()
  },
  // getUserInfo() {
  //   let that = this
  //   getAuthCode().then((res) => {
  //     const {
  //       authCode
  //     } = res
  //     let params = {
  //       loginType: 7,
  //       isRelatedPhoneNumber: 0,
  //       grantCode: authCode
  //     }
  //     api.post('/main-service/customer/login', params).then(({
  //       data
  //     }) => {
  //       const {
  //         isRelatedPhoneNumber,
  //         phoneNumber,
  //         token
  //       } = data
  //       if (isRelatedPhoneNumber == 0) {
  //         wx.hideLoading()
  //         wx.reLaunch({
  //           url: '/pages/login/login?sourceType=prize'
  //         });
  //         return
  //       }
  //       if (isRelatedPhoneNumber == 1) {
  //         wx.hideLoading()
  //         wx.setStorageSync('token', token)
  //         that.checkAttestation()
  //         return
  //       }
  //     })
  //   })
  // },
  checkAttestation() {
    api.get('/main-service/pregnant-certification/status').then(({
      data
    }) => {
      wx.hideLoading()
      const {
        isWhite,
        isSellOut,
        status,
        identityType,
        isSyncTaoBao
      } = data
      if (isWhite == 0) {
        if (status == 0) {
          // 跳轉(zhuǎn)認(rèn)證頁面
          wx.navigateTo({
            url: '/pages/authentication/authentication'
          })
        }
        if (status == 1) {
          // 跳轉(zhuǎn)認(rèn)證中
          wx.navigateTo({
            url: '/pages/AddCustomer/AddCustomer'
          })
        }
        if (status == 2) {
          // 打開領(lǐng)取鏈接
          if (isSellOut) {
            // 禮品售罄
            // "identityType":  1:孕媽 2:寶媽
            if (!isSyncTaoBao) {
              wx.navigateTo({
                url: '/pages/sellOut/sellOut'
              })
              // if (identityType == 1) {
              //   wx.navigateTo({
              //     url: '/pages/sellOut/sellOut'
              //   })
              // }
              // if (identityType == 2) {
              //   wx.navigateTo({
              //     url: `/pages/certificationPassed/certificationPassed`
              //   })
              // }
            } else {
              // 修改之后的邏輯
              wx.navigateTo({
                url: `/pages/giftGuide/giftGuide?status=${status}`
              })
            }
          } else {
            wx.navigateTo({
              url: `/pages/giftGuide/giftGuide?status=${status}`
            })
            // if (identityType == 1) {
            //   wx.navigateTo({
            //     url: `/pages/giftGuide/giftGuide?status=${status}`
            //   })
            // }
            // if (identityType == 2) {
            //   wx.navigateTo({
            //     url: `/pages/certificationPassed/certificationPassed`
            //   })
            // }
          }
        }
        if (status == 3) {
          // 跳轉(zhuǎn)拒絕頁面
          wx.navigateTo({
            url: '/pages/certificationReject/certificationReject'
          })
        }
        if (status == 4) {
          // 跳轉(zhuǎn)退回頁面重新編輯
          wx.navigateTo({
            url: `/pages/authentication/authentication?status=${status}`
          })
        }
      }
      if (isWhite == 1) {
        if (isSellOut) {
          wx.navigateTo({
            url: '/pages/sellOut/sellOut'
          })
        } else {
          wx.navigateTo({
            url: `/pages/giftGuide/giftGuide?status=${status}`
          })
        }
      }
    })
  },
  handleClickBanner() {
    wx.navigateTo({
      url: '/addressManagement/pages/bannerDetail/bannerDetail',
    })
  },
  // 跳轉(zhuǎn)會(huì)場(chǎng)
  handleToShare() {
    wx.navigateTo({
      url: `/addressManagement/pages/taobaoVenue/taobaoVenue?type=home`,
    });
  },
  // 開啟分享
  onShareAppMessage() {},
  // 判斷是否展示該 item
  shouldDisplayItem(item) {
    if (item.type >= 5 && item.showSwitch !== 1) return false;
    return !!item.url || item.type <= 4; // 當(dāng) type 小于等于 4 時(shí)總是展示
  },
  // 根據(jù) type 返回對(duì)應(yīng)的類名
  getClassByType(type) {
    switch (type) {
      case 1:
        return 'new-mom-gift';
      case 2:
        return 'xhs-volunteer';
      case 3:
        return 'douyin-volunteer';
      case 4:
        return 'invitation-gift';
      case 5:
        return 'advertising-space-one';
      case 6:
        return 'advertising-space-two';
      case 7:
        return 'advertising-space-three';
      default:
        return '';
    }
  },
  // 根據(jù) type 返回圖片的 mode
  getImageMode(type) {
    return type >= 5 ? 'widthFix' : 'scaleToFill';
  },
  // 獲取默認(rèn)圖片 URL
  getDefaultImage(type) {
    return 'https://yizhen-mamapai-dev.oss-cn-zhangjiakou.aliyuncs.com/certification/2024-06-13/3cb773c6e3614c389619a24d55f868d4.png';
  },
  onPullDownRefresh() {
    Promise.all([this.getHomeConfigPage()]).then(res => {
      this.stopPullDownRefresh();
    });
  },
  onUnload() {
    this.jumpFn()
  },
})

到此這篇關(guān)于微信/支付寶小程序?qū)崿F(xiàn)彈窗動(dòng)畫縮放到某個(gè)位置的文章就介紹到這了,更多相關(guān)彈窗動(dòng)畫縮放到某個(gè)位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: