@mpxjs/webpack-plugin 2.9.70 → 2.9.71

package/lib/runtime/components/react/mpx-view.tsx

@@ -12,9 +12,10 @@ import useAnimationHooks from './useAnimationHooks'
 import type { AnimationProp } from './useAnimationHooks'
 import { ExtendedViewStyle } from './types/common'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject } from './utils'
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHover } from './utils'
 import { error } from '@mpxjs/utils'
 import LinearGradient from 'react-native-linear-gradient'
+import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
 
 export interface _ViewProps extends ViewProps {
   style?: ExtendedViewStyle
@@ -642,7 +643,7 @@ function useWrapImage (imageStyle?: ExtendedViewStyle, innerStyle?: Record<strin
 
 interface WrapChildrenConfig {
   hasVarDec: boolean
-  enableBackground: boolean
+  enableBackground?: boolean
   textStyle?: TextStyle
   backgroundStyle?: ExtendedViewStyle
   varContext?: Record<string, any>
@@ -684,8 +685,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     animation
   } = props
 
-  const [isHover, setIsHover] = useState(false)
-
   // 默认样式
   const defaultStyle: ExtendedViewStyle = style.display === 'flex'
     ? {
@@ -696,6 +695,9 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
       }
     : {}
 
+  const enableHover = !!hoverStyle
+  const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime })
+
   const styleObj: ExtendedViewStyle = extendObject({}, defaultStyle, style, isHover ? hoverStyle as ExtendedViewStyle : {})
 
   const {
@@ -726,45 +728,6 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     style: normalStyle
   })
 
-  const dataRef = useRef<{
-    startTimer?: ReturnType<typeof setTimeout>
-    stayTimer?: ReturnType<typeof setTimeout>
-  }>({})
-
-  useEffect(() => {
-    return () => {
-      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    }
-  }, [])
-
-  const setStartTimer = () => {
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.startTimer = setTimeout(() => {
-      setIsHover(true)
-    }, +hoverStartTime)
-  }
-
-  const setStayTimer = () => {
-    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
-    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
-    dataRef.current.stayTimer = setTimeout(() => {
-      setIsHover(false)
-    }, +hoverStayTime)
-  }
-
-  function onTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchstart } = props
-    bindtouchstart && bindtouchstart(e)
-    setStartTimer()
-  }
-
-  function onTouchEnd (e: NativeSyntheticEvent<TouchEvent>) {
-    const { bindtouchend } = props
-    bindtouchend && bindtouchend(e)
-    setStayTimer()
-  }
-
   const {
     layoutRef,
     layoutStyle,
@@ -773,33 +736,19 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
 
   const viewStyle = extendObject({}, innerStyle, layoutStyle)
 
-  enableAnimation = enableAnimation || !!animation
-  const enableAnimationRef = useRef(enableAnimation)
-  if (enableAnimationRef.current !== enableAnimation) {
-    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
-  }
+  const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+    enableAnimation,
+    animation,
+    style: viewStyle
+  })
 
-  const finalStyle = enableAnimationRef.current
-    ? [viewStyle,
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useAnimationHooks({
-          animation,
-          style: viewStyle
-        })]
-    : viewStyle
   const innerProps = useInnerProps(
     props,
     extendObject({
       ref: nodeRef,
-      style: finalStyle
+      style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
     },
-    layoutProps,
-    hoverStyle
-      ? {
-          bindtouchstart: onTouchStart,
-          bindtouchend: onTouchEnd
-        }
-      : {}
+    layoutProps
     ), [
       'hover-start-time',
       'hover-stay-time',
@@ -820,9 +769,13 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
     enableFastImage
   })
 
-  return enableAnimation
+  const BaseComponent = enableStyleAnimation
     ? createElement(Animated.View, innerProps, childNode)
     : createElement(View, innerProps, childNode)
+
+  return enableHover
+    ? createElement(GestureDetector, { gesture: gesture as PanGesture }, BaseComponent)
+    : BaseComponent
 })
 
 _View.displayName = 'MpxView'

