[improvement] Picker: optimize style

packages/picker/PickerColumn.js

@@ -219,10 +219,6 @@ export default sfc({
 
     const baseOffset = (itemHeight * (visibleItemCount - 1)) / 2;
 
-    const columnStyle = {
-      height: `${itemHeight * visibleItemCount}px`
-    };
-
     const wrapperStyle = {
       transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`,
       transitionDuration: `${this.duration}ms`,
@@ -235,7 +231,6 @@ export default sfc({
 
     return (
       <div
-        style={columnStyle}
         class={[bem(), this.className]}
         onTouchstart={this.onTouchStart}
         onTouchmove={this.onTouchMove}
@@ -253,10 +248,7 @@ export default sfc({
               style={optionStyle}
               class={[
                 'van-ellipsis',
-                bem('item', {
-                  disabled: isOptionDisabled(option),
-                  selected: index === this.currentIndex
-                })
+                bem('item', { disabled: isOptionDisabled(option) })
               ]}
               domPropsInnerHTML={this.getOptionText(option)}
               onClick={() => {

packages/picker/index.less

@@ -2,7 +2,6 @@
 
 .van-picker {
   position: relative;
-  overflow: hidden;
   background-color: @picker-background-color;
   user-select: none;
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
@@ -68,8 +67,8 @@
     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-image: linear-gradient(180deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4)),
+      linear-gradient(0deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4));
     background-repeat: no-repeat;
     background-position: top, bottom;
     pointer-events: none;
@@ -89,10 +88,6 @@
       padding: 0 5px;
       color: @picker-option-text-color;
 
-      &--selected {
-        font-weight: 500;
-      }
-
       &--disabled {
         opacity: @picker-option-disabled-opacity;
       }

packages/picker/test/__snapshots__/index.spec.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`column watch default index 1`] = `
-<div class="van-picker-column" style="height: 0px;">
+<div class="van-picker-column">
   <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -75px, 0); transition-duration: 0ms; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
-    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
+    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">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>
@@ -15,11 +15,11 @@ exports[`column watch default index 1`] = `
 `;
 
 exports[`column watch default index 2`] = `
-<div class="van-picker-column" style="height: 0px;">
+<div class="van-picker-column">
   <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -125px, 0); transition-duration: 0ms; line-height: 50px;">
     <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
     <li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
-    <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
+    <li class="van-ellipsis van-picker-column__item" style="height: 50px;">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>