一、設(shè)置
加載的幾種方式
- 使用vant UI庫(kù)的Toast（輕提示）
文檔地址：https://youzan.github.io/vant/#/zh-CN/toast
1、直接在組件中導(dǎo)入使用
<script>
import { Toast } from 'vant';
</script>
- 調(diào)用方式例如：
Toast.loading({
mask: true,
message: '加載中...'
});
2、在main.js文件中引入，會(huì)自動(dòng)在 Vue 的 prototype 上掛載 $toast 方法，在組件內(nèi)通過(guò)this調(diào)用。
//導(dǎo)入vants ui
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
- 或者只是在main.js文件中單獨(dú)引入Toast模塊
import { Toast } from 'vant';
import 'vant/lib/index.css';
Vue.use( Toast );
- 調(diào)用方式例如：
this.$toast('提示文案');
3、將Toast封裝后便于使用
（1）新建文件夾untils，然后在untils文件夾下新建index.js文件
（2）在index.js文件中導(dǎo)入Toast模塊，并使用
import Vue from 'vue'
//導(dǎo)入有贊輕提示
import { Toast } from 'vant';
import 'vant/lib/index.css';
Vue.use(Toast);
（3）導(dǎo)出
export const loading = () => {
Toast.loading({
// mask: true, //蒙層
duration: 0, // 持續(xù)展示 toast
forbidClick: true, // 禁用背景點(diǎn)擊
loadingType: 'spinner',
message: '加載中...'
});
}
（4）在main.js中通過(guò)解構(gòu)導(dǎo)入，并在Vue的原型上添加屬性，在組件內(nèi)通過(guò)this調(diào)用
//導(dǎo)入封裝后的輕提示
import { loading, clear } from './untils/index'
Vue.prototype.$loading = loading
- 調(diào)用方式例如：
//獲取數(shù)據(jù)前加載loading
this.$loading();
二、移動(dòng)端適配方案
1、了解響應(yīng)式布局
（1）通過(guò)媒體查詢(xún)：
? ?? ?媒體查詢(xún)可以讓我們根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式。（即根據(jù)設(shè)備的不同寬度為同一頁(yè)面設(shè)置不同的css樣式）
（2）寫(xiě)兩套代碼，一套PC端，一套移動(dòng)端，通過(guò)判斷用戶(hù)使用的設(shè)備，跳轉(zhuǎn)到相應(yīng)的網(wǎng)站
2、移動(dòng)端的適配（rem）
-
（1）元素的度量單位
-
：像素
-
：根據(jù)父元素來(lái)計(jì)算大小
-
：根據(jù)根節(jié)點(diǎn)（html）元素的font-size進(jìn)行計(jì)算大小
-
：根據(jù)手機(jī)屏幕計(jì)算大小
-
：小程序特有單位
-
-
（2）
- 元素的寬度（高度） = html 的font-size * rem*
-
（3）使用
- 第一步：以iPhone 6的寬度（375px）作為參考，給它的根元素節(jié)點(diǎn)設(shè)置font-size大小
- 第二步：獲取手機(jī)屏幕寬度，根據(jù)屏幕寬度，以iPhone 6 作為參照物進(jìn)行等比縮放
3、在項(xiàng)目中配置
-
（1）安裝 amfe-flexible ，用來(lái)根據(jù)手機(jī)寬度，自動(dòng)設(shè)置根元素字體的大小
- 第一步：安裝
npm i amfe-flexible --save
- 第二步：在main.js中導(dǎo)入
import 'amfe-flexible';
-
（2）安裝 postcss-pxtorem，px自動(dòng)轉(zhuǎn)成rem，免去手動(dòng)輸入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: ['*'],
// 該項(xiàng)僅在使用 Circle 組件時(shí)需要
// 原因參見(jiàn) https://github.com/youzan/vant/issues/1948
selectorBlackList: ['van-circle__layer']
})
]
}
}
}
};
-
（3）css的處理
- （3.1）
、
、
都是預(yù)處理語(yǔ)言，方便我們模塊化編寫(xiě)代碼,必須編譯成css文件才能使用
- （3.2）
用來(lái)對(duì)css文件進(jìn)行處理,稱(chēng)之為后處理語(yǔ)言，而我們可以使用postcss中的一個(gè)模塊pxtorem，便于我們寫(xiě)完樣式后自動(dòng)轉(zhuǎn)換成rem
- （3.1）
