一、设置
加载的几种方式
- 使用vant UI库的Toast（轻提示）
文档地址：https://youzan.github.io/vant/#/zh-CN/toast
1、直接在组件中导入使用
<script>
import { Toast } from 'vant';
</script>
- 调用方式例如：
Toast.loading({
mask: true,
message: '加载中...'
});
2、在main.js文件中引入，会自动在 Vue 的 prototype 上挂载 $toast 方法，在组件内通过this调用。
//导入vants ui
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
- 或者只是在main.js文件中单独引入Toast模块
import { Toast } from 'vant';
import 'vant/lib/index.css';
Vue.use( Toast );
- 调用方式例如：
this.$toast('提示文案');
3、将Toast封装后便于使用
（1）新建文件夹untils，然后在untils文件夹下新建index.js文件
（2）在index.js文件中导入Toast模块，并使用
import Vue from 'vue'
//导入有赞轻提示
import { Toast } from 'vant';
import 'vant/lib/index.css';
Vue.use(Toast);
（3）导出
export const loading = () => {
Toast.loading({
// mask: true, //蒙层
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
loadingType: 'spinner',
message: '加载中...'
});
}
（4）在main.js中通过解构导入，并在Vue的原型上添加属性，在组件内通过this调用
//导入封装后的轻提示
import { loading, clear } from './untils/index'
Vue.prototype.$loading = loading
- 调用方式例如：
//获取数据前加载loading
this.$loading();
二、移动端适配方案
1、了解响应式布局
（1）通过媒体查询：
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。（即根据设备的不同宽度为同一页面设置不同的css样式）
（2）写两套代码，一套PC端，一套移动端，通过判断用户使用的设备，跳转到相应的网站
2、移动端的适配（rem）
-
（1）元素的度量单位
-
：像素
-
：根据父元素来计算大小
-
：根据根节点（html）元素的font-size进行计算大小
-
：根据手机屏幕计算大小
-
：小程序特有单位
-
-
（2）
- 元素的宽度（高度） = html 的font-size * rem*
-
（3）使用
- 第一步：以iPhone 6的宽度（375px）作为参考，给它的根元素节点设置font-size大小
- 第二步：获取手机屏幕宽度，根据屏幕宽度，以iPhone 6 作为参照物进行等比缩放
3、在项目中配置
-
（1）安装 amfe-flexible ，用来根据手机宽度，自动设置根元素字体的大小
- 第一步：安装
npm i amfe-flexible --save
- 第二步：在main.js中导入
import 'amfe-flexible';
-
（2）安装 postcss-pxtorem，px自动转成rem，免去手动输入rem
- 第一步：安装
npm i postcss-pxtorem --save
- 第二步：在vue.config.js中配置
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5,
propList: ['*'],
// 该项仅在使用 Circle 组件时需要
// 原因参见 https://github.com/youzan/vant/issues/1948
selectorBlackList: ['van-circle__layer']
})
]
}
}
}
};
-
（3）css的处理
- （3.1）
、
、
都是预处理语言，方便我们模块化编写代码,必须编译成css文件才能使用
- （3.2）
用来对css文件进行处理,称之为后处理语言，而我们可以使用postcss中的一个模块pxtorem，便于我们写完样式后自动转换成rem
- （3.1）
