@tuya-miniapp/smart-ui 2.6.4-beta-7 → 2.6.4-beta-8

package/dist/picker-column/index.wxml

@@ -4,33 +4,71 @@
 <view
   class="{{ utils.bem('picker-column', { disabled }) }} custom-class"
   style="{{ computed.rootStyle({ itemHeight, visibleItemCount }) }}"
-  bind:touchstart="onTouchStart"
-  catch:touchmove="onTouchMove"
-  bind:touchend="onTouchEnd"
-  bind:touchcancel="onTouchEnd"
+  instanceId="{{instanceId}}"
+  id="{{instanceId}}"
+  data-options="{{options}}"
+  data-valuekey="{{valueKey}}"
+  data-itemheight="{{itemHeight}}"
+  data-visibleitemcount="{{visibleItemCount}}"
+  data-activeindex="{{activeIndex}}"
+  data-loop="{{loop}}"
+  data-animationtime="{{animationTime}}"
+  options="{{options}}" 
+  activeindex="{{activeIndex}}"
+  loop="{{loop}}"
+  valuekey="{{valueKey}}"
+  itemheight="{{itemHeight}}"
+  visibleitemcount="{{visibleItemCount}}"
+  animationtime="{{animationTime}}"
+  change:options="{{computed.updateValue(instanceId, 'options')}}" 
+  change:valuekey="{{computed.updateValue(instanceId,'valueKey')}}" 
+  change:itemheight="{{computed.updateValue(instanceId,'itemHeight')}}" 
+  change:visibleitemcount="{{computed.updateValue(instanceId, 'visibleItemCount')}}" 
+  change:activeindex="{{computed.updateValue(instanceId,'activeIndex')}}" 
+  change:loop="{{computed.updateValue(instanceId,'loop')}}" 
+  change:animationtime="{{computed.updateValue(instanceId,'animationTime')}}" 
+  change:instanceid="{{computed.updateValue(instanceId,'instanceId')}}" 
+  bind:touchstart="{{computed.touchStart(instanceId)}}"
+  catch:touchmove="{{computed.touchMove(instanceId)}}"
+  bind:touchend="{{computed.touchEnd(instanceId)}}"
+  bind:touchcancel="{{computed.touchEnd(instanceId)}}"
 >
-  <view class="smart-picker-column__offset" style="height: {{ itemHeight * options.length }}px;{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}" id="options">
-    <view class="smart-picker-column__visual" style="{{ computed.wrapperInterStyle({ offset, itemHeight, visibleItemCount, renderStart }) }}">
-      <view
-        wx:for="{{ optionsV }}"
-        wx:for-item="option"
-        wx:key="*this"
-        data-index="{{ renderStart + index }}"
-        style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: renderStart + index === currentIndex ? activeStyle : '', animationIndex, index: renderStart + index, visibleItemCount })}}"
-        class="{{ computed.wrapperItemClass({ index, renderStart, animationIndex, option })}}"
-      >
-        {{ computed.optionText(option, valueKey) }}
+  <view 
+    id="options"
+    class="smart-picker-column__offset" 
+    style="height: {{ itemHeight * options.length }}px;{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit, loop }) }}" 
+  >
+    <view class="smart-picker-column__visual">
+      <view class="smart-picker-column__visual__item_1">
+        <view
+          wx:for="{{ computed.sliceArray(viewOptions, 0, 10) }}"
+          wx:key="index"
+          data-index="{{item}}"
+          style="{{computed.wrapperItemStyle({ itemHeight, animationIndex, index: item, visibleItemCount })}}"
+          class="smart-picker-column__item_{{index}} {{ computed.wrapperItemClass({ index: item, animationIndex, options })}}"
+          bind:tap="{{computed.tapItem(instanceId)}}" 
+        >
+          <view
+            class="smart-picker-column__item__text"
+            style="{{computed.wrapperItemTextStyle({ fontStyle, activeStyle, index: item, animationIndex })}}"
+          ></view>
+        </view>
+      </view>
+      <view class="smart-picker-column__visual__item_2">
+        <view
+          wx:for="{{ computed.sliceArray(viewOptions, 10) }}"
+          wx:key="index"
+          data-index="{{item}}"
+          style="{{computed.wrapperItemStyle({ itemHeight, fontStyle, activeStyle: item === currentIndex ? activeStyle : '', animationIndex, index: item, visibleItemCount })}}"
+          class="smart-picker-column__item_{{index + 10}} {{ computed.wrapperItemClass({ index: item, animationIndex, options })}}"
+          bind:tap="{{computed.tapItem(instanceId)}}" 
+        >
+          <view
+            class="smart-picker-column__item__text"
+            style="{{computed.wrapperItemTextStyle({ fontStyle, activeStyle, index: item, animationIndex })}}"
+          ></view>
+        </view>
       </view>
