vue案例：商城类（一）

一.项目介绍

该项目是用vant框架搭建的前端页面，遇到了一些问题做一些总结。
1.vant按需加载的整合。
创建一个新文件index.js存放这些按需引入的代码

import { ContactCard, ContactList, ContactEdit } from 'vant';

Vue.use(ContactCard);
Vue.use(ContactList);
Vue.use(ContactEdit);

在main.js中进行引入 import “./js/index.js”

2.用swipe组件实现分类加载。
html，分为左边和右边，左边可以控制右边的滚动，右边可以控制左边的样式

<template>
    <div id="categray">
        <Header title="分类"></Header>
        <div class="box">
            <div class="left">//左边
                <ul>
                    <li v-for="(item, index) in selnav" :key="index"
                    	@click='sel(item.class,index)'
                        :class="selected==item.class?'navsel':''">
                    {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="right">//右边
                <div class='right-box '
					>
                    <div class='categray-box'>
                        <div class='categrayDetail-box'>
                        	<div class='img'>
							      <div class="i" style="background-image:url(./static/o7.jpg);background-size:100%;" ></div>
						    </div>
                            <div class='categray-title'><span>蛋糕</span></div>
                            <div class='list-box'>
                              <!--  <div v-for='item in selectedList' @click='goDetail(item)'>
                                    <img class="im" :src="item.img" ></img>
                                    <span>{{item.title}}</span>
                                </div>-->
                                <van-swipe  vertical class="swiper" ref="swiper" :style="'height:'+screeHeight" :loop="false"  @change="onChange" :show-indicators="false">
                                    <van-swipe-item class="x"  v-for="item in selnav" :key="item.id" >
                                    <div v-for='item in selectedList' :key="item.id">
                                       <img class="im" :src="item.img" ></img>
                                        <span>{{item.title}}</span> 
                                    </div>
                                    </van-swipe-item>
                                   
                                </van-swipe>             
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

js中主要有用的就是2个方法

export default {
  name:'Categray',
  components:{Header,TabBar},
  data(){
      return{
           screeHeight:window.screen.height-220+"px",//滑块的高度
            selected:'categray1',//选中的selnav对象中的样式
            index:"0",
            selnav:[//左边
                    {name:'玛芬蛋糕',class:'categray1'},
                    {name:'海绵蛋糕',class:'categray2'},
                    {name:'戚风蛋糕',class:'categray3'},
                    {name:'天使蛋糕',class:'categray4'},
                    {name:'重油蛋糕',class:'categray5'},
                    {name:'芝士蛋糕',class:'categray6'},
                    {name:'蒸蛋糕',class:'categray7'},
                    {name:'抹茶蛋糕',class:'categray8'},
                ],
            selectedList://右边选中的数组对象
                 [
                    {img:"./static/o7.jpg",title:"玛芬蛋糕 16寸"},
                    {img:"./static/o7.jpg",title:"玛芬蛋糕 18寸"}
                ]
            ,
            list:[//右边
                [
                    {img:"./static/o7.jpg",title:"玛芬蛋糕 16寸"},
                    {img:"./static/o7.jpg",title:"玛芬蛋糕 18寸"}
                ],
                
                 [
                    {img:"./static/o5.jpg",title:"海绵蛋糕 16寸"},
                    {img:"./static/o5.jpg",title:"海绵蛋糕 18寸"}
                ],
                 [
                    {img:"./static/o4.jpg",title:"戚风蛋糕 16寸"},
                    {img:"./static/o4.jpg",title:"戚风蛋糕 18寸"}
                ],
                 [
                    {img:"./static/o8.jpg",title:"天使蛋糕 16寸"},
                    {img:"./static/o8.jpg",title:"天使蛋糕 18寸"}
                ],
                 [
                    {img:"./static/o6.jpg",title:"重油蛋糕 16寸"},
                    {img:"./static/o6.jpg",title:"重油蛋糕 18寸"}
                ],
                 [
                    {img:"./static/o2.jpg",title:"芝士蛋糕 16寸"},
                    {img:"./static/o2.jpg",title:"芝士蛋糕 18寸"}
                ],
                 [
                    {img:"./static/o3.jpg",title:"蒸蛋糕 16寸"},
                    {img:"./static/o3.jpg",title:"蒸蛋糕 18寸"}
                ],
                 [
                    {img:"./static/o1.jpg",title:"抹茶蛋糕 16寸"},
                    {img:"./static/o1.jpg",title:"抹茶蛋糕 18寸"}
                ]


            ]

            
      }
  },
  	methods:{
		sel(item,index){//左边点击事件，参数当前对象的样式，索引
			this.selected=item;//样式
            this.selectedList=this.list[index];//右边显示的数据
            this.index=index;//索引
            this.$refs.swiper.swipeTo(this.index)//切换到索引所指的页面
           
		},
         onChange(index) {
             this.index=index;//索引
            this.selected=this.selnav[index].class;//左边当前样式
             this.selectedList=this.list[index]//右边的数据
        }
	}
}

cssy样式，重要部分

#categray{
    .box{
        position:fixed;//固定布局
        .w(375);
        .top(45);
		.bottom(50);
        display:flex;
        
         .left{//左边
             .w(75);
              height:100%;
              border-right:1px solid #D8d8D8;
              box-sizing: border; 
             .fs(14);
             li{
                .w(75);
          		.h(40);
          		.lh(40);
                text-align:center;
          		box-sizing:border;
          		border-left:2px solid #fff; 
             }
             	.navsel{//选中样式
          		border-left:2px solid #b71c1c;
          		color:#ef5350; 
          	}

         }
         .right{//右边
             .w(300);
             height:100%;
                   .categray-box{            
                     height:100%;
                     .categrayDetail-box{
                        height: 100%;         
                        .fs(16);
                        .w(270); 
                        margin:0px auto;
                        .img{
                            width: 100%;
                            .h(80);
                            .i{
                                .h(80);
                                width: 100%;
                            }
				    	}
                        .categray-title{//文字中间
                            .h(35);
                            .lh(35);
                            color:#b71c1c;
                            text-align: center;
				    	}
                        .categray-title span::before,.categray-title span::after{//两条线
                            content:'';
                            display: inline-block;
                            .w(35);
                            .h(1);
                            position: relative;
                            .top(-6);
                            margin:0px 15px;
                            background:#979797;
					    }
                        	.list-box{                           
                                width: 100%;                                 
                                }
                                .swiper{//滑块的宽度
                                    .w(270); 
                                }
                                 .van-swipe-item{//每个滑块的样式
                                        display: flex;
                                        flex-wrap:wrap;
                                        align-content: flex-start; 
                                    div{//每项的样式
                                        .w(90);
                                        .h(110);
                                        .p_b(10);
                                        
                                        display: flex;
                                        flex-direction:column;
                                        align-items: center;
                                        .im{
                                            .w(65);
                                            background-size:100%;
                                        }
                                        span{
                                            .fs(14);
                                            text-align: center;
                                        }
                                    }
                                }
                         
                     }
                 }
             
             
    }
     
    }
    
}