package/lib/runtime/components/react/pickerFaces.ts

@@ -8,6 +8,7 @@ export type Faces = {
   deg: number
   offsetY: number
   opacity: number
+  scale: number
   screenHeight: number
 }
 
@@ -33,7 +34,7 @@ export const createFaces = (
     const maxStep = Math.trunc((visibleCount + 2) / 2) // + 2 because there are 2 more faces at 90 degrees
     const stepDegree = 90 / maxStep
 
-    const result = []
+    const result: number[] = []
     for (let i = 1; i <= maxStep; i++) {
       result.push(i * stepDegree)
     }
@@ -62,17 +63,17 @@ export const createFaces = (
   const getOpacity = (index: number) => {
     const map: Record<number, number> = {
       0: 0,
-      1: 0.2,
-      2: 0.35,
-      3: 0.45,
-      4: 0.5
+      1: 0.8,
+      2: 0.9
     }
-    return map[index] ?? Math.min(1, map[4] + index * 0.5)
+    return map[index] ?? Math.min(1, map[2] + index * 0.05)
   }
 
   const degrees = getDegreesRelativeCenter()
   const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
 
+  const scales = [0.973, 0.9, 0.8]
+
   return [
     // top items
     ...degrees
@@ -82,13 +83,14 @@ export const createFaces = (
           deg: degree,
           opacity: getOpacity(degrees.length - 1 - index),
           offsetY: -1 * offsets[index],
+          scale: scales[index],
           screenHeight: screenHeight[index]
         }
       })
       .reverse(),
 
     // center item
-    { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+    { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
 
     // bottom items
     ...degrees.map<Faces>((degree, index) => {
@@ -97,6 +99,7 @@ export const createFaces = (
         deg: -1 * degree,
         opacity: getOpacity(degrees.length - 1 - index),
         offsetY: offsets[index],
+        scale: scales[index],
         screenHeight: screenHeight[index]
       }
     })

package/lib/runtime/components/react/pickerVIewContext.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+import { SharedValue } from 'react-native-reanimated'
+
+type ContextValue = SharedValue<number>
+
+export const PickerViewColumnAnimationContext = createContext<
+    ContextValue | undefined
+>(undefined)
+
+export const usePickerViewColumnAnimationContext = () => {
+  const value = useContext(PickerViewColumnAnimationContext)
+  if (value === undefined) {
+    throw new Error(
+      'usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!'
+    )
+  }
+  return value
+}
+
+export const PickerViewStyleContext = createContext<
+    Record<string, any> | undefined
+>(undefined)
+
+export const usePickerViewStyleContext = () => {
+  const value = useContext(PickerViewStyleContext)
+  return value
+}

package/lib/runtime/components/react/pickerViewIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+
+type IndicatorProps = {
+  itemHeight: number
+  indicatorItemStyle?: StyleProp<ViewStyle>
+  indicatorContainerStyle?: StyleProp<ViewStyle>
+}
+
+const _PickerViewIndicator = ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }: IndicatorProps) => {
+  return (
+    <View style={[styles.indicatorContainer, indicatorContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, indicatorItemStyle]} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  indicatorContainer: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 200
+  },
+  selection: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.05)',
+    alignSelf: 'stretch'
+  }
+})
+
+_PickerViewIndicator.displayName = 'MpxPickerViewIndicator'
+export default _PickerViewIndicator

package/lib/runtime/components/react/pickerViewMask.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+
+type MaskProps = {
+  itemHeight: number
+  maskContainerStyle?: StyleProp<ViewStyle>
+}
+
+const _PickerViewMask = ({
+  itemHeight,
+  maskContainerStyle
+}: MaskProps) => {
+  return (
+    <View style={[styles.maskContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }} />
+      <View style={{ height: itemHeight }} />
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }} />
+    </View>
+  )
+}
+const styles = StyleSheet.create({
+  maskContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 100
+  }
+})
+
+_PickerViewMask.displayName = 'MpxPickerViewMask'
+export default _PickerViewMask

