Vue 引用阿里小圖標 移動端rem佈局 v-touch使用

阿里小圖標

1.建立font文件夾，將阿里小圖標下載放入此

2.main.js中引入

import './assets/font/iconfont.css'複製代碼

3.直接使用便可

<i class="iconfont icon-fanhui"></i>複製代碼

移動端rem佈局

1.建立rem.js

2.rem.js內容

! function(n) {
  var e = n.document,
    t = e.documentElement,
    i = 720,
    d = i / 100,
    o = "orientationchange" in n ? "orientationchange" : "resize",
    a = function() {
      var n = t.clientWidth || 320;
      n > 720 && (n = 720);
      t.style.fontSize = n / d + "px"
    };
  e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))

}(window);
複製代碼

3.main.js中引入

import './rem'複製代碼

4.直接使用

.header {
  width: 100%;
  height: .6rem;
  display: flex;
}複製代碼

v-touch 移動端划動事件

1.安裝 vue-touch

 npm install vue-touch@next --save

2. main.js中引入

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})複製代碼

3.用v-touch標籤包裹

swiperleft左劃事件，swiperright右劃事件

<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<div>
須要划動的板塊
</div>
</v-touch>複製代碼

4.調用事件

methods: {
  swiperleft(){
        elert("hello");
  },
},複製代碼