blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Picker: optimize code

Browse Source
This commit is contained in:
陈嘉涵 2019-05-22 17:20:07 +08:00
parent 21db7e57ad
commit 171621efed
7 changed files with 150 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/markdown/changelog.zh-CN.md
View File

@ -2,6 +2,10 @@
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.0) ### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.0)
##### Picker
- 新增惯性滚动
##### Tab ##### Tab
- 新增`border`属性 - 新增`border`属性

12
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -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-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__columns" style="height:220px;">
<div class="van-picker-column" 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>
<div class="van-picker-column" 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>
<div class="van-picker-column" 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>
<div class="van-picker__mask" style="background-size:100% 88px;"></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> <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__columns" style="height:220px;">
<div class="van-picker-column" 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>
<div class="van-picker-column" 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>
<div class="van-picker-column" 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>
<div class="van-picker__mask" style="background-size:100% 88px;"></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> <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

142
packages/area/test/__snapshots__/index.spec.js.snap
View File

@ -9,21 +9,21 @@ exports[`change option 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 1500ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li 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> <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 1500ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li 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> <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 1500ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li> <li 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> <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li 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> <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; line-height: 44px;">
<li data-index="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <li 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> <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></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__columns" style="height: 220px;">
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column" 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 class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>

97
packages/picker/PickerColumn.js
View File

@ -6,14 +6,25 @@ import { TouchMixin } from '../mixins/touch';
const DEFAULT_DURATION = 200; const DEFAULT_DURATION = 200;
// 惯性滑动思路: // 惯性滑动思路:
// 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move 距 // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_LIMIT_TIME` 且 move
// 离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION` // 距离大于 `MOMENTUM_LIMIT_DISTANCE` 时，执行惯性滑动，持续 `MOMENTUM_DURATION`
const MOMENTUM_DURATION = 1500; const MOMENTUM_DURATION = 1500;
const MOMENTUM_LIMIT_TIME = 300; const MOMENTUM_LIMIT_TIME = 300;
const MOMENTUM_LIMIT_DISTANCE = 15; const MOMENTUM_LIMIT_DISTANCE = 15;
const [sfc, bem] = use('picker-column'); 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({ export default sfc({
mixins: [TouchMixin], mixins: [TouchMixin],
@ -30,23 +41,25 @@ export default sfc({
return { return {
offset: 0, offset: 0,
duration: 0, duration: 0,
startOffset: 0,
momentumOffset: 0,
touchTimestamp: 0,
moving: false,
options: deepClone(this.initialOptions), options: deepClone(this.initialOptions),
currentIndex: this.defaultIndex currentIndex: this.defaultIndex
}; };
}, },
created() { created() {
this.$parent.children && this.$parent.children.push(this); if (this.$parent.children) {
this.$parent.children.push(this);
}
this.setIndex(this.currentIndex); this.setIndex(this.currentIndex);
}, },
destroyed() { destroyed() {
const { children } = this.$parent; const { children } = this.$parent;
children && children.splice(children.indexOf(this), 1);
if (children) {
children.splice(children.indexOf(this), 1);
}
}, },
watch: { watch: {
@ -66,7 +79,7 @@ export default sfc({
this.touchStart(event); this.touchStart(event);
if (this.moving) { if (this.moving) {
const { translateY } = this.getEleTransform(this.$refs.wrapper); const translateY = getElementTranslateY(this.$refs.wrapper);
this.startOffset = Math.min(0, translateY); this.startOffset = Math.min(0, translateY);
} else { } else {
this.startOffset = this.offset; this.startOffset = this.offset;
@ -75,7 +88,7 @@ export default sfc({
this.duration = 0; this.duration = 0;
this.moving = false; this.moving = false;
this.transitionEndTrigger = null; this.transitionEndTrigger = null;
this.touchTimestamp = Date.now(); this.touchStartTime = Date.now();
this.momentumOffset = this.startOffset; this.momentumOffset = this.startOffset;
}, },
@ -90,15 +103,15 @@ export default sfc({
); );
const now = Date.now(); const now = Date.now();
if (now - this.touchTimestamp > MOMENTUM_LIMIT_TIME) { if (now - this.touchStartTime > MOMENTUM_LIMIT_TIME) {
this.touchTimestamp = now; this.touchStartTime = now;
this.momentumOffset = this.offset; this.momentumOffset = this.offset;
} }
}, },
onTouchEnd() { onTouchEnd() {
const distance = this.offset - this.momentumOffset; const distance = this.offset - this.momentumOffset;
const duration = Date.now() - this.touchTimestamp; const duration = Date.now() - this.touchStartTime;
const allowMomentum = const allowMomentum =
duration < MOMENTUM_LIMIT_TIME && duration < MOMENTUM_LIMIT_TIME &&
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE; Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
@ -124,24 +137,21 @@ export default sfc({
} }
}, },
onClickItem(e) { onClickItem(index) {
const index = Number(e.currentTarget.getAttribute('data-index'));
this.duration = DEFAULT_DURATION; this.duration = DEFAULT_DURATION;
this.setIndex(index, true); this.setIndex(index, true);
}, },
adjustIndex(index) { adjustIndex(index) {
index = range(index, 0, this.count); 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) { for (let i = index; i < this.count; i++) {
return isObj(option) && option.disabled; if (!isOptionDisabled(this.options[i])) return i;
}
for (let i = index - 1; i >= 0; i--) {
if (!isOptionDisabled(this.options[i])) return i;
}
}, },
getOptionText(option) { getOptionText(option) {
@ -155,7 +165,10 @@ export default sfc({
const trigger = () => { const trigger = () => {
if (index !== this.currentIndex) { if (index !== this.currentIndex) {
this.currentIndex = index; 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) { momentum(distance, duration) {
const speed = Math.abs(distance / duration); const speed = Math.abs(distance / duration);
@ -221,15 +217,14 @@ export default sfc({
render(h) { render(h) {
const { itemHeight, visibleItemCount } = this; const { itemHeight, visibleItemCount } = this;
const columnStyle = {
height: itemHeight * visibleItemCount + 'px'
};
const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2; const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
const columnStyle = {
height: `${itemHeight * visibleItemCount}px`
};
const wrapperStyle = { const wrapperStyle = {
transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`, transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
transitionDuration: `${this.duration}ms`, transitionDuration: `${this.duration}ms`,
lineHeight: `${itemHeight}px` lineHeight: `${itemHeight}px`
}; };
@ -250,6 +245,7 @@ export default sfc({
<ul <ul
ref="wrapper" ref="wrapper"
style={wrapperStyle} style={wrapperStyle}
class={bem('wrapper')}
onTransitionend={this.onTransitionEnd} onTransitionend={this.onTransitionEnd}
> >
{this.options.map((option, index) => ( {this.options.map((option, index) => (
@ -258,13 +254,14 @@ export default sfc({
class={[ class={[
'van-ellipsis', 'van-ellipsis',
bem('item', { bem('item', {
disabled: this.isDisabled(option), disabled: isOptionDisabled(option),
selected: index === this.currentIndex selected: index === this.currentIndex
}) })
]} ]}
domPropsInnerHTML={this.getOptionText(option)} domPropsInnerHTML={this.getOptionText(option)}
data-index={index} onClick={() => {
onClick={this.onClickItem} this.onClickItem(index);
}}
/> />
))} ))}
</ul> </ul>

6
packages/picker/index.less
View File

@ -81,9 +81,13 @@
font-size: @picker-option-font-size; font-size: @picker-option-font-size;
text-align: center; text-align: center;
&__wrapper {
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
&__item { &__item {
padding: 0 5px; padding: 0 5px;
color: @picker-option-selected-text-color; color: @picker-option-text-color;
&--selected { &--selected {
font-weight: 500; font-weight: 500;

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

@ -2,28 +2,28 @@
exports[`column watch default index 1`] = ` exports[`column watch default index 1`] = `
<div class="van-picker-column" style="height: 0px;"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); 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 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 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 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 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 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul> </ul>
</div> </div>
`; `;
exports[`column watch default index 2`] = ` exports[`column watch default index 2`] = `
<div class="van-picker-column" style="height: 0px;"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); 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 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 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 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 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 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 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> <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul> </ul>
</div> </div>
`; `;

3
packages/style/var.less
View File

@ -362,8 +362,7 @@
@picker-action-text-color: @blue; @picker-action-text-color: @blue;
@picker-action-active-color: @active-color; @picker-action-active-color: @active-color;
@picker-option-font-size: 16px; @picker-option-font-size: 16px;
@picker-option-text-color: @gray-dark; @picker-option-text-color: @text-color;
@picker-option-selected-text-color: @text-color;
@picker-option-disabled-opacity: .3; @picker-option-disabled-opacity: .3;
// Popup // Popup