微信开发者工具中
<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"
}
0 个回复