ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[bugfix] Picker：incorrect option height in some android devices (#1449)

Browse Source 
[bugfix] Picker：incorrect option height in some android devices
This commit is contained in:
SnowZhangXl
2018-07-10 09:52:16 +08:00
committed by neverland
parent 8c7dc1e622
commit 75d0aecd1e
5 changed files with 349 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/picker/PickerColumn.vue
View File

@@ -11,6 +11,7 @@
<ul :style="wrapperStyle">
<li
v-for="(option, index) in options"
:key="index"
v-html="getOptionText(option)"
class="van-ellipsis"
:class="b('item', {
@@ -18,6 +19,7 @@
selected: index === currentIndex
})"
@click="setIndex(index, true)"
:style="itemStyle"
/>
</ul>
</div>
@@ -96,6 +98,11 @@ export default create({
transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`,
lineHeight: this.itemHeight + 'px'
};
},
itemStyle() {
return {
height: this.itemHeight + 'px'
};
}
},

54
packages/picker/test/__snapshots__/demo.spec.js.snap
View File

@@ -9,11 +9,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -27,9 +27,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 44px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -47,11 +47,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -65,17 +65,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column column1" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">浙江</li>
<li class="van-ellipsis van-picker-column__item">福建</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -91,17 +91,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column column1" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">浙江</li>
<li class="van-ellipsis van-picker-column__item">福建</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

28
packages/picker/test/__snapshots__/index.spec.js.snap
View File

@@ -3,13 +3,13 @@
exports[`column watch default index 1`] = `
<div class="van-picker-column">
<ul style="line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1990</li>
<li class="van-ellipsis van-picker-column__item">1991</li>
<li class="van-ellipsis van-picker-column__item">1992</li>
<li class="van-ellipsis van-picker-column__item">1993</li>
<li class="van-ellipsis van-picker-column__item">1994</li>
<li class="van-ellipsis van-picker-column__item">1995</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;
@@ -17,13 +17,13 @@ exports[`column watch default index 1`] = `
exports[`column watch default index 2`] = `
<div class="van-picker-column">
<ul style="line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1991</li>
<li class="van-ellipsis van-picker-column__item">1992</li>
<li class="van-ellipsis van-picker-column__item">1993</li>
<li class="van-ellipsis van-picker-column__item">1994</li>
<li class="van-ellipsis van-picker-column__item">1995</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;