chore: use preventDefault util (#4412)

src/index-bar/demo/index.vue

@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <van-tabs v-model="activeTab">
+    <van-tabs v-model="activeTab" :color="BLUE">
       <van-tab :title="$t('basicUsage')">
         <van-index-bar>
           <div
@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import { BLUE } from '../../utils/constant';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -55,6 +57,7 @@ export default {
     }
 
     return {
+      BLUE,
       activeTab: 0,
       indexList,
       customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10]

src/index-bar/index.js

@@ -3,6 +3,7 @@ import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
 import { GREEN } from '../utils/constant';
+import { preventDefault } from '../utils/dom/event';
 import {
   getScrollTop,
   getElementTop,
@@ -168,10 +169,7 @@ export default createComponent({
       this.touchMove(event);
 
       if (this.direction === 'vertical') {
-        /* istanbul ignore else */
-        if (event.cancelable) {
-          event.preventDefault();
-        }
+        preventDefault(event);
 
         const { clientX, clientY } = event.touches[0];
         const target = document.elementFromPoint(clientX, clientY);

src/index-bar/test/__snapshots__/demo.spec.js.snap

@@ -4,10 +4,10 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #1989fa;">
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        <div class="van-tabs__line" style="background-color: rgb(25, 137, 250); width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
     <div class="van-tabs__content">