-    </view>
-  </view>
-  <view class="smart-picker-column__mask">
-    <view 
-      wx:for="{{ visibleItemCount }}" 
-      wx:key="index"
-      class="smart-picker-column__mask__item" 
-      data-index="{{ currentIndex + index - 2 }}" 
-      bind:tap="onClickItem" 
-    >
     </view>
   </view>
   <view wx:if="{{unit}}" class="smart-picker-column__unit" style="height: {{ itemHeight }}px">

package/dist/picker-column/index.wxs

@@ -3,6 +3,53 @@ var style = require('../wxs/style.wxs');
 var addUnit = require('../wxs/add-unit.wxs');
 var wxUtils = require('../wxs/utils.wxs');
 
+let startPo = { y: 0 }; // 记录当前拖动元素的开始的位置
+
+const setStyle = (ownerInstance, style, selector) => {
+  const dom = queryComponent(ownerInstance, selector);
+  if (!dom) {
+    console.log(selector, '--selector 无法获取');
+    return
+  }
+  dom.setStyle(style);
+};
+
+function range(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+
+function adjustIndex(index, options) {
+  const count = options.length;
+  index = range(index, 0, count);
+  for (let i = index; i < count; i++) {
+    if (!isDisabled(options[i])) return i;
+  }
+  for (let i = index - 1; i >= 0; i--) {
+    if (!isDisabled(options[i])) return i;
+  }
+}
+
+function isDisabled(option) {
+  return typeof option === 'object' && option.disabled;
+}
+
+function generateRangeArray(start, end) {
+  const resultArray = [];
+  for (let i = start; i < end; i++) {
+      resultArray.push(i);
+  }
+  return resultArray;
+}
+
+const queryComponent = function (ownerInstance, selector) {
+  const instance = ownerInstance?.selectComponent(selector);
+  return instance;
+};
+
+function sliceArray(list, start, end) {
+  return list.slice(start, end);
+}
+
 function isObj(x) {
   var type = typeof x;
   return x !== null && (type === 'object' || type === 'function');
@@ -27,53 +74,433 @@ function wrapperStyle(data) {
       'text-indent': data.unit ? '-8rpx' : '0',
       transition: 'transform ' + data.duration + 'ms ease-out',
       'line-height': addUnit(data.itemHeight),
-      transform: 'translate3d(0, ' + offset + ', 0)',
     });
   }
   return style({
     'text-indent': data.unit ? '-8rpx' : '0',
     'line-height': addUnit(data.itemHeight),
-    transform: 'translate3d(0, ' + offset + ', 0)',
-  });
-}
-
-function wrapperInterStyle(data) {
-  var offset = data.renderStart * data.itemHeight;
-  offset = addUnit(offset);
-  return style({
-    'padding-top': offset,
   });
 }
 
 function wrapperItemStyle(data) {
   var heightStyleStr = "height: " + data.itemHeight + 'px;'
-  var fontStyleStr = style(data.fontStyle);
-  var activeStyleStr = style(data.activeStyle);
+  var maxSideShow = data.visibleItemCount + 2;
+  var offsetIndex = data.animationIndex - data.index;
+  if (Math.abs(offsetIndex) > maxSideShow) heightStyleStr
+  const finOffsetIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow);
+  var scale = 1 - Math.abs(finOffsetIndex * 0.15);
+  var rotateX = rotateX = Math.abs(finOffsetIndex * 10);
+  var direction = offsetIndex > 0 ? 1 : -1;
+  var translateYIndex = Math.abs(finOffsetIndex);
+  var translateYOffset = translateYIndex * translateYIndex * direction * state.itemHeight * 0.1
+  const transStyle = style({
+    transform: `rotateX(${rotateX}deg) scale(${scale}) translateY(${translateYOffset}px) translateZ(0)`,
+  });
+  return transStyle + ';' + heightStyleStr
+}
 
-  // var maxSideShow = Math.floor(data.visibleItemCount / 2) + 1;
-  // var offsetIndex = data.animationIndex - data.index;
-  // var scale = Math.min(Math.abs(offsetIndex * 0.2), 0.2 * maxSideShow)
-  // var rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * maxSideShow) : Math.max(offsetIndex * 25, -25 * maxSideShow)
-  // var translateYIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow)
-  // const transStyle = style({
-  //   transform: `rotateX(${rotateX}deg) scale(${1 - scale}) translateY(${translateYIndex * Math.abs(translateYIndex) * Math.abs(translateYIndex) * data.itemHeight * 0.1}px) translateZ(0)`,
-  // });
-  // return transStyle + ';' + heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
-  return heightStyleStr + (fontStyleStr ? fontStyleStr + ';' : fontStyleStr) + activeStyleStr
+function wrapperItemTextStyle(data) {
+  var fontStyle = data.fontStyle;
+  var activeStyle = data.activeStyle;
+  var isActive = Math.abs(data.index - data.animationIndex) < 0.5;
+  return fontStyle ? fontStyle + ';' : '' + (isActive ? activeStyle + ';' : '')
 }
 
 function wrapperItemClass(data) {
   var staticClass = 'smart-ellipsis';
   var activeClass = 'active-class';
-  var isActive = Math.abs(data.renderStart + data.index - data.animationIndex) < 0.9;
-  return staticClass + ' ' + wxUtils.bem('picker-column__item', { disabled: data.option && data.option.disabled, selected: isActive }) + ' ' + (isActive ? activeClass : '');
+  var isActive = Math.abs(data.index - data.animationIndex) < 0.5;
+  const currOption = data.options[data.index];
+  return staticClass + ' ' + wxUtils.bem('picker-column__item', { disabled: currOption && currOption.disabled, selected: isActive }) + ' ' + (isActive ? activeClass : '');
 }
 
