<template>
<view id="js_body" style="height: 100vh;display: flex;flex-direction:column;">
<swiper vertical :style="[bodyView]">
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
<swiper-item ><view>{{JSON.stringify(bodyView)}}</view></swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
bodyView:{}
}
},
async onLoad() {
let {width,height} = await this.utils_getViewInfo('#js_body');
this.bodyView = {
width:`${width}px`,
height:`${height}px`,
background:`green`,
}
console.error(this.bodyView)
},
methods: {
utils_getViewInfo(id){
let that = this
return new Promise(function (resolve, reject){
that.$nextTick(()=>{
const query = uni.createSelectorQuery().in(that);
query.select(id).boundingClientRect(data => {
resolve&&resolve(data)
}).exec(()=>{});
})
})
}
}}
</script>
- 发布:2024-05-15 16:57
- 更新:2024-05-16 16:30
- 阅读:175
产品分类: uniapp/小程序
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版
HBuilderX类型: 正式
HBuilderX版本号: 4.15
第三方开发者工具版本号: 1.46.1-9f9a84c-x64
基础库版本号: 1.74.1
项目创建方式: HBuilderX
示例代码:
操作步骤:
需求:设置纵向滑动的swipe,并且swipe高度和界面一致(实际功能用于视频的上下滑动)
遇到的问题:动态调整swipe高度后,界面出显示多个swipe-item,仿佛swipe-item的高度并无重新渲染
尝试过以下方案:
测试1、将swipe-item一并设置高度,结果:swipe垂直滑动的效果并不理想
测试2、将动态设置的高度写死,swipe-item 恢复正常
备注:附件有测试代码
需求:设置纵向滑动的swipe,并且swipe高度和界面一致(实际功能用于视频的上下滑动)
遇到的问题:动态调整swipe高度后,界面出显示多个swipe-item,仿佛swipe-item的高度并无重新渲染
尝试过以下方案:
测试1、将swipe-item一并设置高度,结果:swipe垂直滑动的效果并不理想
测试2、将动态设置的高度写死,swipe-item 恢复正常
备注:附件有测试代码
预期结果:
希望动态设置swipe高度后,swipe-item 能正常显示
希望动态设置swipe高度后,swipe-item 能正常显示
实际结果:
界面出显示多个swipe-item
界面出显示多个swipe-item
菜汤不甜 (作者)
目前怎么样呢
2024-05-27 23:19
菜汤不甜 (作者)
我这用vue文件试了下 感觉是nvue对快手不太友好导致的,最终我这做了两个页面,一个nvue用于app,一个vue用于快手
2024-05-28 16:32