注册 登录
periH
periH
  • 发布：2021-10-13 18:07
  • 更新：2021-10-22 18:35
  • 阅读：764

【报Bug】nvue页面scroll嵌套list组件，list的高度影响了scroll横线滚动的可滑动位置

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10企业版

HBuilderX类型： 正式

HBuilderX版本号： 3.2.9

手机系统： iOS

手机系统版本号： IOS 14

手机厂商： 苹果

手机机型： iPhone7

页面类型： nvue

打包方式： 离线

项目创建方式： HBuilderX

示例代码：
<template> <view> <scroller scroll-direction="horizontal" bounce="false" class="data-container" show-scrollbar="false" >
<list :show-scrollbar="false" class="room-state-x" :bounce="false" :style="{width: ${data.length*132}rpx, height: height+'px'}">
<header :style="{width: ${data.length*132}rpx}">
<view class="row" :style="{width: ${data.length*132}rpx}">
<view v-for="(item,index) in data" class="text-box-column" :key="'date'+index">
<text>{{item}}</text>
</view>
</view>
</header>
<cell v-for="(item,index) in list" :key="index" :style="{width: ${data.length*132}rpx}">
<view class="row" :style="{width: ${data.length*132}rpx}">
<view v-for="($item,i) in item" :key="i" class="text-box-column">
<text>{{$item}}</text>
</view>
</view>
</cell>
</list>
</scroller>
</view>
</template>

<script>
export default {
data() {
return {
data: [],
list: [],
height: 0
} 

    },  
    onShow() {  
        this.height = uni.getSystemInfoSync().windowHeight  
    },  
    mounted() {  
        uni.hideTabBar()  
        for(let i=0; i< 30; i++) {  
            this.data.push(i)  
            this.list[i] = []  
            for(let k=0; k<30;k++) {  
                this.list[i].push(i*k+k+i)  
            }  
        }  
    },  
    methods: {  

    }  
}

</script>

<style>
.data-container{
width: 750rpx;
left: 0;
top: 0;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
}
.text-box-column{
height: 128rpx;
justify-content: center;
flex-direction: column;
align-items: center;
border-right-width: 1rpx;
border-bottom-width: 1rpx;
border-top-width: 1rpx;
border-color: #EEEEEE;
width: 132rpx;
color: #FFFFFF;
background-color: #FFFFFF;
}
</style>

操作步骤：

横向滑动的距离跟高度相关，紧可滑动一小部分

预期结果：

预期能滑动出全部设置宽度的内容

实际结果：

紧可展示部分内容，猜测是跟高度相关

bug描述：

nvue页面scroll嵌套list组件，实现横向滑动及纵向滑动，scroll组件fix定位及设置横向滑动属性，list组件设置动态宽度及屏幕可视区域高度，报[bug]横向滑动的距离跟list的高度相关，不能全部滑动出设置宽度的内容

2021-10-13 18:07 负责人:DCloud_uniAD_HDX 分享

