增加other分包页面

我的页面里增加跳转other分包跳转（仅在ios不是浏览器审核时展示）

tuniao-ui/components/tn-count-scroll/tn-count-scroll.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="tn-count-scroll-class tn-count-scroll">
+    <view
+      v-for="(item, index) in columns"
+      :key="index"
+      class="tn-count-scroll__box"
+      :style="{
+        width: $t.string.getLengthUnitValue(width),
+        height: heightPxValue + 'px'
+      }"
+    >
+      <view
+        class="tn-count-scroll__column"
+        :style="{
+          transform: `translate3d(0, -${keys[index] * heightPxValue}px, 0)`,
+          transitionDuration: `${duration}s`
+        }"
+      >
+        <view
+          v-for="(value, value_index) in item"
+          :key="value_index"
+          class="tn-count-scroll__column__item"
+          :class="[fontColorClass]"
+          :style="{
+            height: heightPxValue + 'px',
+            lineHeight: heightPxValue + 'px',
+            fontSize: fontSizeStyle || '32rpx',
+            fontWeight: bold ? 'bold': 'normal',
+            color: fontColorStyle || '#080808'
+          }"
+        >
+          {{ value }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import componentsColorMixin from '../../libs/mixin/components_color.js'
+  export default {
+    name: 'tn-count-scroll',
+    mixins: [componentsColorMixin],
+    props: {
+      value: {
+        type: Number,
+        default: 0
+      },
+      // 行高
+      height: {
+        type: Number,
+        default: 32
+      },
+      // 单个字的宽度
+      width: {
+        type: [String, Number],
+        default: 'auto'
+      },
+      // 是否加粗
+      bold: {
+        type: Boolean,
+        default: false
+      },
+      // 持续时间
+      duration: {
+        type: Number,
+        default: 1.2
+      },
+      // 十分位分割符
+      decimalSeparator: {
+        type: String,
+        default: '.'
+      },
+      // 千分位分割符
+      thousandthsSeparator: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      heightPxValue() {
+        return uni.upx2px(this.height || 0)
+      }
+    },
+    data() {
+      return {
+        // 每列的数据
+        columns: [],
+        // 每列对应值所在的滚动位置
+        keys: []
+      }
+    },
+    watch: {
+      value(val) {
+        this.initColumn(val)
+      }
+    },
+    created() {
+      // 为了达到一进入就有滚动效果，延迟执行初始化
+      this.initColumn()
+      setTimeout(() => {
+        this.initColumn(this.value)
+      }, 20)
+    },
+    methods: {
+      // 初始化每一列的数据
+      initColumn(val) {
+        val = val + ''
+        let digit = val.length,
+            columnArray = [],
+            rows = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+        for (let i = 0; i < digit; i++) {
+          if (val[i] === this.decimalSeparator || val[i] === this.thousandthsSeparator) {
+            columnArray.push(val[i])
+          } else {
+            columnArray.push(rows)
+          }
+        }
+        this.columns = columnArray
+        this.roll(val)
+      },
+      // 滚动处理
+      roll(value) {
+        let valueArray = value.toString().split(''),
+            lengths = this.columns.length,
+            indexs = [];
+        
+        while (valueArray.length) {
+          let figure = valueArray.pop()
+          if (figure === this.decimalSeparator || figure === this.thousandthsSeparator) {
+            indexs.unshift(0)
+          } else {
+            indexs.unshift(Number(figure))
+          }
+        }
+        while(indexs.length < lengths) {
+          indexs.unshift(0)
+        }
+        this.keys = indexs
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  
+  .tn-count-scroll {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__box {
+      overflow: hidden;
+    }
+    
+    &__column {
+      transform: translate3d(0, 0, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      transition-timing-function: cubic-bezier(0, 1, 0, 1);
+      
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+</style>