popup-picker尺寸放大两倍以后，默认选中的样式，定位在第二个选项

[susan-github]

v0.0.117

Android and iOS

 .scroller-component{
            height: 476px;
        }

        .scroller-mask{
            background-size: 100% 204px;
        }
        .scroller-indicator{
            height: 68px;
            top: 204px;
        }
        .scroller-item{
            height: 68px;
            line-height: 68px;
            font-size: 32px;
        }

<!--put your code here-->

Expected behavior：默认选中，第一个选项 Actual behavior：默认选中的值是正确的，界面中，默认选中第二项

省查元素发现transform的值不准确，查看源码，src/components/picker/scroller.js中有段代码：

if (component.clientHeight === 0) {
    self.__setDimensions(238, 204)
  }

可能是DOM没有加载完，clientHeight为0，默认值为238， 尝试过将该值也放大两倍，样式正确，但是无法满足移动端根据dpr适配. 请问有什么好的优化方案么？

[airyland]

看问题不是很明白，是界面当前值位置不正确，但是在value里是对的？在哪个型号机子上可以重现？

[airyland]

刚标题没看清楚，目前这个组件的尺寸都是固定的。

[susan-github]

如果是移动端的，要用这个组件，就没办法适配了。

[airyland]

现在的样式在哪些设备上有问题？

[susan-github]

按照以上的CSS改了之后，不改scroller.js里的默认值，我在真机iPhone6s上测试有问题， 模拟器上试了几个，都有相同的问题。

[airyland]

我是想问，现在默认的样式上满足不了要求么？

[susan-github]

是的，我要在data-dpr="2"或者data-dpr="3"的时候，对应的放大这个组件的尺寸。

[susan-github]

用手淘H5的flexible解决适配问题。所以尺寸不会固定，都是rem为单位的

[airyland]

对，dpr适配一般需要rem，而Vux的样式包括WeUI都是px单位，目前不支持。

[susan-github]

应该是，只要实现src/components/picker/scroller.js中的默认值238基准值为动态的，就能解决，我自己再想想办法吧

[susan-github]

或者是等DOM加载好之后，调new Scroller()方法，不知道有没有办法？

[airyland]

组件内部是用vue的nextTick调用new Scroller的，理论上DOM已经加载完了。

[susan-github]

那没理由进入这个判断，clientHeight为0呀？

if (component.clientHeight === 0) {
    self.__setDimensions(238, 204)
  }

[airyland]

不可见元素的clientHeight就是0，popup-picker默认隐藏，它依赖于picker, 你去picker试试是不会进入这个逻辑的。

[susan-github]

我之前没打过断点，但是试过，将这个逻辑里的238，改成476，样式就好了。

[susan-github]

调试步骤： (1)下载vux npm install （2)在文件src/components/picker/index.vue中添加log

ready () {
    console.log('picker created!')
    this.$nextTick(() => {
      this.render(this.data, this.value)
    })
  },

(3)在文件src/components/picker/scroller.js中添加log

if (component.clientHeight === 0) {
    console.log('component.clientHeight === 0')
    self.__setDimensions(238, 204)
  }

chrome console台结果：

不是您说的不会进这个逻辑。

[airyland]

@susan-github 你确定你是在picker的demo调试，而不是在Popup-picker的demo调试？

[susan-github]

我是在popup-picker的demo调试的，所以想请教一下，这两个的差别是什么，popup和popup-picker都是隐藏的呀？

[airyland]

popup-picker 依赖于picker。

你没看清楚我上面说的，会进入这个===0的逻辑是因为popup里面的内容就是隐藏的获取不到正确宽度。而如果是直接显示(看Picker的demo)就不会进入这个逻辑了。

[airyland]

建议你直接fork一份代码修改一下源代码来满足一下业务需求。

[susan-github]

明白你的意思了，多谢耐心回复~

[susan-github]

将固定的238更改为parseInt(getComputedStyle(component, 'height'), 10)来获取高度，可以解决适配问题。

if (component.clientHeight === 0) {
    self.__setDimensions(parseInt(getComputedStyle(component, 'height'), 10), 204)
  }

[airyland]

你顺手提个PR吧。

[airyland]

close via #197