没有找到相关结果

    已邀请:
    DCloud_uniAD_HDX

    DCloud_uniAD_HDX

    Bug已确认

    2021-10-20 20:04 分享
    periH

    periH (作者) 

    <template>  
    <view>  
        <scroller scroll-direction="horizontal"  
            :bounce="false"  
            class="data-container"  
            :show-scrollbar="false"  
        >  
            <list :show-scrollbar="false" class="room-state-x" :bounce="false" :style="{width: `${data.length*132}rpx`, height: height+'px'}">  
                <header :style="{width: `${data.length*132}rpx`}">  
                    <view class="row" :style="{width: `${data.length*132}rpx`}">  
                        <view v-for="(item,index) in data" class="text-box-column" :key="'date'+index">  
                            <text>{{item}}</text>  
                        </view>  
                    </view>  
                </header>  
                <cell v-for="(item,index) in list" :key="index" :style="{width: `${data.length*132}rpx`}">  
                    <view class="row" :style="{width: `${data.length*132}rpx`}">  
                        <view v-for="($item,i) in item" :key="i" class="text-box-column">  
                            <text>{{$item}}</text>  
                        </view>  
                    </view>  
                </cell>  
            </list>  
        </scroller>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                data: [],  
                list: [],  
                height: 0  
            }  

        },  
        onShow() {  
            this.height = uni.getSystemInfoSync().windowHeight  
        },  
        mounted() {  
            uni.hideTabBar()  
            for(let i=0; i< 30; i++) {  
                this.data.push(i)  
                this.list[i] = []  
                for(let k=0; k<30;k++) {  
                    this.list[i].push(i*k+k+i)  
                }  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .data-container{  
        width: 750rpx;  
        left: 0;  
        top: 0;  
        position: fixed;  
        bottom: 0;  
        background-color: #FFFFFF;  
    }  
    .text-box-column{  
        height: 128rpx;  
        justify-content: center;  
        flex-direction: column;  
        align-items: center;  
        border-right-width: 1rpx;  
        border-bottom-width: 1rpx;  
        border-top-width: 1rpx;  
        border-color: #EEEEEE;  
        width: 132rpx;  
        color: #FFFFFF;  
        background-color: #FFFFFF;  
    }  
</style>
    2021-10-13 18:08 分享
    DCloud_uniAD_HDX

    DCloud_uniAD_HDX

    从这段代码上哪里可以确定横向没有滑动出全部内容，请录个视频看看效果

    2021-10-14 10:42 分享

    • periH (作者)

      https://ask.dcloud.net.cn/file/download/file_name-aW9z5LiO6bi/6JKZ57O757uf5pWI5p6c5q+U6L6DLnppcA==__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9hbnN3ZXIvMjAyMTEwMTQvYmIzZWEyYjdmODM1Yjc0MzcxOWM2ZjM5ZjVhM2EzMDQ=

      2021-10-14 15:01

    • periH (作者)

      老师，安卓与ios的视频录制都在压缩包里，2端表现不一致，烦请查看一下

      2021-10-14 15:01

    评论 取消
    periH

    periH (作者)

    老师，安卓与ios的视频录制都在压缩包里，2端表现不一致，烦请查看一下

    2021-10-14 15:01 分享
    DCloud_uniAD_HDX

    DCloud_uniAD_HDX

    bug已确认，设置 position: fixed; 排版计算有问题，当然版本解决方案去掉 position: fixed;

    2021-10-19 14:30 分享

    • periH (作者)

      ios去掉fixed之后效果并没有变化，老师，代码及视频在下面

      2021-10-19 17:37

    评论 取消
    periH

    periH (作者) 

    <template>  
    <view>  
        <scroller scroll-direction="horizontal"  
            :bounce="false"  
            class="data-container"  
            :show-scrollbar="false"  
            :style="{height: height+'px'}"  
        >  
            <list :show-scrollbar="false" class="room-state-x" :bounce="false" :style="{width: `${data.length*132}rpx`, height: height+'px'}">  
                <header :style="{width: `${data.length*132}rpx`}">  
                    <view class="row" :style="{width: `${data.length*132}rpx`}">  
                        <view v-for="(item,index) in data" class="text-box-column" :key="'date'+index">  
                            <text>{{item}}</text>  
                        </view>  
                    </view>  
                </header>  
                <cell v-for="(item,index) in list" :key="index" :style="{width: `${data.length*132}rpx`}">  
                    <view class="row" :style="{width: `${data.length*132}rpx`}">  
                        <view v-for="($item,i) in item" :key="i" class="text-box-column">  
                            <text>{{$item}}</text>  
                        </view>  
                    </view>  
                </cell>  
            </list>  
        </scroller>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                data: [],  
                list: [],  
                height: 0  
            }  

        },  
        onShow() {  
            this.height = uni.getSystemInfoSync().windowHeight  
        },  
        mounted() {  
            uni.hideTabBar()  
            for(let i=0; i< 30; i++) {  
                this.data.push(i)  
                this.list[i] = []  
                for(let k=0; k<30;k++) {  
                    this.list[i].push(i*k+k+i)  
                }  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .data-container{  
        width: 750rpx;  
        /* left: 0;  
        top: 0;  
        position: fixed;  
        bottom: 0; */  
        background-color: #FFFFFF;  
    }  
    .text-box-column{  
        height: 128rpx;  
        justify-content: center;  
        flex-direction: column;  
        align-items: center;  
        border-right-width: 1rpx;  
        border-bottom-width: 1rpx;  
        border-top-width: 1rpx;  
        border-color: #EEEEEE;  
        width: 132rpx;  
        color: #FFFFFF;  
        background-color: #FFFFFF;  
    }  
</style>
    2021-10-19 17:36 分享

    • DCloud_uniAD_HDX

      上面的测试代码缺少相关样式 例如 row，我们测试的结果和你的不一致，请提供一个简单完整的测试工程

      2021-10-19 18:04

    • periH (作者)

      回复 DCloud_uniAD_HDX: demo在下面，麻烦看一下，谢谢

      2021-10-20 10:10

    评论 取消
    periH

    periH (作者)

    老师，这个是一个简单的demo，麻烦看一下

    2021-10-20 10:10 分享

    • periH (作者)

      回复 DCloud_IOS_XTY: 安卓是可以的，ios不设置height直接无法横向滚动，如果设置了大于750rpx的话还能滑动一点点

      2021-10-22 17:53

    • DCloud_IOS_XTY

      你可以临时先不设height避开此问题

      2021-10-25 09:56

    • periH (作者)

      回复 DCloud_IOS_XTY: 不设置height安卓正常，ios无法横向滑动

      2021-10-25 18:23

    • DCloud_IOS_XTY

      回复 7***@qq.com: 加你q了通过下在q上沟通下

      2021-10-26 18:48

    • periH (作者)

      回复 DCloud_IOS_XTY: 请问好久修复呢，这次版本更新也没看到修复

      2021-11-12 10:45

    • DCloud_IOS_XTY

      回复 7***@qq.com: 修复了

      2021-11-12 15:23

    • periH (作者)

      回复 DCloud_IOS_XTY: 没看到效果呢，用编辑器的基座还是不行，用你发给我那个基座就可以

      2021-11-12 17:15

    • DCloud_IOS_XTY

      回复 7***@qq.com: 是用的alpha版吗？alpha版已修复

      2021-11-12 17:24

    • periH (作者)

      回复 DCloud_IOS_XTY: 好的，我试一下，我现在用的标准版的

      2021-11-12 17:42

    评论 取消
    bslakeyuitt

    bslakeyuitt

    请问官方什么时候能解决该问题，我们项目主要业务遇到了该问题，导致目前无法上线，十分紧急，非常感谢！！！

    2021-10-22 18:35 分享
    评论 取消
    为什么被折叠? 0 个回复被折叠

    该问题目前已经被锁定, 无法添加新回复

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报