菜汤不甜
菜汤不甜
  • 发布:2024-05-15 16:57
  • 更新:2024-05-16 16:30
  • 阅读:175

【报Bug】快手小程序端,动态设置swipe的高度后,swipe-item显示异常

分类:uni-app

产品分类: uniapp/小程序

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 4.15

第三方开发者工具版本号: 1.46.1-9f9a84c-x64

基础库版本号: 1.74.1

项目创建方式: HBuilderX

示例代码:
<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>

操作步骤:

需求:设置纵向滑动的swipe,并且swipe高度和界面一致(实际功能用于视频的上下滑动)

遇到的问题:动态调整swipe高度后,界面出显示多个swipe-item,仿佛swipe-item的高度并无重新渲染

尝试过以下方案:
测试1、将swipe-item一并设置高度,结果:swipe垂直滑动的效果并不理想
测试2、将动态设置的高度写死,swipe-item 恢复正常

备注:附件有测试代码

预期结果:

希望动态设置swipe高度后,swipe-item 能正常显示

实际结果:

界面出显示多个swipe-item

bug描述:

动态给纵向swipe设置高度后,swipe中并列显示多个swipe-item,仿佛swipe-item的高度并无重新渲染

2024-05-15 16:57 负责人:DCloud_UNI_OttoJi 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈新问题,我看一下

  • 菜汤不甜 (作者)

    目前怎么样呢

    2024-05-27 23:19

  • 菜汤不甜 (作者)

    我这用vue文件试了下 感觉是nvue对快手不太友好导致的,最终我这做了两个页面,一个nvue用于app,一个vue用于快手

    2024-05-28 16:32

要回复问题请先登录注册