mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 15:09:16 +08:00
[improvement] Picker: support Inertial rolling (#3331)
This commit is contained in:
流采
neverland
parent
6d526b6c45
commit
21db7e57ad
@ -40,14 +40,15 @@ 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="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -109,14 +110,15 @@ 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="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@ -11,69 +11,70 @@ 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" 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" 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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,74 +88,75 @@ 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, -352px, 0); line-height: 44px;">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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 style="transform: translate3d(0, -352px, 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" style="height: 44px;">天津市</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transition: 0ms; transform: translate3d(0, 0px, 0); line-height: 44px;">
|
||||
<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>
|
||||
<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>
|
||||
<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 style="transform: translate3d(0, 0px, 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" style="height: 44px;">宁波市</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" 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>
|
||||
<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>
|
||||
<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 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>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,49 +171,50 @@ 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" 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@ -9,23 +9,24 @@ exports[`change option 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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -40,23 +41,24 @@ exports[`change option 2`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transition: 200ms; transform: translate3d(0, 44px, 0); 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 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>
|
||||
</div>
|
||||
<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" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">和平区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -71,23 +73,24 @@ exports[`change option 3`] = `
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transition: 200ms; transform: translate3d(0, 44px, 0); 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 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>
|
||||
</div>
|
||||
<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" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transition: 200ms; transform: translate3d(0, 44px, 0); 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 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>
|
||||
</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>
|
||||
</div>
|
||||
@ -102,22 +105,23 @@ exports[`reset method 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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">天津市</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">蓟县</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -132,23 +136,24 @@ exports[`reset method 2`] = `
|
||||
<!---->
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -163,23 +168,24 @@ exports[`watch areaList & code 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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -194,23 +200,24 @@ exports[`watch areaList & code 2`] = `
|
||||
<!---->
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
@ -225,23 +232,24 @@ exports[`watch areaList & code 3`] = `
|
||||
<!---->
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<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>
|
||||
</div>
|
||||
<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" style="height: 44px;">东城区</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
@ -68,10 +68,15 @@ test('change option', () => {
|
||||
|
||||
const columns = wrapper.findAll('.van-picker-column');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
triggerDrag(columns.at(0), 0, -100);
|
||||
columns.at(0).find('ul').trigger('transitionend');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
triggerDrag(columns.at(2), 0, -100);
|
||||
columns.at(2).find('ul').trigger('transitionend');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
expect(onChange.mock.calls[0][1]).toEqual(secondOption);
|
||||
});
|
||||
|
||||
|
||||
@ -11,154 +11,155 @@ 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" style="height: 44px;">2018</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
|
||||
<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;">2018</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<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;">01</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<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;">01</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<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;">00</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
<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;">00</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
|
||||
<li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
|
||||
<li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
|
||||
<li data-index="35" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li data-index="36" class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
|
||||
<li data-index="37" class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
|
||||
<li data-index="38" class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
|
||||
<li data-index="39" class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
|
||||
<li data-index="40" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li data-index="41" class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
|
||||
<li data-index="42" class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
|
||||
<li data-index="43" class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
|
||||
<li data-index="44" class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
|
||||
<li data-index="45" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li data-index="46" class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
|
||||
<li data-index="47" class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
|
||||
<li data-index="48" class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
|
||||
<li data-index="49" class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
|
||||
<li data-index="50" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li data-index="51" class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
|
||||
<li data-index="52" class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
|
||||
<li data-index="53" class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
|
||||
<li data-index="54" class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
|
||||
<li data-index="55" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<li data-index="56" class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
|
||||
<li data-index="57" class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
|
||||
<li data-index="58" class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
|
||||
<li data-index="59" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,72 +173,73 @@ 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" style="height: 44px;">2018</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
|
||||
<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;">2018</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<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;">01</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<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;">01</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -251,37 +253,38 @@ 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" style="height: 44px;">2018年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
|
||||
<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;">2018年</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">01月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
|
||||
<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;">01月</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -295,84 +298,85 @@ 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, 0px, 0); line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<ul style="transform: translate3d(0, 0px, 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;">10</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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" style="height: 44px;">00</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
<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;">00</li>
|
||||
<li data-index="1" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
|
||||
<li data-index="5" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li data-index="6" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
|
||||
<li data-index="7" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
|
||||
<li data-index="8" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
|
||||
<li data-index="9" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
|
||||
<li data-index="10" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li data-index="11" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
|
||||
<li data-index="12" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
|
||||
<li data-index="13" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
|
||||
<li data-index="14" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
|
||||
<li data-index="15" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li data-index="16" class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
|
||||
<li data-index="17" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
|
||||
<li data-index="18" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
|
||||
<li data-index="19" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
|
||||
<li data-index="20" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li data-index="21" class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
|
||||
<li data-index="22" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
|
||||
<li data-index="23" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<li data-index="24" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
|
||||
<li data-index="25" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li data-index="26" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
|
||||
<li data-index="27" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
|
||||
<li data-index="28" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
|
||||
<li data-index="29" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
|
||||
<li data-index="30" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li data-index="31" class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
|
||||
<li data-index="32" class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
|
||||
<li data-index="33" class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
|
||||
<li data-index="34" class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
|
||||
<li data-index="35" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li data-index="36" class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
|
||||
<li data-index="37" class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
|
||||
<li data-index="38" class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
|
||||
<li data-index="39" class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
|
||||
<li data-index="40" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li data-index="41" class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
|
||||
<li data-index="42" class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
|
||||
<li data-index="43" class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
|
||||
<li data-index="44" class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
|
||||
<li data-index="45" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li data-index="46" class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
|
||||
<li data-index="47" class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
|
||||
<li data-index="48" class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
|
||||
<li data-index="49" class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
|
||||
<li data-index="50" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li data-index="51" class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
|
||||
<li data-index="52" class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
|
||||
<li data-index="53" class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
|
||||
<li data-index="54" class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
|
||||
<li data-index="55" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<li data-index="56" class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
|
||||
<li data-index="57" class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
|
||||
<li data-index="58" class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
|
||||
<li data-index="59" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
import { deepClone } from '../utils/deep-clone';
|
||||
import { use, isObj, range } from '../utils';
|
||||
import { preventDefault } from '../utils/event';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
|
||||
const DEFAULT_DURATION = 200;
|
||||
|
||||
// 惯性滑动思路:
|
||||
// 在手指离开屏幕时，如果和上一次 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');
|
||||
|
||||
export default sfc({
|
||||
mixins: [TouchMixin],
|
||||
|
||||
props: {
|
||||
valueKey: String,
|
||||
className: String,
|
||||
@ -17,10 +28,12 @@ export default sfc({
|
||||
|
||||
data() {
|
||||
return {
|
||||
startY: 0,
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
startOffset: 0,
|
||||
momentumOffset: 0,
|
||||
touchTimestamp: 0,
|
||||
moving: false,
|
||||
options: deepClone(this.initialOptions),
|
||||
currentIndex: this.defaultIndex
|
||||
};
|
||||
@ -50,29 +63,73 @@ export default sfc({
|
||||
|
||||
methods: {
|
||||
onTouchStart(event) {
|
||||
this.startY = event.touches[0].clientY;
|
||||
this.startOffset = this.offset;
|
||||
this.touchStart(event);
|
||||
|
||||
if (this.moving) {
|
||||
const { translateY } = this.getEleTransform(this.$refs.wrapper);
|
||||
this.startOffset = Math.min(0, translateY);
|
||||
} else {
|
||||
this.startOffset = this.offset;
|
||||
}
|
||||
|
||||
this.duration = 0;
|
||||
this.moving = false;
|
||||
this.transitionEndTrigger = null;
|
||||
this.touchTimestamp = Date.now();
|
||||
this.momentumOffset = this.startOffset;
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
preventDefault(event);
|
||||
const deltaY = event.touches[0].clientY - this.startY;
|
||||
this.moving = true;
|
||||
this.touchMove(event);
|
||||
this.offset = range(
|
||||
this.startOffset + deltaY,
|
||||
this.startOffset + this.deltaY,
|
||||
-(this.count * this.itemHeight),
|
||||
this.itemHeight
|
||||
);
|
||||
|
||||
const now = Date.now();
|
||||
if (now - this.touchTimestamp > MOMENTUM_LIMIT_TIME) {
|
||||
this.touchTimestamp = now;
|
||||
this.momentumOffset = this.offset;
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
const distance = this.offset - this.momentumOffset;
|
||||
const duration = Date.now() - this.touchTimestamp;
|
||||
const allowMomentum =
|
||||
duration < MOMENTUM_LIMIT_TIME &&
|
||||
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
|
||||
|
||||
if (allowMomentum) {
|
||||
this.momentum(distance, duration);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.offset !== this.startOffset) {
|
||||
this.duration = DEFAULT_DURATION;
|
||||
const index = range(Math.round(-this.offset / this.itemHeight), 0, this.count - 1);
|
||||
const index = this.getIndexByOffset(this.offset);
|
||||
this.setIndex(index, true);
|
||||
}
|
||||
},
|
||||
|
||||
onTransitionEnd() {
|
||||
this.moving = false;
|
||||
|
||||
if (this.transitionEndTrigger) {
|
||||
this.transitionEndTrigger();
|
||||
this.transitionEndTrigger = null;
|
||||
}
|
||||
},
|
||||
|
||||
onClickItem(e) {
|
||||
const index = Number(e.currentTarget.getAttribute('data-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++) {
|
||||
@ -95,9 +152,19 @@ export default sfc({
|
||||
index = this.adjustIndex(index) || 0;
|
||||
this.offset = -index * this.itemHeight;
|
||||
|
||||
if (index !== this.currentIndex) {
|
||||
this.currentIndex = index;
|
||||
userAction && this.$emit('change', index);
|
||||
const trigger = () => {
|
||||
if (index !== this.currentIndex) {
|
||||
this.currentIndex = index;
|
||||
userAction && this.$emit('change', index);
|
||||
}
|
||||
};
|
||||
|
||||
// 若有触发过 `touchmove` 事件，那应该
|
||||
// 在 `transitionend` 后再触发 `change` 事件
|
||||
if (this.moving) {
|
||||
this.transitionEndTrigger = trigger;
|
||||
} else {
|
||||
trigger();
|
||||
}
|
||||
},
|
||||
|
||||
@ -112,7 +179,43 @@ export default sfc({
|
||||
|
||||
getValue() {
|
||||
return this.options[this.currentIndex];
|
||||
}
|
||||
},
|
||||
|
||||
getIndexByOffset(offset) {
|
||||
return range(
|
||||
Math.round(-offset / this.itemHeight),
|
||||
0,
|
||||
this.count - 1
|
||||
);
|
||||
},
|
||||
|
||||
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);
|
||||
|
||||
distance = this.offset + speed / 0.0015 * (distance < 0 ? -1 : 1);
|
||||
|
||||
const index = this.getIndexByOffset(distance);
|
||||
|
||||
this.duration = MOMENTUM_DURATION;
|
||||
this.setIndex(index, true);
|
||||
},
|
||||
},
|
||||
|
||||
render(h) {
|
||||
@ -125,8 +228,9 @@ export default sfc({
|
||||
const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
|
||||
|
||||
const wrapperStyle = {
|
||||
transition: `${this.duration}ms`,
|
||||
transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
|
||||
transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
|
||||
transitionDuration: `${this.duration}ms`,
|
||||
lineHeight: `${itemHeight}px`
|
||||
};
|
||||
|
||||
@ -143,7 +247,11 @@ export default sfc({
|
||||
onTouchend={this.onTouchEnd}
|
||||
onTouchcancel={this.onTouchEnd}
|
||||
>
|
||||
<ul style={wrapperStyle}>
|
||||
<ul
|
||||
ref="wrapper"
|
||||
style={wrapperStyle}
|
||||
onTransitionend={this.onTransitionEnd}
|
||||
>
|
||||
{this.options.map((option, index) => (
|
||||
<li
|
||||
style={optionStyle}
|
||||
@ -155,9 +263,8 @@ export default sfc({
|
||||
})
|
||||
]}
|
||||
domPropsInnerHTML={this.getOptionText(option)}
|
||||
onClick={() => {
|
||||
this.setIndex(index, true);
|
||||
}}
|
||||
data-index={index}
|
||||
onClick={this.onClickItem}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -141,6 +141,7 @@ export default sfc({
|
||||
|
||||
render(h) {
|
||||
const { itemHeight } = this;
|
||||
const wrapHeight = itemHeight * this.visibleItemCount;
|
||||
const columns = this.simple ? [this.columns] : this.columns;
|
||||
|
||||
const frameStyle = {
|
||||
@ -148,7 +149,11 @@ export default sfc({
|
||||
};
|
||||
|
||||
const columnsStyle = {
|
||||
height: `${itemHeight * this.visibleItemCount}px`
|
||||
height: `${wrapHeight}px`
|
||||
};
|
||||
|
||||
const maskStyle = {
|
||||
backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
|
||||
};
|
||||
|
||||
const Toolbar = this.showToolbar && (
|
||||
@ -186,6 +191,7 @@ export default sfc({
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div class={bem('mask')} style={maskStyle} />
|
||||
<div class={['van-hairline--top-bottom', bem('frame')]} style={frameStyle} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,12 +55,26 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6)),
|
||||
linear-gradient(0deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6));
|
||||
background-repeat: no-repeat;
|
||||
background-position: top, bottom;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-column {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
@ -69,10 +83,9 @@
|
||||
|
||||
&__item {
|
||||
padding: 0 5px;
|
||||
color: @picker-option-text-color;
|
||||
color: @picker-option-selected-text-color;
|
||||
|
||||
&--selected {
|
||||
color: @picker-option-selected-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@ -7,14 +7,15 @@ 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" 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 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>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,14 +25,15 @@ 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, 0px, 0); line-height: 44px;">
|
||||
<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 style="transform: translate3d(0, 0px, 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" style="height: 44px;">宁波</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -46,14 +48,15 @@ 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" 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 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>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,12 +66,13 @@ 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" 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 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 van-picker-column__item--disabled" 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 data-index="2" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -78,20 +82,21 @@ 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" style="height: 44px;">浙江</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
|
||||
<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>
|
||||
</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" 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 style="transform: translate3d(0, 0px, 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" style="height: 44px;">宁波</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,20 +106,21 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><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 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" style="height: 44px;">浙江</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
|
||||
<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>
|
||||
</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" 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 style="transform: translate3d(0, 0px, 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" style="height: 44px;">宁波</li>
|
||||
<li data-index="2" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
|
||||
<li data-index="3" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
|
||||
<li data-index="4" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
|
||||
exports[`column watch default index 1`] = `
|
||||
<div class="van-picker-column" style="height: 0px;">
|
||||
<ul style="transition: 0ms; transform: translate3d(0, -75px, 0); 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 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>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`column watch default index 2`] = `
|
||||
<div class="van-picker-column" style="height: 0px;">
|
||||
<ul style="transition: 0ms; transform: translate3d(0, -125px, 0); 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 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>
|
||||
</div>
|
||||
`;
|
||||
@ -35,6 +35,7 @@ exports[`render title slot 1`] = `
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -80,25 +80,32 @@ test('set picker values', () => {
|
||||
expect(vm.getColumnValue(2)).toEqual(undefined);
|
||||
});
|
||||
|
||||
test('drag columns', () => {
|
||||
test('drag columns', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns
|
||||
}
|
||||
});
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, 0);
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
|
||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual(['normal', '1990']);
|
||||
});
|
||||
|
||||
test('drag simple columns', () => {
|
||||
test('drag simple columns', async () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn
|
||||
}
|
||||
});
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual('1992');
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
|
||||
// 由于在极短的时间（大约几毫秒）移动 `100px`，因此再计算惯性滚动的距离时，
|
||||
// 会得到一个很大的值，导致会滚动到且选中列表的最后一项
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
|
||||
});
|
||||
|
||||
test('column watch default index', async () => {
|
||||
@ -132,3 +139,45 @@ test('render title slot', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('simulation finger swipe again before transitionend', () => {
|
||||
// mock getComputedStyle
|
||||
// see: https://github.com/jsdom/jsdom/issues/2588
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
window.getComputedStyle = ele => {
|
||||
const style = originGetComputedStyle(ele);
|
||||
|
||||
return {
|
||||
...style,
|
||||
transform: 'matrix(1, 0, 0, 1, 0, -5)'
|
||||
};
|
||||
};
|
||||
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn
|
||||
}
|
||||
});
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -5);
|
||||
triggerDrag(wrapper.find('.van-picker-column'), -5, -100);
|
||||
wrapper.find('.van-picker-column ul').trigger('transitionend');
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual('1995');
|
||||
});
|
||||
|
||||
test('click column\'s item', () => {
|
||||
const columns = [
|
||||
{ text: '杭州' },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州', disabled: true },
|
||||
{ text: '嘉兴', disabled: true }
|
||||
];
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.findAll('.van-picker-column__item').at(3).trigger('click');
|
||||
expect(wrapper.emitted('change')[0][1]).toEqual(columns[1]);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user