前端开发中遇到的一些小问题记录（更新中）

1. 让iconfont图标旋转

想让iconfont图标旋转一定要将其设置为行内块元素

i.active::before {
	display: inline-block;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

2. 在methods的函数内阻止默认事件

传参时记得把$event传进去

<img v-lazy="require('@/assets/images/QR.png')"
                 alt=""
                 @touchstart="star($event)"
                 @touchend="end()">

star (event) {
      if (!this.isWeChat) {
        event.preventDefault()
        timeOutEvent = setTimeout(() => {
          this.longPressCopy()
        }, 1000);
      }
    },

3. swiper设置loop为true时部分卡片点击事件失效

原因： 项目中使用 swiper 时，设置 loop:true时，slides前后会clone若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件，导致复制的slides点击不会跳转。
解决思路： 不要将click事件绑定在dom上，而是在放在 swiper的on() 回调函数中调用。

this.initSwiper('.package-box', 'sw', {
  loop: true,
  slideToClickedSlide: true,//点击滑动
  loopedSlides: 7,
  slidesPerView: 'auto',
  normalizeSlideIndex: false,
  updateOnWindowResize: true,
  pagination: {
    el: '.swiper-pagination',
  },
  on: {
    click: (e) => {
      if (e.target.className == 'btn_consult') {
        this.showConsult = true
      }
    },
  },
})