alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] Picker: support Inertial rolling (#3331)

Browse Source
This commit is contained in:
流采
2019-05-22 16:33:35 +08:00
committed by neverland
parent 6d526b6c45
commit 21db7e57ad
11 changed files with 804 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/area/test/__snapshots__/demo.spec.js.snap
+156 -153
View File
@@ -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>
packages/area/test/__snapshots__/index.spec.js.snap
+79 -71
View File
@@ -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>
packages/area/test/index.spec.js
+5
View File
@@ -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);
});