package/lib/runtime/components/react/types/{getInnerListeners.ts → getInnerListeners.d.ts}

@@ -13,6 +13,8 @@ type RemoveProps = string[];
 
 type NativeTouchEvent = NativeSyntheticEvent<NativeEvent>
 
+type Navigation = Record<string, any>
+
 interface NativeEvent {
   timestamp: number;
   pageX: number;
@@ -36,10 +38,6 @@ interface InnerRef {
     bubble: null | ReturnType<typeof setTimeout>;
     capture: null | ReturnType<typeof setTimeout>;
   };
-  needPress: {
-    bubble: boolean;
-    capture: boolean;
-  };
   mpxPressInfo: {
     detail: {
       x: number;
@@ -65,5 +63,6 @@ export {
   InnerRef,
   LayoutRef,
   SetTimeoutReturnType,
-  DataSetType
+  DataSetType,
+  Navigation
 }

package/lib/runtime/components/react/types/global.d.ts

@@ -20,6 +20,12 @@ declare module '@mpxjs/utils' {
       left: number
       right: number
     },
+    layout: {
+      x: number
+      y: number
+      width: number
+      height: number
+    },
     setOptions: (params: Record<string, any>) => void
   } | undefined
 }
@@ -27,3 +33,7 @@ declare module '@mpxjs/utils' {
 declare let global: {
   __formatValue (value: string): string | number
 } & Record<string, any>
+
+declare module '@react-navigation/native' {
+   export function useNavigation (): Record<string, any>
+}

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -13,6 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
+import { error } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -166,20 +167,32 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style = {}, animation } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
+  const { style = {}, animation, enableAnimation } = props
+
+  const enableStyleAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableStyleAnimation)
+  if (enableAnimationRef.current !== enableStyleAnimation) {
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+
+  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
+
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
   // 记录动画key的style样式值 没有的话设置为false
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
   // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
   // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const shareValMap = useMemo(() => {
     return Object.keys(InitialValue).reduce((valMap, key) => {
       const defaultVal = getInitialVal(key, isTransform(key))
@@ -188,6 +201,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
   // ** 获取动画样式prop & 驱动动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (id === -1) return
     // 更新动画样式 key map
@@ -208,6 +222,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
   //   })
   // }, [style])
   // ** 清空动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     return () => {
       Object.values(shareValMap).forEach((value) => {
@@ -335,7 +350,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-  return useAnimatedStyle(() => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -353,4 +369,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       return styles
     }, {} as ExtendedViewStyle)
   })
+
+  return {
+    enableStyleAnimation: enableAnimationRef.current,
+    animationStyle
+  }
 }

package/lib/runtime/components/react/utils.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
-import { VarContext } from './context'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
+import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
+import { useNavigation } from '@react-navigation/native'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
+import { runOnJS } from 'react-native-reanimated'
+import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -18,6 +21,11 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
+declare const __mpx_mode__: 'ios' | 'android'
+
+export const isIOS = __mpx_mode__ === 'ios'
+export const isAndroid = __mpx_mode__ === 'android'
+
 const varDecRegExp = /^--/
 const varUseRegExp = /var\(/
 const unoVarDecRegExp = /^--un-/
@@ -32,8 +40,7 @@ const safeAreaInsetMap: Record<string, 'top' | 'right' | 'bottom' | 'left'> = {
   'safe-area-inset-left': 'left'
 }
 
-function getSafeAreaInset (name: string) {
-  const navigation = getFocusedNavigation()
+function getSafeAreaInset (name: string, navigation: Record<string, any>) {
   const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets)
   return insets[safeAreaInsetMap[name]]
 }
@@ -232,7 +239,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
   })
 }
 
