2***@qq.com
2***@qq.com
  • 发布:2024-05-02 18:56
  • 更新:2024-05-02 18:56
  • 阅读:30

uni.createSelectorQuery用class获取nodeRef有什么要求吗?

分类:uni-app

微信开发者工具中

<template>  
  <view class="layout">  
    <view class="top">  
      <live-player  
        id="myLive"  
        src="https://domain/pull_stream"  
        autoplay  
        @statechange="changeTimeEnd"  
        @error="error"  
        muted="true"  
        object-fit="contain"  
      />  
      <view class="dbar">  
        <view class="count">  
          <text class="date">{{ date }}</text>  
          <text class="event">{{ eventCount }}个事件</text>  
        </view>  
        <uni-icons type="bars" color="" size="25" />  
      </view>  
      <view class="mask">  
        <uni-icons  
          custom-prefix="iconfont"  
          type="icon-tui30"  
          size="25"  
          color="#fff"  
        ></uni-icons>  
        <uni-load-more status="loading"></uni-load-more>  
        <uni-icons  
          custom-prefix="iconfont"  
          type="icon-jin30"  
          size="25"  
          color="#fff"  
        ></uni-icons>  
      </view>  
    </view>  

    <view  
      class="center"  
      v-if="centerHeight"  
      :style="{ height: centerHeight + 'px' }"  
    >  
      <fixed-section>  
        <view class="section">  
          <view class="timeShow" @click="handleClick('startTime ' + startTime)">  
            <text>{{ startTime }}</text>  
          </view>  
          <view>-</view>  
          <view class="timeShow" @click="handleClick('endTime ' + endTime)">  
            <text>{{ endTime }}</text>  
          </view>  
        </view>  
      </fixed-section>  

      <canvas  
        canvas-id="bgCanvas"  
        :style="{  
          height: `${canvasHeight}px`,  
          position: 'absolute',  
          top: canvasTop + 'px',  
          zIndex: 1,  
        }"  
      ></canvas>  
      <canvas  
        canvas-id="dyCanvas"  
        :style="{  
          height: `${canvasHeight}px`,  
          position: 'absolute',  
          top: canvasTop + 'px',  
          zIndex: 2,  
          // background: transparent,  
        }"  
        disable-scroll  
        @touchstart="handleTouchStart"  
        @touchmove="handleTouchMove"  
        @touchend="handleTouchEnd"  
      ></canvas>  

      <popup-time-picker  
        ref="timePicker"  
        @time-selected="handleTimeSelected"  
      ></popup-time-picker>  
    </view>  

    <view class="bottom">  
      <view class="e1">  
        <uni-icons  
          custom-prefix="iconfont"  
          type="icon-nosound"  
          size="25"  
          color=""  
        ></uni-icons>  
        <text>声音</text>  
      </view>  
      <view class="e1">  
        <uni-icons  
          custom-prefix="iconfont"  
          type="icon-beisu"  
          size="25"  
          color=""  
        ></uni-icons>  
        <text>倍速</text>  
      </view>  
      <view class="e1">  
        <uni-icons type="download" color="" size="25" />  
        <text>下载</text>  
      </view>  
      <view class="e1">  
        <uni-icons type="calendar" color="" size="25" />  
        <text>日期</text>  
      </view>  
    </view>  
  </view>  
</template>  

export const getViewRectInfo = (className, callback) => {  
    // console.log(className);  
    let query = uni.createSelectorQuery();  
    return new Promise((resolve) => {  
      query  
        .select("." + className)  
        .boundingClientRect(data => {  
            // console.log(data);  
          const result = {  
            width: data.width,  
            height: data.height,  
            top: data.top,  
            bottom: data.bottom,  
            left: data.left,  
            right: data.right,  
          };  
          callback(result); // 调用回调函数,并传递结果对象  
          resolve(result); // 返回结果对象  
        }).exec();  
    });  
  };

这是fixed-section的定义

<template>  
  <view class="fixed-section">  
    <slot></slot>  
  </view>  
</template>  

<script setup>  
</script>  

<style lang="scss" scoped>  
.fixed-section {  
  position: sticky;  
  top: 0;  
  left: 0;  
  right: 0;  
  z-index: 999;  
  // background: white;  
}  
</style>

getViewRectInfo获取类top和bottom的时候正常,获取类section的时候,select不到,请问可能是什么原因造成的,我的uniapp版本

  "dependencies": {  
    "@climblee/uv-ui": "^1.1.20",  
    "@dcloudio/uni-app": "3.0.0-4010420240430001",  
    "@dcloudio/uni-app-plus": "3.0.0-4010420240430001",  
    "@dcloudio/uni-components": "3.0.0-4010420240430001",  
    "@dcloudio/uni-h5": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-alipay": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-baidu": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-jd": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-lark": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-qq": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-toutiao": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-weixin": "3.0.0-4010420240430001",  
    "@dcloudio/uni-mp-xhs": "3.0.0-4010420240430001",  
    "@dcloudio/uni-quickapp-webview": "3.0.0-4010420240430001",  
    "@dcloudio/uni-ui": "^1.5.5",  
    "mp-html": "^2.4.3",  
    "sass": "^1.75.0",  
    "scss": "^0.2.4",  
    "vue": "^3.4.23",  
    "vue-i18n": "^9.13.0"  
  },  
  "devDependencies": {  
    "@dcloudio/types": "^3.4.8",  
    "@dcloudio/uni-automator": "3.0.0-4010420240430001",  
    "@dcloudio/uni-cli-shared": "3.0.0-4010420240430001",  
    "@dcloudio/uni-stacktracey": "3.0.0-4010420240430001",  
    "@dcloudio/vite-plugin-uni": "3.0.0-4010420240430001",  
    "@vue/runtime-core": "^3.4.23",  
    "@vue/tsconfig": "^0.1.3",  
    "typescript": "^4.9.4",  
    "vite": "5.2.8",  
    "vue-tsc": "^1.0.24"  
  }
2024-05-02 18:56 负责人:无 分享
已邀请:

要回复问题请先登录注册