vue 项目移动端 ios 安卓 pc端适配 实现一个底部tab栏_uview van-tabbar-item ios

插件         

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>

vant-ui组件调用Dialog弹窗异步关闭_一键写代码的博客-CSDN博客需求描述：需求描述：官方文档又是组件调用方式，又是函数调用方式。我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。一个很简单的东西，element-ui用的很方便，在这里就懵比了，刚开始做的，弹窗关闭了，才返回异步接口调用的结果。网速慢点，用起来真的很不好。正确的解决方式一： <van-dialog v-model="showDialog" title="提示" show-cancehttps://blog.csdn.net/qq_42991509/article/details/106049422