-function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>) {
+function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<string>>, navigation: Record<string, any>) {
   envKeyPaths.forEach((envKeyPath) => {
     setStyle(styleObj, envKeyPath, ({ target, key, value }) => {
       const parsed = parseFunc(value, 'env')
@@ -240,7 +247,7 @@ function transformEnv (styleObj: Record<string, any>, envKeyPaths: Array<Array<s
       parsed.forEach(({ start, end, args }) => {
         const name = args[0]
         const fallback = args[1] || ''
-        const value = '' + (getSafeAreaInset(name) ?? global.__formatValue(fallback))
+        const value = '' + (getSafeAreaInset(name, navigation) ?? global.__formatValue(fallback))
         replaced.replace(start, end - 1, value)
       })
       target[key] = global.__formatValue(replaced.source())
@@ -302,6 +309,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   const envKeyPaths: Array<Array<string>> = []
   const [width, setWidth] = useState(0)
   const [height, setHeight] = useState(0)
+  const navigation = useNavigation()
 
   function varVisitor ({ key, value, keyPath }: VisitorArg) {
     if (keyPath.length === 1) {
@@ -396,7 +404,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     }
 
     // apply env
-    transformEnv(normalStyle, envKeyPaths)
+    transformEnv(normalStyle, envKeyPaths, navigation)
     // apply percent
     transformPercent(normalStyle, percentKeyPaths, percentConfig)
     // apply calc
@@ -565,13 +573,14 @@ export const debounce = <T extends AnyFunc> (
 ): ((...args: Parameters<T>) => void) & { clear: () => void } => {
   let timer: any
   const wrapper = (...args: ReadonlyArray<any>) => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
     timer = setTimeout(() => {
       func(...args)
     }, delay)
   }
   wrapper.clear = () => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
+    timer = null
   }
   return wrapper
 }
@@ -595,7 +604,7 @@ export const useStableCallback = <T extends AnyFunc | null | undefined> (
   )
 }
 
-export const usePrevious = <T, > (value: T): T | undefined => {
+export function usePrevious<T> (value: T): T | undefined {
   const ref = useRef<T | undefined>()
   const prev = ref.current
   ref.current = value
@@ -641,3 +650,67 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
     return acc
   }, {})
 }
+
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverRef = useRef(enableHover)
+  if (enableHoverRef.current !== enableHover) {
+    error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+  }
+
+  if (!enableHoverRef.current) return { isHover: false }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isHover, setIsHover] = useState(false)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    if (disabled) return
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    if (disabled) return
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
+      .onTouchesDown(() => {
+        'worklet'
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        runOnJS(setStayTimer)()
+      })
+  }, [])
+
+  if (gestureRef) {
+    gesture.simultaneousWithExternalGesture(gestureRef)
+  }
+
+  return {
+    isHover,
+    gesture
+  }
+}

package/lib/runtime/components/web/mpx-checkbox.vue

@@ -30,10 +30,10 @@
             if (this.disabled) {
               return
             }
+            this.isChecked = !this.isChecked
             if (this.group) {
               this.group.notifyChange()
             }
-            this.isChecked = !this.isChecked
           }
         },
         force: true

package/lib/runtime/components/web/mpx-picker-view-column.vue

@@ -40,14 +40,14 @@ export default {
           this.wheels[0].wheelTo(newVal[0])
         })
       }
-    }
+    },
   },
   mounted () {
     this.wheels = []
     this.refresh()
-    for (let i = 0; i < this.$refs.wheelScroll.children.length; i++) {
-      this.$refs.wheelScroll.children[i].style.height = `${this.$parent.$refs.indicatorMask.offsetHeight}px`
-    }
+  },
+  updated () {
+    this.refresh()
   },
   beforeDestroy () {
     this.wheels.forEach((wheel) => {
@@ -58,11 +58,16 @@ export default {
   methods: {
     refresh () {
       if (this.refreshing) return
+     
       this.refreshing = true
+      for (let i = 0; i < this.$refs.wheelScroll.children.length; i++) {
+        this.$refs.wheelScroll.children[i].style.height = `${this.$parent.$refs.indicatorMask.offsetHeight}px`
+      }
       this.$nextTick(() => {
         const wheelWrapper = this.$refs.wheelWrapper
         if (this.wheels[0]) {
           this.wheels[0].refresh()
+          this.refreshing = false
           return
         }
         this.wheels[0] = new BScroll(wheelWrapper, extend({