时间控件滚动问题

src/common/PickTime.vue

@@ -17,8 +17,8 @@
   import $ from 'jquery';
   // import {getNum} from '@utils/tools.js';
   // const num = getNum();
-  const num = [0,1,2,3,4,5,6,7,8,9];
-  const unit = ['分钟', '小时', '天', '周', '月','年'];
+  const num = [0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9];
+  const unit = ['分钟', '小时', '天', '周', '月','年','分钟', '小时', '天', '周', '月','年','分钟', '小时', '天', '周', '月','年'];
   export default {
     name:'PickTime',
     data() {
@@ -26,16 +26,18 @@
         columns: [
           {
             values:num,
-            className:'column1'
+            className:'column1',
+            defaultIndex: 10
           },
           {
             values:num,
             className:'column2',
-            defaultIndex: 2
+            defaultIndex: 11
           },
           {
             values:unit,
-            className:'column3'
+            className:'column3',
+            defaultIndex: 6
           },
         ],
         val:this.item.value || '请选择',
@@ -46,6 +48,7 @@
     methods: {
       showPicker(){
         this.show = true;
+        this.$emit('forbidS'); //禁止滚动
       },
       getVal(){
         const val1 = $(".column1 ul .van-picker-column__item--selected")[0].innerText;
@@ -55,7 +58,8 @@
         this.show = false;
         const newData = Object.assign({},this.item,{value:this.val,valueP:this.val});
         this.$emit("updata",newData);
-      }
+        this.$emit('resetS'); //恢复滚动
+      },
     }
   };
 </script>

src/components/Detail.vue

@@ -36,7 +36,11 @@
           @updata="updataData($event,item)"
         ></MultiLineInput>
       </template>
-      <PickTime v-if="item.controlType == 9" @updata="updataData" :item="item"/>
+      <PickTime v-if="item.controlType == 9" 
+              @updata="updataData" 
+              @forbidS="forbid" 
+              @resetS="regain" 
+              :item="item"/>
     </div>
   </div>
 </template>
@@ -72,6 +76,13 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
       PickTime
     },
     methods:{
+      // 禁止滚动
+      forbid(){
+        this.$emit('destyS')
+      },
+      regain(){//恢复滚动
+        this.$emit('resetS')
+      },
       updataData(data,item){
         const origMapping = this.datas.questionMapping;
         let mapping = this.checkDatas.questionMapping;

src/components/DetailBox.vue

@@ -9,7 +9,9 @@
                   ref="detail"
                   :data="data"
                   @check="changeCheck($event)"
-                  @checkReq="changeFins($event)"/>
+                  @checkReq="changeFins($event)"
+                  @destyS="destyScroll"
+                  @resetS="resetScroll"/>
         </div>
         <!-- <div class="foot" @click="complete">完成</div> -->
       </div>
@@ -74,6 +76,17 @@
       })
     },
     methods:{
+      // 点击时间控件时 先销毁再重新建立
+      destyScroll(){
+        this.scroll.destroy();
+      },
+      resetScroll(){
+        setTimeout(() => {
+          let scroll = setScroll(BScroll,true,'.viewPrew')
+          this.scroll = scroll
+          scroll.on('scroll', this.onScroll)
+        }, 400);
+      },
       onScroll(data) {
         this.$store.commit('setScroll', data)
         document.activeElement.scrollIntoViewIfNeeded(true);        

src/utils/tools.js

@@ -318,6 +318,7 @@ function setScroll(scroll,flg,wrapper){
   return new scroll(wrapper?wrapper:'.wrapper',{
       scrollY: flg,
       click: true,
+      tap: true,
       probeType:3,
       // bounceTime:800,
       momentumLimitTime:300,//只有在屏幕上快速滑动的时间小于 momentumLimitTime，才能开启 momentum 动画。