mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Picker: optimize code
This commit is contained in:
陈嘉涵
parent
21db7e57ad
commit
171621efed
@ -2,6 +2,10 @@
|
||||
|
||||
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.0)
|
||||
|
||||
##### Picker
|
||||
|
||||
- 新增惯性滚动
|
||||
|
||||
##### Tab
|
||||
|
||||
- 新增`border`属性
|
||||
|
||||
@ -40,13 +40,13 @@ exports[`create a AddressEdit 1`] = `
|
||||
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size:100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
@ -110,13 +110,13 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transform:translate3d(0, 88px, 0);transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1);transition-duration:0ms;line-height:44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform:translate3d(0, 88px, 0);transition-duration:0ms;line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size:100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
|
||||
@ -9,21 +9,21 @@ exports[`change option 1`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
@ -41,21 +41,21 @@ exports[`change option 2`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 1500ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
|
||||
<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>
|
||||
@ -73,21 +73,21 @@ exports[`change option 3`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 1500ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 1500ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -105,20 +105,20 @@ exports[`reset method 1`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 44px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -136,21 +136,21 @@ exports[`reset method 2`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
@ -168,21 +168,21 @@ exports[`watch areaList & code 1`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
@ -200,21 +200,21 @@ exports[`watch areaList & code 2`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
@ -232,21 +232,21 @@ exports[`watch areaList & code 3`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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-column" style="height: 220px;">
|
||||
<ul style="transform: translate3d(0, 88px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 44px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
|
||||
@ -6,14 +6,25 @@ import { TouchMixin } from '../mixins/touch';
|
||||
const DEFAULT_DURATION = 200;
|
||||
|
||||
// 惯性滑动思路:
|
||||
// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move 距
|
||||
// 离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
|
||||
// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
|
||||
// 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
|
||||
const MOMENTUM_DURATION = 1500;
|
||||
const MOMENTUM_LIMIT_TIME = 300;
|
||||
const MOMENTUM_LIMIT_DISTANCE = 15;
|
||||
|
||||
const [sfc, bem] = use('picker-column');
|
||||
|
||||
function getElementTranslateY(element) {
|
||||
const { transform } = window.getComputedStyle(element);
|
||||
const translateY = transform.slice(7, transform.length - 1).split(', ')[5];
|
||||
|
||||
return Number(translateY);
|
||||
}
|
||||
|
||||
function isOptionDisabled(option) {
|
||||
return isObj(option) && option.disabled;
|
||||
}
|
||||
|
||||
export default sfc({
|
||||
mixins: [TouchMixin],
|
||||
|
||||
@ -30,23 +41,25 @@ export default sfc({
|
||||
return {
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
startOffset: 0,
|
||||
momentumOffset: 0,
|
||||
touchTimestamp: 0,
|
||||
moving: false,
|
||||
options: deepClone(this.initialOptions),
|
||||
currentIndex: this.defaultIndex
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$parent.children && this.$parent.children.push(this);
|
||||
if (this.$parent.children) {
|
||||
this.$parent.children.push(this);
|
||||
}
|
||||
|
||||
this.setIndex(this.currentIndex);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
const { children } = this.$parent;
|
||||
children && children.splice(children.indexOf(this), 1);
|
||||
|
||||
if (children) {
|
||||
children.splice(children.indexOf(this), 1);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -66,7 +79,7 @@ export default sfc({
|
||||
this.touchStart(event);
|
||||
|
||||
if (this.moving) {
|
||||
const { translateY } = this.getEleTransform(this.$refs.wrapper);
|
||||
const translateY = getElementTranslateY(this.$refs.wrapper);
|
||||
this.startOffset = Math.min(0, translateY);
|
||||
} else {
|
||||
this.startOffset = this.offset;
|
||||
@ -75,7 +88,7 @@ export default sfc({
|
||||
this.duration = 0;
|
||||
this.moving = false;
|
||||
this.transitionEndTrigger = null;
|
||||
this.touchTimestamp = Date.now();
|
||||
this.touchStartTime = Date.now();
|
||||
this.momentumOffset = this.startOffset;
|
||||
},
|
||||
|
||||
@ -90,15 +103,15 @@ export default sfc({
|
||||
);
|
||||
|
||||
const now = Date.now();
|
||||
if (now - this.touchTimestamp > MOMENTUM_LIMIT_TIME) {
|
||||
this.touchTimestamp = now;
|
||||
if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
|
||||
this.touchStartTime = now;
|
||||
this.momentumOffset = this.offset;
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
const distance = this.offset - this.momentumOffset;
|
||||
const duration = Date.now() - this.touchTimestamp;
|
||||
const duration = Date.now() - this.touchStartTime;
|
||||
const allowMomentum =
|
||||
duration < MOMENTUM_LIMIT_TIME &&
|
||||
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
|
||||
@ -124,24 +137,21 @@ export default sfc({
|
||||
}
|
||||
},
|
||||
|
||||
onClickItem(e) {
|
||||
const index = Number(e.currentTarget.getAttribute('data-index'));
|
||||
onClickItem(index) {
|
||||
this.duration = DEFAULT_DURATION;
|
||||
this.setIndex(index, true);
|
||||
},
|
||||
|
||||
adjustIndex(index) {
|
||||
index = range(index, 0, this.count);
|
||||
for (let i = index; i < this.count; i++) {
|
||||
if (!this.isDisabled(this.options[i])) return i;
|
||||
}
|
||||
for (let i = index - 1; i >= 0; i--) {
|
||||
if (!this.isDisabled(this.options[i])) return i;
|
||||
}
|
||||
},
|
||||
|
||||
isDisabled(option) {
|
||||
return isObj(option) && option.disabled;
|
||||
for (let i = index; i < this.count; i++) {
|
||||
if (!isOptionDisabled(this.options[i])) return i;
|
||||
}
|
||||
|
||||
for (let i = index - 1; i >= 0; i--) {
|
||||
if (!isOptionDisabled(this.options[i])) return i;
|
||||
}
|
||||
},
|
||||
|
||||
getOptionText(option) {
|
||||
@ -155,7 +165,10 @@ export default sfc({
|
||||
const trigger = () => {
|
||||
if (index !== this.currentIndex) {
|
||||
this.currentIndex = index;
|
||||
userAction && this.$emit('change', index);
|
||||
|
||||
if (userAction) {
|
||||
this.$emit('change', index);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -189,23 +202,6 @@ export default sfc({
|
||||
);
|
||||
},
|
||||
|
||||
getEleTransform(ele) {
|
||||
const { transform } = window.getComputedStyle(ele);
|
||||
const matrix = transform
|
||||
.slice(7, transform.length - 1)
|
||||
.split(', ')
|
||||
.map(val => Number(val));
|
||||
|
||||
return {
|
||||
scaleX: matrix[0],
|
||||
skewY: matrix[1],
|
||||
skewX: matrix[2],
|
||||
scaleY: matrix[3],
|
||||
translateX: matrix[4],
|
||||
translateY: matrix[5]
|
||||
};
|
||||
},
|
||||
|
||||
momentum(distance, duration) {
|
||||
const speed = Math.abs(distance / duration);
|
||||
|
||||
@ -221,15 +217,14 @@ export default sfc({
|
||||
render(h) {
|
||||
const { itemHeight, visibleItemCount } = this;
|
||||
|
||||
const columnStyle = {
|
||||
height: itemHeight * visibleItemCount + 'px'
|
||||
};
|
||||
|
||||
const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
|
||||
|
||||
const columnStyle = {
|
||||
height: `${itemHeight * visibleItemCount}px`
|
||||
};
|
||||
|
||||
const wrapperStyle = {
|
||||
transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
|
||||
transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
|
||||
transitionDuration: `${this.duration}ms`,
|
||||
lineHeight: `${itemHeight}px`
|
||||
};
|
||||
@ -250,6 +245,7 @@ export default sfc({
|
||||
<ul
|
||||
ref="wrapper"
|
||||
style={wrapperStyle}
|
||||
class={bem('wrapper')}
|
||||
onTransitionend={this.onTransitionEnd}
|
||||
>
|
||||
{this.options.map((option, index) => (
|
||||
@ -258,13 +254,14 @@ export default sfc({
|
||||
class={[
|
||||
'van-ellipsis',
|
||||
bem('item', {
|
||||
disabled: this.isDisabled(option),
|
||||
disabled: isOptionDisabled(option),
|
||||
selected: index === this.currentIndex
|
||||
})
|
||||
]}
|
||||
domPropsInnerHTML={this.getOptionText(option)}
|
||||
data-index={index}
|
||||
onClick={this.onClickItem}
|
||||
onClick={() => {
|
||||
this.onClickItem(index);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -81,9 +81,13 @@
|
||||
font-size: @picker-option-font-size;
|
||||
text-align: center;
|
||||
|
||||
&__wrapper {
|
||||
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 0 5px;
|
||||
color: @picker-option-selected-text-color;
|
||||
color: @picker-option-text-color;
|
||||
|
||||
&--selected {
|
||||
font-weight: 500;
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
|
||||
exports[`column watch default index 1`] = `
|
||||
<div class="van-picker-column" style="height: 0px;">
|
||||
<ul style="transform: translate3d(0, -75px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 50px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; line-height: 50px;">
|
||||
<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>
|
||||
`;
|
||||
|
||||
exports[`column watch default index 2`] = `
|
||||
<div class="van-picker-column" style="height: 0px;">
|
||||
<ul style="transform: translate3d(0, -125px, 0); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-duration: 0ms; line-height: 50px;">
|
||||
<li data-index="0" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; line-height: 50px;">
|
||||
<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>
|
||||
`;
|
||||
|
||||
@ -362,8 +362,7 @@
|
||||
@picker-action-text-color: @blue;
|
||||
@picker-action-active-color: @active-color;
|
||||
@picker-option-font-size: 16px;
|
||||
@picker-option-text-color: @gray-dark;
|
||||
@picker-option-selected-text-color: @text-color;
|
||||
@picker-option-text-color: @text-color;
|
||||
@picker-option-disabled-opacity: .3;
|
||||
|
||||
// Popup
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user