Vue框架 MIinUI 配置

最新推荐文章于 2024-09-13 22:05:45 发布

Amanda&Rachel

最新推荐文章于 2024-09-13 22:05:45 发布

阅读量611

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/m0_51907938/article/details/116131102

版权

本文详细介绍了在一个Vue项目中如何使用MintUI和mui进行页面构建，包括Header和Tabbar的制作、轮播图、九宫格到六宫格的改造、组件切换动画、路由配置、新闻资讯页面、评论功能、图片分享、商品列表和详情页。还涵盖了滑动条初始化、懒加载、购物车动画以及商品数量的传递和Vuex在购物车中的应用。

摘要由CSDN通过智能技术生成

Vue项目
首先下载必要的依赖 npm i -S

一、制作首页hadder和tabbar

完成Header区域，使用的的是mint-ui中的Header组件
制作底部的Tabbar区域，使用的是mui中的Tabbar.html

在制作购物车小图标的时候，先把扩展图标的css样式，拷贝到项目中
再拷贝我们的字体库ttf文件到项目中
为购物车小图标添加图像样式
要在中间区域放置一个router-view来展示路由匹配的组件
切换页面（改造tabbar为router-link）：

顶部的固定样式及返回按钮

 <mt-header fixed title="jdApp商城">
        <span slot="left" v-show="flag" @click="goBack">
            <mt-button icon="back">返回</mt-button>
        </span>
    </mt-header>

要在中间区域放置一个router-view来展示路由匹配的组件
切换页面（改造tabbar为router-link）：
设置过渡效果

 <transition>
    <router-view></router-view>
    </transition>

 <!-- 底部tabBar区域 -->
    <nav class="mui-bar mui-bar-tab" v-show="flag1">
      <router-link class="mui-tab-item-my" to="/home">
          <span class="mui-icon mui-icon-home"></span>
          <span class="mui-tab-label">首页</span>
      </router-link>

      <router-link class="mui-tab-item-my" to="/member">
          <span class="mui-icon mui-icon-contact"></span>
          <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item-my" to="/shopCar">
          <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
          <span class="mui-tab-label">购物车</span>
      </router-link>

      <router-link class="mui-tab-item-my" to="/search">
          <span class="mui-icon mui-icon-search"></span>
          <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>

对应的JavaScript代码设置返回按钮和底部显示按钮的位置

export default {
   
  name:'App',
  data(){
   
      return{
   
          flag:false,
          flag1:true
      }
  },
  created(){
   
      this.flag=this.$route.path==="/home" ?false:true;
      this.flag1=this.$route.path==="/home"?true:false;
  },
  methods:{
   
      goBack(){
   
          this.$router.go(-1);
      }
  },
  watch:{
   
      "$route.path":function(val){
   
          switch(val){
   
                case "/home":
                case "/member":
                case "/shopCar":
                case "/search":
                    this.flag=false;
                    this.flag1=true;
                    break;
                default:
                    this.flag=true;
                    this.flag1=false;
          }
      }
  }
}

css样式

<style lang="scss">
  .app-container {
   
        padding-top: 40px;
        padding-bottom: 50px;
        overflow-x: hidden;
    }

    .mint-header{
   
        position: fixed;
        z-index: 999;
        width: 100%;
        top: 0;
    }

    .v-enter {
   
        opacity: 0;
        transform: translateX(100%);
    }

    .v-leave-to {
   
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
    }

    .v-enter-active, .v-leave-active {
   
        transition: all 1s;
    }

    /*改类名, 解决和js冲突的问题*/
    .mui-bar-tab .mui-tab-item-my {
   
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
    }

    .mui-bar-tab .mui-tab-item-my .mui-icon {
   
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .mui-bar-tab .mui-tab-item-my .mui-icon ~ .mui-tab-label {
   
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mui-bar-tab .mui-tab-item-my.mui-active {
   
        color: #007aff;
    }
</style>

首页

二、制作轮播图

获取数据使用vue-resource

在main.js中导入vue-rosource

在main.js中配置请求路径
Vue.http.options.root = ‘http://www.liulongbin.top:3005’

在script中methods中定义方法，获取数据

渲染页面使用v-for循环，在组件中使用v-for时，要使用:key
三、九宫格到六宫格改造工程

使用mui中的组件，将九宫格改造为六宫格
图标可引入自己的图标，修改样式就ok
四、组件切换时的动画效果

用transition将中间内容包起来

<transition>
	  <router-view></router-view>
</transition>

设置类

问题：

Header栏向右偏移
底部也会偏移，并且出现滚动条
要进入的元素先向左然后向上飘
解决：

出现滚动条的原因：因为在切换页面的时候，他的真正宽度是两个页面拼接起来的宽度

给外层container添加一个overflow-x: hidden
.app-container {
padding-top:40px;
padding-bottom: 50px;
overflow-x: hidden;
}

解决底部滚动条问题
.v-enter {
opacity: 0;
transform: translateX(100%);
}

  .v-leave-to {
	  opacity: 0;
	  transform: translateX(-100%);
  }

  .v-enter-active,
  .v-leave-active {
	  transition: all 0.5s ease;
  }

解决元素飘动问题，给.v-leave-to动画加一个定位
.v-enter {
opacity: 0;
transform: translateX(100%);
}

  .v-leave-to {
	  opacity: 0;
	  transform: translateX(-100%);
	  position: absolute;
  }

  .v-enter-active,
  .v-leave-active {
	  transition: all 0.5s ease;
  }

<template>
    <div class="">
        <Swipe :bannerArr="bannerArr"></Swipe>

        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newList">
                    <img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photoList">
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodsList">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../images/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div></a></li>
        </ul>
    </div>
</template>

<script>
// import {getBanner} from "./../../api/home"
import Swipe from "./../../view/Swipe";
export default{
   
    data(){
   
        return{
   
            bannerArr:[],
            listImg:[
                {
   
                    name:"newList",
                    img:"../../images/menu1.png",
                    title:"新闻资讯"
                },
                {
   
                    name:"photoList",
                    img:"../../images/menu2.png",
                    title:"图片分享"
                },
                {
   
                    name:"goodsList",
                    img:"../../images/menu3.png",
                    title:"商品购买"
                },
                {
   
                    name:"message",
                    img:"../../images/menu4.png",
                    title:"留言反馈"
                },
                {
   
                    name:"video",
                    img:"../../images/menu5.png"
                },
                {
   
                    name:"CallMe",
                    img:"../../images/menu6.png",
                    title:"联系我们"
                }
            ]
        }
    },
    created(){
   
        this.banner()
    },
    methods:{
   
        banner(){
   
            console.log(<