记：weui.js picker坑选项值发生偏移

最新推荐文章于 2023-12-12 17:02:47 发布

原创最新推荐文章于 2023-12-12 17:02:47 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

weui.js

当前文章被收录于：

weui.js

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

在使用weui.js的picker组件时遇到默认值显示与实际选择不一致的问题，前端选择与实际返回值存在偏移，甚至导致界面溢出。尝试调整bodyHeight未果，最终通过修改offset值成功解决，但该值可能需根据页面CSS做具体调整。

代码如下 $date 为官方选择数据json传值。具体格式请查看官方例子。

        $("#trigger1").click(function () {
            weui.picker({!! $date !!}, {
                className: 'custom-classname',
                container: 'body',
                defaultValue: [],
                onChange: function (result) {
                    console.log(result)
                },
                onConfirm: function (result) {
                    console.log(result[0].label)
                    $('#trigger1').text(result[0].value)
                },
                id: 'trigger1'
            });
        });

调用用，发现前端页面使用，默认值显示和选择发生偏移。前端选择15的时候，值是14甚至是13。而且还产生界面溢出。和首项选择不到的情况
在这里插入图片描述

这两种情况点击确定后所得值分别为最后和第一个选项值。

解决方案：
看了github上面得issue，有说调整picker选项得高度。通过调整
bodyHeight: 5 * 30 // picker的高度，用于辅助点击滚动的计算
来尝试解决问题，还是未解决问题。最终再调整offset这个值得时候解决了问题。
可能根据不同页面CSS，这个值需要自己去调整才能解决问题。

标签

#javascript