+var state = {}
+
+var preStateObj = {}
+
+function updateState(instanceId, key, value) {
+  if (!key) return;
+  state[instanceId] = state[instanceId] || {}
+  state[instanceId][key] = value
+}
+
+function getCurrState(instanceId) {
+  return state[instanceId]
+}
+
+function updatePreState(instanceId, state) {
+  const preStateStr = JSON.stringify(state)
+  preStateObj[instanceId] = preStateStr;
+}
+
+function getPreState(instanceId) {
+  return preStateObj[instanceId]
+}
+
+function getDomState(ownerInstance) {
+  const dom = queryComponent(ownerInstance, '.smart-picker-column');
+  const state = dom.getDataset();
+  return state
+}
+
+function initDomState(instanceId, ownerInstance) {
+  const state = getDomState(ownerInstance);
+  updateState(instanceId, 'options', state.options)
+  updateState(instanceId, 'valueKey', state.valuekey)
+  updateState(instanceId, 'itemHeight', state.itemheight)
+  updateState(instanceId, 'visibleItemCount', state.visibleitemcount)
+  updateState(instanceId, 'activeIndex', state.activeindex)
+  updateState(instanceId, 'loop', state.loop)
+  updateState(instanceId, 'animationTime', state.animationtime)
+}
+
+const updateValue = (instanceId, key) => (newOptions, oldOptions, ownerInstance) => {
+  if (!instanceId) return;
+  initDomState(instanceId, ownerInstance)
+  updateState(instanceId, key, newOptions)
+  updateOffset(instanceId, ownerInstance)
+}
+
+function updateOffset(instanceId, ownerInstance) {
+  const state = getCurrState(instanceId);
+  const domState = getDomState(ownerInstance);
+  if(getPreState(instanceId) === JSON.stringify(domState) || !state.itemHeight || !state.visibleItemCount || !Array.isArray(state.options) || state.animationTime === undefined) {
+    return
+  }
+  updatePreState(instanceId, domState)
+  const sideCount = Math.floor(state.visibleItemCount / 2)
+  const optionLength = state.options.length;
+  updateState(instanceId, 'sideCount', sideCount);
+  const currActiveIndex = state.activeIndex < 0 ? 0 : state.activeIndex >= optionLength ? optionLength - 1 : state.activeIndex;
+  const currList = getCurrList(instanceId, state.options, currActiveIndex, ownerInstance)
+  updateRenderPartOffset(instanceId, ownerInstance)
+  const textVarStyle = {}
+  currList.forEach((item, index) => {
+    textVarStyle['--picker-item-content_' + index] = "'" + optionText(item, state.valueKey) + "'"
+  })
+  const offset = state.itemHeight * (sideCount - currActiveIndex);
+  updateState(instanceId, 'offset', offset)
+  updateState(instanceId,'offsetActiveIndex', currActiveIndex);
+  setStyle(ownerInstance, {
+    transform: 'translateY(' + addUnit(offset) + ')',
+    ...textVarStyle,
+  }, '.smart-picker-column__offset');
+
+  setTimeout(() => { 
+    updateItemStyle(instanceId, ownerInstance);
+  }, 10)
+}
+/** 更新聚焦点位样式 */
+const updateItemStyle = (instanceId, ownerInstance, time) => {
+  const state = getCurrState(instanceId);
+  const currActiveIndex = state.offsetActiveIndex;
+  state.viewIndexList.slice(0, 20).map((item, index) => {
+    const viewOptionsActiveIndex = item;
+    const maxSideShow = state.sideCount + 2;
+    const offsetIndex = currActiveIndex - viewOptionsActiveIndex;
+    if(Math.abs(offsetIndex) > maxSideShow) return;
+    const finOffsetIndex = offsetIndex > 0 ? Math.min(offsetIndex, maxSideShow) : Math.max(offsetIndex, -maxSideShow);
+    const scale = 1 - Math.abs(finOffsetIndex * 0.15);
+    const rotateX = Math.abs(finOffsetIndex * 10);
+    const direction = offsetIndex > 0 ? 1 : -1;
+    const translateYIndex = Math.abs(finOffsetIndex);
+    const translateYOffset = translateYIndex * translateYIndex * direction * state.itemHeight * 0.1
+    const className = `.smart-picker-column__item_${index}`;
+    setStyle(ownerInstance, {
+      transform: `rotateX(${rotateX}deg) scale(${scale}) translateY(${translateYOffset}px) translateZ(0)`,
+      transition: !time ? 'none' : 'transform ' + time + 'ms',
+    }, className);
+  })
+}
+
+const getTwoPartOffset = (activeIndex) => {
+  const currActiveIndex = activeIndex < 0 ? 0 : activeIndex
+  let partNum = Math.floor((currActiveIndex) / 10);
+  const lastNum = activeIndex - partNum * 10;
+  if (lastNum < 5 && partNum > 0) {
+    partNum -= 1;
+  }
+  const part2Times = Math.floor(partNum / 2);
+  const part2Percent = partNum % 2;
+  const onePartOffset = part2Percent + part2Times;
+  const twoPartOffset = part2Times;
+  return { onePartOffset , twoPartOffset }
+}
+
+const getCurrList = (instanceId, options, activeIndex, ownerInstance) => {
+  const { onePartOffset, twoPartOffset } = getTwoPartOffset(activeIndex);
+  const isReverse = onePartOffset > twoPartOffset;
+  updateState(instanceId, 'onePartOffset', onePartOffset)
+  updateState(instanceId, 'twoPartOffset', twoPartOffset)
+  const startPart = twoPartOffset + onePartOffset;
+  const viewIndexList = !isReverse ? generateRangeArray(startPart * 10, startPart * 10 + 20) : [...generateRangeArray(startPart * 10 + 10, startPart * 10 + 20), ...generateRangeArray(startPart * 10, startPart * 10 + 10)]
+  updateState(instanceId,'viewIndexList', viewIndexList)
+  // ownerInstance.callMethod('viewOptionsChange', viewIndexList);
+  if (!isReverse) return options.slice(startPart * 10, startPart * 10 + 20);
+  let firstList = options.slice(startPart * 10 + 10, startPart * 10 + 20);
+  const scendList = options.slice(startPart * 10, startPart * 10 + 10);
+  if (firstList.length < 10) {
+    // firstList = [...firstList, ...options.slice(0, 10 - firstList.length)];
+    firstList = [...firstList, ...new Array(10 - firstList.length).fill('')];
+  }
+  return [...firstList, ...scendList];
+}
+
+const updateRenderPartOffset = (instanceId, ownerInstance, direction) => { 
+  const state = getCurrState(instanceId);
+  const offsetDistance = 20 * state.itemHeight;
+  setStyle(ownerInstance, {
+    transform: 'translateY(' + addUnit(offsetDistance * state.onePartOffset) + ')',
+  }, '.smart-picker-column__visual__item_1');
+  setStyle(ownerInstance, {
+    transform: 'translateY(' + addUnit(offsetDistance * state.twoPartOffset) + ')',
+  }, '.smart-picker-column__visual__item_2');
+}
+
+const checkNeedUpdateItemStyle = (instanceId, currActiveIndex) => {
+  const state = getCurrState(instanceId);
+  const { onePartOffset, twoPartOffset } = getTwoPartOffset(currActiveIndex);
+  return onePartOffset !== state.onePartOffset || twoPartOffset !== state.twoPartOffset;
+}
+
+const updateOptionsStyle = (instanceId, ownerInstance, style, time) => {
+  const state = getCurrState(instanceId);
+  const needUpdateListOption = checkNeedUpdateItemStyle(instanceId, state.offsetActiveIndex);
+  if (!needUpdateListOption) {
+    setStyle(ownerInstance, {
+      ...style,
+    }, '.smart-picker-column__offset');
+    updateItemStyle(instanceId, ownerInstance, time);
+    return
+  }
+  const currList = getCurrList(instanceId, state.options, state.offsetActiveIndex, ownerInstance)
+  updateRenderPartOffset(instanceId, ownerInstance);
+  const textVarStyle = getCSSVarText(instanceId, currList)
+  setStyle(ownerInstance, {
+    ...style,
+    ...textVarStyle,
+  }, '.smart-picker-column__offset');
+  updateItemStyle(instanceId, ownerInstance, time);
+}
+
+const getCSSVarText = (instanceId, currList) => {
+  const state = getCurrState(instanceId);
+  const textVarStyle = {}
+  currList.forEach((item, index) => {
+    textVarStyle['--picker-item-content_' + index] = "'" + optionText(item, state.valueKey) + "'"
+  })
+  return textVarStyle;
+}
+
+const touchStart = (instanceId) => (e, ownerInstance) => { 
+  const state = getCurrState(instanceId);
+  if(state.endTimer) {
+    clearInterval(state.endTimer);
+    updateState(instanceId, 'endTimer', null);
+    updateState(instanceId, 'offset', state.offsetting);
+  }
+  const { pageY } = e.touches[0];
+  startPo.y = pageY;
+  updateState(instanceId, 'offsetList', []);
+  updateState(instanceId, 'moving', false);
+  updateState(instanceId, 'offsetting', state.offset);
+}
+
+
+// 滚动期间：1.更新滚动位置 2.更新聚焦点位样式 3.更新列表渲染起始位置 4.更新列表文字CSS 变量
+const touchMove = (instanceId) => (e, ownerInstance) => { 
+  const state = getCurrState(instanceId);
+  updateState(instanceId, 'moving', true);
+  const { pageY } = e.touches[0];
+  const offsetY = pageY - startPo.y;
+  const offset = state.offset + offsetY;
+  const newOffsetList = [...state.offsetList, offset];
+  const currActiveIndex = -offset / state.itemHeight + state.sideCount;
+  const preIndexLast = Math.abs(state.offsetActiveIndex % 1);
+  const curIndexLast = Math.abs(currActiveIndex % 1);
+  const offsetCompare = offset - state.offsetting;
+  const direction = offsetCompare < 0 ? 'down' : offsetCompare > 0 ? 'up' : state.movingDirection || 'down';
+  updateState(instanceId, 'offsetActiveIndex', currActiveIndex);
+  updateState(instanceId, 'offsetting', offset);
+  updateState(instanceId, 'offsetList', newOffsetList);
+  updateState(instanceId, 'movingDirection', direction);
+  updateOptionsStyle(instanceId, ownerInstance, {
+    transform: 'translateY(' + addUnit(offset) + ')',
+    transition: 'none',
+  });
+  if((direction === 'down' && preIndexLast <= 0.5 && curIndexLast > 0.5) || (direction === 'up' && preIndexLast >= 0.5 && curIndexLast < 0.5)) {
+    ownerInstance.callMethod('animationIndexChange', currActiveIndex);
+    ownerInstance.callMethod('vibrateShort');
+  }
+}
+
+
+const touchEnd = (instanceId) => function (e, ownerInstance) { 
+  const state = getCurrState(instanceId);
+  if(!state.moving) return;
+  const preOffsetList = state.offsetList;
+
+  const maxUpOptionsDistance = state.loop ? state.itemHeight * 500 : state.sideCount * state.itemHeight;
+  const maxDownOptionsDistance = state.loop ? -state.itemHeight * 500 : -Math.max((state.options.length - state.sideCount - 1) * state.itemHeight, 0);
+  // 计算最后几帧的平均速度，用于惯性滚动
+  let recentVelocity = 0;
+  /** -1: 向下, 1: 向上, 0: 无滚动 */
+  let scrollDirection = 0;
+  
+  if (preOffsetList.length >= 2) {
+    // 计算速度，优先使用最后几帧的数据
+    let recentOffset = 0;
+    let recentTime = 0;
+    
+    if (preOffsetList.length >= 3) {
+      // 有3个或以上数据点，使用最后3个点计算速度
+      recentOffset = preOffsetList[preOffsetList.length - 1] - preOffsetList[preOffsetList.length - 3];
+      recentTime = 2; // 2帧间隔
+    } else if (preOffsetList.length === 2) {
+      // 只有2个数据点，使用这2个点计算速度
+      recentOffset = preOffsetList[1] - preOffsetList[0];
+      recentTime = 1; // 1帧间隔
+    }
+    
+    // 计算速度 (px/ms)
+    recentVelocity = Math.abs(recentOffset) / (recentTime * 16);
+    
+    // 确定滚动方向
+    if (recentOffset > 0) {
+      scrollDirection = 1; // 向上滚动
+    } else if (recentOffset < 0) {
+      scrollDirection = -1; // 向下滚动
+    }
+  }
+  
+  // 惯性滚动参数配置
+  const minVelocity = 0.1; // 最小速度阈值，低于此值停止滚动
+  const maxInertiaDistance = state.itemHeight * 8; // 最大惯性滚动距离
+  
+  // 计算惯性滚动距离
+  let inertiaDistance = 0;
+  if (recentVelocity > minVelocity) {
+    // 使用物理公式计算惯性距离：distance = velocity^2 / (2 * friction)
+    // 这里简化处理，直接使用速度乘以一个系数
+    inertiaDistance = recentVelocity * 200; // 200ms的惯性时间
+    
+    // 限制最大滚动距离
+    if (inertiaDistance > maxInertiaDistance) {
+      inertiaDistance = maxInertiaDistance;
+    }
+        
+    // 根据滚动方向确定正负值
+    inertiaDistance = inertiaDistance * scrollDirection;
+  }
+
+  // 计算最终目标位置 和 index
+  let targetOffset = Math.round((state.offsetting + inertiaDistance) / state.itemHeight) * state.itemHeight;
+  let currTargetActiveIndex = -targetOffset / state.itemHeight + state.sideCount;
+  currTargetActiveIndex = adjustIndex(currTargetActiveIndex, state.options);
+  targetOffset = -(currTargetActiveIndex - state.sideCount) * state.itemHeight;
+
+  const isNeedTransition = Math.abs(targetOffset - state.offsetting) > 1;
+  const time = isNeedTransition ? state.animationTime : 0;
+  const animationOffset = Math.abs(targetOffset - state.offsetting);
+  const offsetCount = Math.floor(Math.abs(currTargetActiveIndex - state.offsetActiveIndex));
+  if (time > 150 && animationOffset > state.itemHeight) {
+    const midTime = 16;
+    const count = Math.floor((time - 150) / midTime);
+    const midOffset = (targetOffset - state.offsetting)/ count;
+    let startCount = 0
+    const endTimer = setInterval(() => {
+      startCount++;
+      const currOffset = state.offsetting + midOffset;
+      const currIndex = -currOffset / state.itemHeight + state.sideCount;
+      if (startCount >= count) {
+        // 动画结束，设置最终状态
+        updateState(instanceId, 'offsetActiveIndex', currTargetActiveIndex);
+        clearInterval(endTimer);
+        updateState(instanceId, 'offsetting', targetOffset);
+        updateState(instanceId, 'offset', targetOffset);
+        updateState(instanceId, 'moving', false);
+        updateOptionsStyle(instanceId, ownerInstance, {
+          transform: 'translateY(' + addUnit(Math.round(targetOffset)) + ')',
+          transition: 'transform ' + (time ? time + 100 : time) + 'ms',
+        });
+        if(currTargetActiveIndex !== state.activeIndex) {
+          ownerInstance.callMethod('activeIndexChange', currTargetActiveIndex);
+        } else {
+          ownerInstance.callMethod('animationIndexChange', currTargetActiveIndex);
+        }
+        return 
+      };
+      updateState(instanceId, 'offsetActiveIndex', currIndex);
+      updateState(instanceId, 'offsetting', currOffset);
+      updateOptionsStyle(instanceId, ownerInstance, {
+        transform: 'translateY(' + addUnit(Math.round(targetOffset)) + ')',
+        transition: 'transform ' + (time ? time + 100 : time) + 'ms',
+      });
+    }, midTime);
+    updateState(instanceId, 'endTimer', endTimer);
+    ownerInstance.callMethod('vibrateShort', offsetCount);
+  } else {
+    Math.abs(currTargetActiveIndex - state.offsetActiveIndex) >= 1 && ownerInstance.callMethod('vibrateShort');
+    updateState(instanceId, 'offsetActiveIndex', currTargetActiveIndex);
+    updateState(instanceId, 'offsetting', targetOffset);
+    updateState(instanceId, 'offset', targetOffset);
+    updateState(instanceId, 'moving', false);
+    updateOptionsStyle(instanceId, ownerInstance, {
+      transform: 'translateY(' + addUnit(Math.round(targetOffset)) + ')',
+      transition: 'transform ' + (time ? time + 100 : time) + 'ms',
+    });
+    if(currTargetActiveIndex !== state.activeIndex) {
+      ownerInstance.callMethod('activeIndexChange', currTargetActiveIndex);
+    } else {
+      ownerInstance.callMethod('animationIndexChange', currTargetActiveIndex);
+    }
+    return
+  }
+}
+
+const tapItem = (instanceId) => (e, ownerInstance) => {
+  const state = getCurrState(instanceId);
+  const currTargetActiveIndex = e.currentTarget.dataset.index;
+  const option = state.options[currTargetActiveIndex];
+  if (option === undefined || option && typeof option === 'object' && option.disabled) return;
+  const targetOffset = -(currTargetActiveIndex - state.sideCount) * state.itemHeight;
+  if (state.startTimer) {
+    clearTimeout(state.startTimer);
+    updateState(instanceId, 'startTimer', null);
+  }
+  if (currTargetActiveIndex === state.offsetActiveIndex) return;
+  const offsetCount = Math.abs(currTargetActiveIndex - state.offsetActiveIndex);
+  if (state.tapTimer) {
+    clearTimeout(state.tapTimer);
+    updateState(instanceId, 'tapTimer', null);
+  }
+  updateState(instanceId, 'offsetActiveIndex', currTargetActiveIndex);
+  updateState(instanceId, 'offsetting', targetOffset);
+  updateState(instanceId, 'offset', targetOffset);
+  updateOptionsStyle(instanceId, ownerInstance, {
+    transform: 'translateY(' + addUnit(Math.round(targetOffset)) + ')',
+    transition: 'transform 200ms',
+  }, 200);
+  ownerInstance.callMethod('vibrateShort', offsetCount, 150);
+  const tapTimer = setTimeout(() => {
+    ownerInstance.callMethod('activeIndexChange', currTargetActiveIndex);
+    updateState(instanceId, 'tapTimer', null);
+  }, 150);
+  updateState(instanceId, 'tapTimer', tapTimer);
+}
+
+
 module.exports = {
   optionText: optionText,
   rootStyle: rootStyle,
   wrapperStyle: wrapperStyle,
-  wrapperInterStyle: wrapperInterStyle,
   wrapperItemStyle: wrapperItemStyle,
-  wrapperItemClass: wrapperItemClass
+  wrapperItemClass: wrapperItemClass,
+  updateValue: updateValue,
+  touchStart: touchStart,
+  touchMove: touchMove,
+  touchEnd: touchEnd,
+  sliceArray: sliceArray,
+  wrapperItemTextStyle: wrapperItemTextStyle,
+  tapItem: tapItem,
 };

