插件
H5移动端控制台调试-- npm install vconsole
安装插件可适配移动端-- npm i lib-flexible -- save-dev
安装插件可适配PC px2rem loader-- npm install px2rem-loader --save-dev
1.在main.js中引入 lib-flexibl
2.配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：
3.同时，在generateLoaders方法中添加px2remLoader
4.ios--通过媒体查询样式适配
/*iPhone X 适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.fixed-bottom{
bottom: 37px;
}
}
/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
.fixed-bottom{
bottom: 37px;
}
}
/*iPhone XR max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
.fixed-bottom{
bottom: 37px;
}
}5.ios--通过css样式适配，
如何适配：通过meta标签设置网页在可视窗口的布局方式新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
<meta name="viewport" content="width=device-width, viewport-fit=cover">
你需要哪里去兼容iphone x 的底部刘海屏就在那个页面写这两行代码就可以了
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
另外在你的父元素设置高度也可以实现
max-height: calc(100vh - 41px);
设置最大高度 100vh就是你视口的高度，通过calc属性-去你底部导航栏的高度6.移动端使用van-tabbar实现一个底部tab栏点击高亮
<template>
<van-tabbar
v-model="active"
@change="changeTab"
safe-area-inset-bottom
>
<van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index">
<span>{
{ item.title }}</span>
<img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
</van-tabbar-item>
</van-tabbar>
</template>
<script>
export default {
data() {
return {
active: 0,
tabbarList: [
{
// title: "首页",
normal: require("../../src/assets/menu/home_icon.png"),
// normal:"http://sucai.suoluomei.cn/sucai_zs/images/20200810093544-20180626194653.png",
// active:"http://sucai.suoluomei.cn/sucai_zs/images/20200808142214-20.png"
active: require("../../src/assets/menu/active-home.png")
},
{
// title: "禾粉圈",
// normal:"http://sucai.suoluomei.cn/sucai_zs/images/20200810093806-20180626194643.png",
// active:"http://sucai.suoluomei.cn/sucai_zs/images/20200810093651-20180626191313.png"
normal:require("../../src/assets/menu/supportn_icon.png"),
active:require("../../src/assets/menu/active-supportn.png")
},
{
// title: "列表",
// normal:"http://sucai.suoluomei.cn/sucai_zs/images/20200810093806-20180626194643.png",
// active:"http://sucai.suoluomei.cn/sucai_zs/images/20200810093651-20180626191313.png"
normal:require("../../src/assets/menu/shop_icon.png"),
active:require("../../src/assets/menu/active-shop.png")
},
{
// title: "我的",
// normal:"http://sucai.suoluomei.cn/sucai_zs/images/20200808112146-1.png",
// active:"http://sucai.suoluomei.cn/sucai_zs/images/20200810093931-20180627092356.png"
normal:require("../../src/assets/menu/profile_icon.png"),
active:require("../../src/assets/menu/activeprofile_icon.png")
}
]
};
},
mounted() {
this.watchTab();
},
methods: {
changeTab(e) {
switch (e) {
case 0:
// MtaH5.clickStat("heyi");
// window.location.replace("homepage");
this.$router.push("homepage");
break;
case 1:
// MtaH5.clickStat("hequan");
// window.location.replace("product");
this.$router.push("product");
break;
case 2:
this.$router.push("deliver");
break;
case 3:
this.$router.push("customerprofile");
break;
}
},
// 获取当前连接
watchTab() {
var url = this.$route.path;
console.log("a", url);
if (url.indexOf("homepage") != -1) {
this.active = 0;
} else if (url.indexOf("product") != -1) {
this.active = 1;
} else if (url.indexOf("deliver") != -1) {
this.active = 2;
} else if (url.indexOf("customerprofile") != -1) {
this.active = 3;
}
else {
this.active = -1;
}
}
}
};
</script>
<style lang="less" scoped>
.van-tabbar-item__icon img {
width: unset !important;
}
</style>