fix(h5): picker-view 默认值无法回显

packages/taro-components/src/components/picker-view/picker-view-column.tsx

@@ -22,59 +22,47 @@ export class PickerViewColumn {
   @State()
   isInit: boolean = false
 
-  @State()
-  isMove: boolean = false
-
   // 选中后的结果回调
   @Event({ eventName: 'onselect' }) onChange: EventEmitter
   @Event({ eventName: 'onselectstart' }) onSelectStart: EventEmitter
   @Event({ eventName: 'onselectend' }) onSelectEnd: EventEmitter
 
-  @Listen('scroll')
-  onScroll(_event: UIEvent) {
-    if (!this.isMove) {
-      this.isMove = true
-      this.onSelectStart.emit()
-    }
-    this.handleSelected()
-  }
-
-  @Listen('mouseup')
-  @Listen('mouseout')
-  @Listen('mouseleave')
-  onMouseEnd() {
-    if (!this.isMove) return
-    this.isMove = false
-    this.handleSelected()
+  @Listen('touchstart')
+  onTouchStart() {
+    this.onSelectStart.emit()
   }
 
   @Listen('touchend')
   onTouchEnd() {
-    this.isMove = false
     this.handleSelected()
   }
 
+  componentDidLoad() {
+    this.handleChange()
+  }
+
   componentDidUpdate() {
-    if (!this.isInit) {
-      this.isInit = true
-      const childList = this.el.childNodes
-      let idx = 0
-      let sum = 0
-      for (const index in childList) {
-        const item = childList[index] as HTMLElement
-        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
-          break
-        }
-        sum += item.offsetHeight
-        idx++
-      }
-      this.el.scrollTo({ top: sum })
-      if (idx >= childList.length) {
-        this.onChange.emit({
-          curIndex: this.col,
-          selectedIndex: idx - 1
-        })
+    this.handleChange()
+  }
+
+  handleChange() {
+    const childList = this.el.childNodes
+    let idx = 0
+    let sum = 0
+    for (const index in childList) {
+      const item = childList[index] as HTMLElement
+      if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
+        break
       }
+      sum += item.offsetHeight
+      idx++
+    }
+    this.el.scrollTo({ top: sum })
+    if (idx >= childList.length) {
+      this.onChange.emit({
+        curIndex: this.col,
+        selectedIndex: idx - 1
+      })
     }
   }
 

packages/taro-components/src/components/picker-view/picker-view.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Host, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core'
+import { Component, h, Host, Element, Prop, Event, EventEmitter, Listen, Watch } from '@stencil/core'
 import classNames from 'classnames'
 
 import { convertStyle } from '../../utils'
@@ -40,6 +40,11 @@ export class PickerView {
   })
   onPickEnd: EventEmitter
 
+  @Watch('value')
+  onPropsChange() {
+    this.handleValueChange()
+  }
+
   @Listen('onselect')
   onSelect(e: CustomEvent<{ curIndex: string; selectedIndex: string }>) {
     e.stopPropagation()
@@ -65,12 +70,16 @@ export class PickerView {
   }
 
   componentDidLoad() {
+    this.handleValueChange()
+  }
+
+  handleValueChange() {
     const childList = this.el.querySelectorAll('taro-picker-view-column-core')
     childList.forEach((element, index) => {
       element.setAttribute('col', `${index}`)
-      let selectIndex = '0'
+      let selectIndex = 0
       if (!!this.value && this.value.length > index) {
-        selectIndex = `${this.value[index]}`
+        selectIndex = this.value[index]
       }
       const pickerHeight = this.el.getBoundingClientRect().height
       const indicatorHeight = this.indicator?.offsetHeight || 0