package/dist/picker-column/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px);left:100%;margin-left:var(--picker-option-unit-mid-size,4px);position:absolute;text-align:left;top:50%;transform:translateY(-50%);white-space:nowrap}.smart-picker-column__max-text{color:transparent;font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);position:relative}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3);pointer-events:none}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px);left:100%;margin-left:var(--picker-option-unit-mid-size,4px);position:absolute;text-align:left;top:50%;transform:translateY(-50%);white-space:nowrap}.smart-picker-column__max-text{color:transparent;font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);position:relative}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__item_0 .smart-picker-column__item__text:after{content:var(--picker-item-content_0,"")}.smart-picker-column__item_1 .smart-picker-column__item__text:after{content:var(--picker-item-content_1,"")}.smart-picker-column__item_2 .smart-picker-column__item__text:after{content:var(--picker-item-content_2,"")}.smart-picker-column__item_3 .smart-picker-column__item__text:after{content:var(--picker-item-content_3,"")}.smart-picker-column__item_4 .smart-picker-column__item__text:after{content:var(--picker-item-content_4,"")}.smart-picker-column__item_5 .smart-picker-column__item__text:after{content:var(--picker-item-content_5,"")}.smart-picker-column__item_6 .smart-picker-column__item__text:after{content:var(--picker-item-content_6,"")}.smart-picker-column__item_7 .smart-picker-column__item__text:after{content:var(--picker-item-content_7,"")}.smart-picker-column__item_8 .smart-picker-column__item__text:after{content:var(--picker-item-content_8,"")}.smart-picker-column__item_9 .smart-picker-column__item__text:after{content:var(--picker-item-content_9,"")}.smart-picker-column__item_10 .smart-picker-column__item__text:after{content:var(--picker-item-content_10,"")}.smart-picker-column__item_11 .smart-picker-column__item__text:after{content:var(--picker-item-content_11,"")}.smart-picker-column__item_12 .smart-picker-column__item__text:after{content:var(--picker-item-content_12,"")}.smart-picker-column__item_13 .smart-picker-column__item__text:after{content:var(--picker-item-content_13,"")}.smart-picker-column__item_14 .smart-picker-column__item__text:after{content:var(--picker-item-content_14,"")}.smart-picker-column__item_15 .smart-picker-column__item__text:after{content:var(--picker-item-content_15,"")}.smart-picker-column__item_16 .smart-picker-column__item__text:after{content:var(--picker-item-content_16,"")}.smart-picker-column__item_17 .smart-picker-column__item__text:after{content:var(--picker-item-content_17,"")}.smart-picker-column__item_18 .smart-picker-column__item__text:after{content:var(--picker-item-content_18,"")}.smart-picker-column__item_19 .smart-picker-column__item__text:after{content:var(--picker-item-content_19,"")}.smart-picker-column__item_20 .smart-picker-column__item__text:after{content:var(--picker-item-content_20,"")}

