1、获取小程序顶部/胶囊元素信息

/**
 * 获取胶囊信息，获取顶部元素信息
 * @returns {{boundWidth: (number|number), statusBarHeight: number, boundTop: number}}
 */
export function getBoundInfo() {
  const systemInfo = uni.getSystemInfoSync()
  if (systemInfo.uniPlatform !== 'mp-weixin') {
    return {
      statusBarHeight: 0,
      boundWidth: 0,
      boundTop: 20,
    }
  }
  const statusBarHeight = systemInfo.statusBarHeight // 顶部高度
  const boundWidth = uni.getMenuButtonBoundingClientRect()?.width || 0 // 胶囊宽度
  const boundHeight = uni.getMenuButtonBoundingClientRect()?.height || 0 // 胶囊高度
  const boundTop = uni.getMenuButtonBoundingClientRect()?.top || statusBarHeight // 胶囊距离顶部的高度
  return {
    statusBarHeight, // 顶部高度
    boundWidth, // 胶囊宽度
    boundHeight, // 胶囊高度
    boundTop, // 胶囊距离顶部的高度
  }
}

2、控制元素滚动到顶部/底部

• useScroll.js (这里一定要用防抖,不然小程序内会有问题， ，防抖函数网上自己找吧，这里就不写了)

import { ref } from 'vue'
import { debounce } from '@/utils'
const useScroll = () => {
  const scrollTop = ref(0)

  const handleScroll = debounce((e) => {
    scrollTop.value = e.detail.scrollTop
  }, 500)

  const scrollToTop = () => {
    scrollTop.value = 0
  }

  const scrollToBottom = () => {
    scrollTop.value = 9999
  }

  return {
    scrollTop,
    handleScroll,
    scrollToTop,
    scrollToBottom,
  }
}

export { useScroll }

• 使用

//?回到顶部 - setup
const { scrollTop, handleScroll, scrollToTop } = useScroll()
defineExpose({
  scrollToTop,
})
//template
<scroll-view
  class="u-scroll-view"
  :scroll-y="true"
  lower-threshold="100"
  :scroll-top="scrollTop"
  :scroll-with-animation="true"
  @scroll="handleScroll"
  @scrolltolower="loadMore"
>
</scroll-view>

3、监听左右滑动事件

• useSlipDirection.js

import { ref } from 'vue'
// ?监听左移右移事件
const useSlipDirection = (callback) => {
  const startX = ref(0) // 开始位置
  const delTax = ref(0) // 滑动距离

  const touchStart = (event) => {
    //console.log('touchStart')
    startX.value = event.touches[0].clientX
    // event.preventDefault()
  }

  const touchMove = (event) => {
    //console.log('touchMove')
    delTax.value = event.touches[0].clientX - startX.value
    // e.preventDefault()
  }
  const touchEnd = (event) => {
    console.log(16, delTax.value)
    if (delTax.value > 50) {
      console.log('right')
      delTax.value = 0
      callback('right')
    } else if (delTax.value < -50) {
      console.log('left')
      delTax.value = 0
      callback('left')
    }
  }

  return {
    touchStart,
    touchMove,
    touchEnd,
  }
}

export { useSlipDirection }

• 使用

// js
const { touchStart, touchMove, touchEnd } = useSlipDirection(handleTouchMove)
// html
<view
  v-if="componentVisible"
  class="inner-content"
  :style="{ height: `calc(100% - ${statusBarHeight * 2 + 204 + 116}rpx)` }"
  @touchstart="touchStart"
  @touchmove="touchMove"
  @touchend="touchEnd"
>
</view>

4、获取dom元素信息

• 函数

/**
 *
 * @param query
 */
export function getElRectAsync(query) {
  return new Promise((resolve) => {
    uni.getSystemInfo({
      success: function (res) {
        let info = uni.createSelectorQuery().select(query)
        info
          .boundingClientRect(function (data) {
            //data - 各种参数
            resolve(data)
          })
          .exec()
      },
    })
  })
}

• 使用

getElRectAsync('.top-row').then((res) => {
  variables.topRowHeight = res.height
})