[improvement] Picker: optimize style

This commit is contained in:
陈嘉涵
2019-05-22 17:37:39 +08:00
parent 171621efed
commit 1f442532fa
6 changed files with 62 additions and 75 deletions
@@ -8,21 +8,21 @@ exports[`change option 1`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
@@ -40,21 +40,21 @@ exports[`change option 2`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 1500ms; line-height: 44px;">
<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>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
@@ -72,22 +72,22 @@ exports[`change option 3`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 1500ms; line-height: 44px;">
<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>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 1500ms; line-height: 44px;">
<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>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -104,21 +104,21 @@ exports[`reset method 1`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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__mask" style="background-size: 100% 88px;"></div>
@@ -135,21 +135,21 @@ exports[`reset method 2`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
@@ -167,21 +167,21 @@ exports[`watch areaList & code 1`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
@@ -199,21 +199,21 @@ exports[`watch areaList & code 2`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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>
@@ -231,21 +231,21 @@ exports[`watch areaList & code 3`] = `
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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-picker-column" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; line-height: 44px;">
<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>