choin
choin
  • 发布:2021-01-04 20:23
  • 更新:1 天前
  • 阅读:200

【报Bug】nvue下picker-view问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.0.4

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: note7

页面类型: nvue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
【自己写了个, 完全没有官方的偏移差 , 给用的着的用】  
<template>  
    <view class="flex-col">  

        <view class="flex-col" style="position: relative;">  

            <scroll-view ref="scroll" class="flex-col" :scroll-y="true" :show-scrollbar="false" @scroll="scroll" :style="{  
                width: width + 'px',  
                height: height + 'px'  
            }"  
             @touchstart="touchstart" @touchend="touchend" :scroll-top="scrollTop" :scroll-with-animation="true">  

                <view class="flex-col" ref="scrollContent">  
                    <!-- 居中高度 -->  
                    <view :style="{ height: centerHeight }" v-if="centerHeight != 0"></view>  

                    <!-- 选项 -->  
                    <view class="item flex-center" v-for="(rs, index) in lists" :key="index">  
                        <text class="item-text">{{ rs.name }}</text>  
                    </view>  

                    <!-- 居中高度 -->  
                    <view :style="{ height: centerHeight }" v-if="centerHeight != 0"></view>  
                </view>  

            </scroll-view>  

            <!-- 上下蒙层 -->  
            <view :style="{  
                position: 'absolute',  
                left: 0,  
                top: 0,  
                backgroundImage: 'linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0))',  
                width: width + 'px',  
                height: centerHeight  
            }"></view>  
            <view :style="{  
                position: 'absolute',  
                left: 0,  
                bottom: 0,  
                backgroundImage: 'linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0))',  
                width: width + 'px',  
                height: centerHeight  
            }"></view>  

            <!-- 选中项的样式 -->  
            <view :style="{  
                position: 'absolute',  
                left: 0,  
                top: centerHeight,  
                borderTopColor: '#f1f1f1',  
                borderTopStyle: 'solid',  
                borderTopWidth: '1px',  
                borderBottomColor: '#f1f1f1',  
                borderBottomStyle: 'solid',  
                borderBottomWidth: '1px',  
                width: width + 'px',  
                height: '50px'  
            }"></view>  
        </view>  

    </view>  
</template>  

<script>  
    const dom = weex.requireModule('dom');  

    export default {  
        props: {  
            width: {  
                type: [String, Number],  
                default: 0  
            },  

            height: {  
                type: [String, Number],  
                default: 0  
            },  

            lists: {  
                type: Array,  
                default: function() {  
                    return []  
                }  
            }  
        },  

        data() {  
            return {  
                // 自动获取居中高度(用于第一条或最后一条能显示在中间位置)  
                centerHeight: 0,  
                // 滚动到的位置  
                scrollTop: 0,  
                // 自动获取滚动区域内容的高度  
                scrollContentHeight: 0,  
                // 到顶部的距离  
                scrollTopHeight: 0,  
            };  
        },  

        mounted() {  
            console.log(this.lists)  
            this.$nextTick(() => {  
                this.init();  
            });  
        },  

        methods: {  
            init() {  
                this.width = uni.upx2px(this.width);  
                this.height = uni.upx2px(this.height);  
                console.log(this.height)  

                /*  
                dom.getComponentRect(this.$refs.scroll, option => {  
                    this.centerHeight = option.size.height / 2 - 25 + 'px';  
                });  
                */  
               this.centerHeight = this.height / 2 - 25 + 'px';  

                dom.getComponentRect(this.$refs.scrollContent, option => {  
                    this.scrollContentHeight = option.size.height;  
                });  
            },  

            scroll(e) {  
                this.scrollTopHeight = e.detail.scrollTop;  
            },  

            touchend() {  
                setTimeout(() => {  
                    this.deviation();  
                }, 100);  
            },  

            deviation() {  
                // 总行数  
                var itemTotal = parseInt(this.scrollContentHeight / 50);  
                // 当前行数  
                var currentItemNumber = parseInt(this.scrollTopHeight / 50);  

                if ((currentItemNumber == 0 && this.scrollTop == 0 && this.scrollTopHeight == 0)) {  
                    // 再次滚动到顶部不再继续滚动  
                    return;  
                }  

                if ((currentItemNumber == itemTotal - 1 && this.scrollTop == Math.round(this.scrollContentHeight - 50) && Math.round(  
                        this.scrollTopHeight) == itemTotal * 50)) {  
                    // 再次滚动到底部不再继续滚动  
                    return;  
                }  

                // 执行偏移  
                if (this.scrollTop == currentItemNumber * 50) {  
                    this.scrollTop = (currentItemNumber + 1) * 50;  
                } else {  
                    this.scrollTop = currentItemNumber * 50;  
                }  
            },  
        }  
    }  
