移动端适配与底部导航条

移动端适配与底部导航条

移动端适配

1.安装amfe-flexible和postcss-pxtorem，

npm install amfe-flexible --save
npm install postcss-pxtorem@5.1.1 (这里我使用的postcss-pxtorem是5.1.1版本)

2.导入
在main.js导入amfe-flexible

import 'amfe-flexible';

3.配置
在vue.config.js中写入

css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({ // 把px单位换算成rem单位
              rootValue: 37.5, // vant官方使用的是37.5
              selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
              propList: ['*']
            })
          ]
        }
      }
    }
  }

在postcss.config.js中写入（没有文件就新建）

  module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

组件中使用

.appShipei{
  font-size: 24px;
  text-align: center;
  line-height: 24px;
  margin-top: 30px;
}

然后转化后看到的就是

.appShipei[data-v-6d720fe5] {
    font-size: 0.64rem;
    text-align: center;
    line-height: 0.64rem;
    margin-top: 0.8rem;
}

底部导航条

1.建立好文件，我这里是四个导航菜单

2.顶部headerTop.vue

<template>
  <div class="nav_bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>
<script>
export default { name: "headerTop", };
</script>
<style lang="less" scoped>
.home-nav{
  display: flex;
  height: 44px;
  line-height: 44px;
  text-align: center;
  box-shadow: 0 1px 1px rgba(100,100,100,.1);
}
.left{  width: 60px; }
.center{ flex: 1; }
.right{ width: 60px; }
</style>

3.底部tabbar.vue

<template>
  <div>
    <div id="tab-bar">
      <div class="tab-bar-item" @click="homeClick()">
        <img v-if="!ishome" src="../../assets/tabBar/Home.png" alt="" />
        <img v-else src="../../assets/tabBar/HomeActived.png" alt="" />
        <div :class="{ active: ishome }">首页</div>
      </div>
      <div class="tab-bar-item" @click="searchClick()">
        <img v-if="!isSearch" src="../../assets/tabBar/Search.png" alt="" />
        <img v-else src="../../assets/tabBar/SearchActived.png" alt="" />
        <div :class="{ active: isSearch }">搜索</div>
      </div>
      <div class="tab-bar-item" @click="shoppingMallClick()">
        <img v-if="!isShoppingmall" src="../../assets/tabBar/Shoppingmall.png" alt="" />
        <img v-else src="../../assets/tabBar/ShoppingmallActived.png" alt="" />
        <div :class="{ active: isShoppingmall }">商城</div>
      </div>
      <div class="tab-bar-item" @click="mineClick()">
        <img v-if="!isMine" src="../../assets/tabBar/Mine.png" alt="" />
        <img v-else src="../../assets/tabBar/MineActived.png" alt="" />
        <div :class="{ active: isMine }">我的</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed:{
    isSearch(){ return this.$route.path=="/Search" },
    ishome(){ return this.$route.path==("/") },
    isShoppingmall(){  return this.$route.path==("/ShoppingMall") },
    isMine(){ return this.$route.path==("/Mine") }
  },
  methods: {
    searchClick() { if (this.$route.path !== "/Search") { this.$router.replace("/Search"); } },
    homeClick() { if (this.$route.path !== "/") { this.$router.replace("/"); } },
    mineClick() { if (this.$route.path !== "/Mine") { this.$router.replace("/Mine"); } },
    shoppingMallClick() { 
    if (this.$route.path !== "/ShoppingMall") { this.$router.replace("/ShoppingMall"); } 
    },
  },
};
</script>
<style lang="scss" scoped>
#tab-bar {
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px -1px 1px rgba(100, 100, 100, 0.2);
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 14px;
}
.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.active { color: rgb(243, 74, 102); }
</style>

4.需要的页面中注入组件

<template>
  <div>
    <header-top class="home-nav">
      <div slot="center">我的</div>
    </header-top>
    <Tabbar />
  </div>
</template>
<script>
import Tabbar from "../../components/tabbar/tabbar.vue";
import HeaderTop from "../../components/headerTop/headerTop.vue";
export default {
  components: { Tabbar,  HeaderTop },
};
</script>
<style lang="less" scoped>
.home-nav{ background-color: #F6F6F6; }
</style>

5.路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  { path: '/',
    name: 'Home',
    component: () => import('../views/Home/Home.vue')
  },
  { path: '/mine',
    name: 'Mine',
    component: () => import('../views/Mine/Mine.vue')
  },
  { path: '/search',
    name: 'Search',
    component: () => import('../views/Search/Search.vue')
  },
  { path: '/shoppingMall',
    name: 'ShoppingMall',
    component: () => import('../views/ShoppingMall/ShoppingMall.vue')
  }
]
const router = new VueRouter({  routes })
export default router

到这里就结束啦
效果：