Vue 引用阿里小标 移动端rem布局 vtouch使用,移动端rem布局原理

阿里小图标

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"); },},