采坑及解决方法

[better2021]

iview的table组件小坑

多个表格复用时，需要增加 :row-key="true" 属性，切换时才会重新渲染

[better2021]

swpier插件滑动，有时用手滚动之后就不会再自动滑动了

<style>
 .swiperBox{
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top:30%;
      width: 100%;
    }
    .swiperBox .swiper-container{
      width: 80%;
    }

    /*左右按钮*/
    .swiperBox .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        background-image: url("./images/right.png");
        left: 8px;
        right: auto;
        transform: rotate(180deg);
        background-size: 60%;
        outline: none;
    }

    .swiperBox .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
      background-image: url("./images/right.png");
      right: 8px;
      left: auto;
      background-size: 60%;
      outline: none;
    }

    /*分页圆点*/
    .swiper-pagination{
      width: 100%;
      margin-top: 10px;
    }
    .swiper-pagination .swiper-pagination-bullet{
      margin: 0 5px;
      background: url("./images/none.png") no-repeat;
      background-size:12px 12px;
      width: 12px;
      height: 12px;
      opacity:0.8;
    }
    .swiper-pagination .swiper-pagination-bullet-active {
        opacity: 1;
        background: url("./images/selected.png") no-repeat;
        background-size:12px 12px;
        width: 12px;
        height: 12px;
      }
    </style>

  <div class="swiperBox">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./images/banner1.png"/></div>
        <div class="swiper-slide"><img src="./images/banner2.png"/></div>
        <div class="swiper-slide"><img src="./images/banner3.png"/></div>
        <div class="swiper-slide"><img src="./images/banner4.png"/></div>
        <div class="swiper-slide"><img src="./images/banner5.png"/></div>
      </div>
      </div>

       <!-- 如果需要分页器 -->
       <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

  </div>

  <script>
  var mySwiper = new Swiper ('.swiper-container', {

      // 轮播图的方向，也可以是vertical方向
      direction:'horizontal',
      // 是否循环播放
      loop: true,
      // 自动播放时间
      autoplay: {
        disableOnInteraction: false, // 这样，即使我们用手滑动之后， 定时器也不会被清除
        delay: 1500,
      },
      // 播放的速度
      speed:1000,
      // 如果需要分页器，即下面的小圆点
      pagination: {
          el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      preventLinksPropagation: false   // 阻止点击事件冒泡
});
  </script>

[better2021]

在script标签中设置type="module"后就可以使用es6的import导入和export导出了

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

[better2021]

判断手机设备（ios与安卓）及微信或qq浏览器

var ua = navigator.userAgent.toLowerCase(),
        iphoneos = (ua.match(/iphone os/i) == "iphone os") || (ua.match(/iph os/i) == "iph os") || (ua.match(/ipad/i) == "ipad"),  // ios系统手机
        android = (ua.match(/android/i) == "android") || (ua.match(/adr/i) == "adr") || (ua.match(/android/i) == "mi pad");  // 安卓系统手机

  // 微信或qq浏览器
var isUnabledInstall =
    /MicroMessenger/gi.test(navigator.userAgent.toLowerCase()) ||
    /QQ\/\d/gi.test(navigator.userAgent.toLowerCase())