</script>  

<style lang="scss">  
    .item {  
        height: 50px;  

        &-text {  
            font-size: 32rpx;  
        }  
    }  
</style>

操作步骤:

1

预期结果:

1

实际结果:

1

bug描述:

1、行高不对称(或者理解为坐标不对称,导致遮罩层淡化了顶部的颜色)
2、设置了indicator-style的顶部与底部一直的边框颜色,你会发现底部的比上面的粗

2021-01-04 20:23 负责人:无 分享
已邀请:
choin

choin (作者)

或者说,有可避免这个错误,来实现自动列数?

  • choin (作者)

    不过,虽说报错貌似不影响运行

    2021-01-04 20:28

DCloud_UNI_Anne

DCloud_UNI_Anne

nvue页面子节点未继承 picker-view 的选中框的高度,需要自己设置高度并居中。

  • choin (作者)

    设置了,并且也据中了 还是这样

    2021-01-06 13:03

  • choin (作者)

    还有一个问题,我看官方示例 滚动到顶继续滚动还可以动,而我这边就不能动了, 到头就停住了,不知道咋回事

    2021-01-06 13:06

  • choin (作者)

    哦,官方的页面是vue

    2021-01-06 13:06

  • choin (作者)

    你们看一下吧,可能nvue下是有这个问题

    2021-01-06 13:06

  • choin (作者)

    我上传了视频,看一下

    2021-01-06 13:24

  • DCloud_UNI_Anne

    回复 choin: 官方示例nvue下也可以

    2021-01-06 17:09

  • choin (作者)

    回复 DCloud_UNI_Anne: 我上传了官方的代码运行的,一模一样,什么也没改,你看看吧!不知道你那边的nvue是如何不跟我一样的,我还要说一句, "nvue" : {

    "flex-direction" : "row"

    }

    我是这么设置的,你也是吗?

    2021-01-06 17:24

choin

choin (作者)

滚动的元素越多,差的越大,这分明就是高度没有计算正确啊

choin

choin (作者)

刚才我加了100条,都差了一般的高度了!

  • choin (作者)

    一半

    2021-01-07 18:06

choin

choin (作者)

我新传的【2021-1-7.rar】 看看都偏哪去了。。

  • DCloud_UNI_Anne

    新建一个空白项目,直接贴官方picker-view示例,看下是否还有此问题

    2021-01-07 19:15

  • choin (作者)

    回复 DCloud_UNI_Anne: 有! 看【 2021-1-6.rar】这个附件就是新建页面

    2021-01-07 19:26

swyhei8080@qq.com

swyhei8080@qq.com

我这里也是,用的HBuilderX是3.1.2.20210206,会偏差好多,而且显示过程很慢。 ios正常,安卓有问题

swyhei8080@qq.com

swyhei8080@qq.com

我看到有人2020年1月份就提了这个问题了

  • choin (作者)

    嗯,我测试的安卓有问题,我们没有ios,修复了记得回来说一下~

    2021-02-08 16:01

程咬金3斧头

程咬金3斧头

nvue就是有这个问题,行数越多偏差越大,官方就是不解决,我嘞个去。。。。

要回复问题请先登录注册