package/dist/popup/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-popup{-webkit-overflow-scrolling:touch;animation:ease both;background-color:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;position:fixed;transition-timing-function:ease}.smart-popup--center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.smart-popup--center.smart-popup--round{border-radius:var(--popup-round-border-radius,16px);overflow:hidden}.smart-popup--top{left:0;top:0;width:100%}.smart-popup--top.smart-popup--round{border-radius:0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--right{right:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--right.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--bottom{bottom:0;left:0;width:100%}.smart-popup--bottom.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0;overflow:hidden}.smart-popup--left{left:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--left.smart-popup--round{border-radius:0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0;overflow:hidden}.smart-popup--bottom.smart-popup--safeTabBar,.smart-popup--top.smart-popup--safeTabBar{bottom:var(--tabbar-height,55px)}.smart-popup--safeTop{padding-top:env(safe-area-inset-top)}.smart-popup__close-icon{color:var(--popup-close-icon-color,#969799);font-size:var(--popup-close-icon-size,24px);position:absolute;z-index:var(--popup-close-icon-z-index,1)}.smart-popup__close-icon--top-left{left:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--top-right{right:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-left{bottom:var(--popup-close-icon-margin,12px);left:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-right{bottom:var(--popup-close-icon-margin,12px);right:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon:active{opacity:.6}.smart-scale-enter-active,.smart-scale-leave-active{transition-property:opacity,transform}.smart-scale-enter,.smart-scale-leave-to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-center-enter-active,.smart-center-leave-active{transition-property:opacity}.smart-center-enter,.smart-center-leave-to{opacity:0}.smart-bottom-enter-active,.smart-bottom-leave-active,.smart-left-enter-active,.smart-left-leave-active,.smart-right-enter-active,.smart-right-leave-active,.smart-top-enter-active,.smart-top-leave-active{transition-property:transform}.smart-bottom-enter,.smart-bottom-leave-to{transform:translate3d(0,100%,0)}.smart-top-enter,.smart-top-leave-to{transform:translate3d(0,-100%,0)}.smart-left-enter,.smart-left-leave-to{transform:translate3d(-100%,-50%,0)}.smart-right-enter,.smart-right-leave-to{transform:translate3d(100%,-50%,0)}

package/dist/popup/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-popup{-webkit-overflow-scrolling:touch;animation:ease both;background-color:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;position:fixed;transition-timing-function:ease}.smart-popup--center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.smart-popup--center.smart-popup--round{border-radius:var(--popup-round-border-radius,16px);overflow:hidden}.smart-popup--top{left:0;top:0;width:100%}.smart-popup--top.smart-popup--round{border-radius:0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--right{right:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--right.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--bottom{bottom:0;left:0;width:100%}.smart-popup--bottom.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0;overflow:hidden}.smart-popup--left{left:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--left.smart-popup--round{border-radius:0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0;overflow:hidden}.smart-popup--bottom.smart-popup--safeTabBar,.smart-popup--top.smart-popup--safeTabBar{bottom:var(--tabbar-height,55px)}.smart-popup--safeTop{padding-top:env(safe-area-inset-top)}.smart-popup__close-icon{color:var(--popup-close-icon-color,#969799);font-size:var(--popup-close-icon-size,24px);position:absolute;z-index:var(--popup-close-icon-z-index,1)}.smart-popup__close-icon--top-left{left:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--top-right{right:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-left{bottom:var(--popup-close-icon-margin,12px);left:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-right{bottom:var(--popup-close-icon-margin,12px);right:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon:active{opacity:.6}.smart-scale-enter-active,.smart-scale-leave-active{transition-property:opacity,transform}.smart-scale-enter,.smart-scale-leave-to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-center-enter-active,.smart-center-leave-active{transition-property:opacity}.smart-center-enter,.smart-center-leave-to{opacity:0}.smart-bottom-enter-active,.smart-bottom-leave-active,.smart-left-enter-active,.smart-left-leave-active,.smart-right-enter-active,.smart-right-leave-active,.smart-top-enter-active,.smart-top-leave-active{transition-property:transform}.smart-bottom-enter,.smart-bottom-leave-to{transform:translate3d(0,100%,0)}.smart-top-enter,.smart-top-leave-to{transform:translate3d(0,-100%,0)}.smart-left-enter,.smart-left-leave-to{transform:translate3d(-100%,-50%,0)}.smart-right-enter,.smart-right-leave-to{transform:translate3d(100%,-50%,0)}

package/dist/rate/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-rate{display:inline-flex;-webkit-user-select:none;user-select:none}.smart-rate__item{padding:0 var(--rate-horizontal-padding,2px);position:relative}.smart-rate__item:not(:last-child){padding-right:var(--rate-icon-gutter,4px)}.smart-rate__icon{color:var(--rate-icon-void-color,#c8c9cc);display:block;font-size:var(--rate-icon-size,20px);height:100%}.smart-rate__icon--half{left:var(--rate-horizontal-padding,2px);overflow:hidden;position:absolute;top:0;width:.5em}.smart-rate__icon--full,.smart-rate__icon--half{color:var(--rate-icon-full-color,#ee0a24)}.smart-rate__icon--disabled{color:var(--rate-icon-disabled-color,#c8c9cc)}

package/dist/rate/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-rate{display:inline-flex;-webkit-user-select:none;user-select:none}.smart-rate__item{padding:0 var(--rate-horizontal-padding,2px);position:relative}.smart-rate__item:not(:last-child){padding-right:var(--rate-icon-gutter,4px)}.smart-rate__icon{color:var(--rate-icon-void-color,#c8c9cc);display:block;font-size:var(--rate-icon-size,20px);height:100%}.smart-rate__icon--half{left:var(--rate-horizontal-padding,2px);overflow:hidden;position:absolute;top:0;width:.5em}.smart-rate__icon--full,.smart-rate__icon--half{color:var(--rate-icon-full-color,#ee0a24)}.smart-rate__icon--disabled{color:var(--rate-icon-disabled-color,#c8c9cc)}

package/dist/row/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-row:after{clear:both;content:"";display:table}

package/dist/row/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-row:after{clear:both;content:"";display:table}