1 轮播菜单
1.1 轮播图
里边有执行步骤，还有一些案例， 根据案例进行编写代码。
缺少的东西参考API文档进行添加： 例如添加动画
1 版本使用的是 "vue-awesome-swiper": "^3.1.3",
2 下载依赖：cnpm install vue-awesome-swiper@3.1.3 --save-dev
下载了这个就不要再有swiper
3 报错“vue中使用swiper报错_vue-awesome-swiper报错_不是程序猿y的博客-CSDN博客
4 报错2： [Vue warn]: Error in render: "TypeError: Cannot set properties of undefined (setting 'params')"
版本不同，他引入的大小写也不同， 其他版本引入的Swiper,SwiperSlide。 一定要看官网对应的写法. 例子不一定是该版本的！！！！注意
<swiper v-bind:options="swiperOption">
<swiper-slide>
<img src="https://img2.baidu.com/it/u=2064684749,2471246240&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=282" alt="" />
</swiper-slide>
<swiper-slide>
<img src="https://trademark.zbjimg.com/pattern-prod/2017/image_63/27507795.jpg" alt="" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'my-index',
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
autoplay: true,
loop: true,
effect: 'cube',
cubeEffect: {
shadowOffset: 100,
shadowScale: 0.6
},
pagination: {
el: '.swiper-pagination'
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
}
}
</script>5 设置swiper的大小
通过 .swiper-container 来控制轮播图里边的东西
.swiper-item {
width: 1226px;
height: 451px;
margin: 0 auto;
.swiper-container {
height: 451px;
.swiper-button-prev {
left: 274px;
}
img {
width: 100%;
height: 100%;
}
}
}6 图片放在public目录下
slideList: [
{
id: '42',
img: '/imgs/slider/slide-1.jpg'
}
}这样可以取到地址
1.2 菜单
ul >li > a 整个区域可以点击，a是一个块元素
箭头图标： 绝对定位到该位置 （父元素是a）
问题：
1.3 控制swiper的左右箭头位置
.swiper-container {
height: 451px;
.swiper-button-prev{
left:274px;
}
img{
width:100%;
height:100%;
}
} 1.4 二级菜单
1 用了一个二维数据， 四行四列：
menuList:[
[
{
id:30,
img:'/imgs/item-box-1.png',
name:'小米CC9',
},{
id:31,
img:'/imgs/item-box-2.png',
name:'小米8青春版',
},{
id:32,
img:'/imgs/item-box-3.jpg',
name:'Redmi K20 Pro',
},{
id:33,
img:'/imgs/item-box-4.jpg',
name:'移动4G专区',
}
],
[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]
],2 渲染
判断有没有图片，没有显示默认图片
判断有没有文字，没有显示默认文字
判断有没有id, ===》 地址拼接
<div class="children">
<ul v-for="(item,i) in menuList" v-bind:key="i">
<li v-for="(sub,j) in item" v-bind:key="j">
<a v-bind:href="sub?'/#/product/'+sub.id:''">
<img v-bind:src="sub?sub.img:'/imgs/item-box-1.png'" alt="">
{{sub?sub.name:'小米9'}}
</a>
</li>
</ul>
</div>3 样式：
3.1 使用flex进行挨着布局
多行布局： align-content
单行布局： align-item
参考：css—flex布局_css flex布局_明月不是舒皮的博客-CSDN博客
3.2 给a添加 hover 点击a,弹出二级菜单，但是移入到二级菜单就不见了， a的范围小， 怎么解决？
给li 添加，因为二级菜单也再li里边
2 四个广告位
1数据：
adsList:[
{
id:33,
img:'/imgs/ads/ads-1.png'
},{
id:48,
img:'/imgs/ads/ads-2.jpg'
},{
id:45,
img:'/imgs/ads/ads-3.png'
},{
id:47,
img:'/imgs/ads/ads-4.jpg'
}
],2 渲染：
3 手机商品
1将list转成二维数组
数据前六条是给上边的导航栏使用，下边的8个是给这个列表使用，所以分割了数组
init () {
this.axios
.get('/products', {
params: {
categoryId: 100012,
pageSize: 14
}
})
.then(res => {
res.list = res.list.slice(6, 14)
this.phoneList = [res.list.slice(0, 4), res.list.slice(4, 8)]
})
},5 添加模态框
点击购物车图标，弹出模态框 展示添加成功
模态框：
多个页面都有，抽取组件时候都要参考
1 里边有遮罩层，遮罩层上边有一个提示框
2 提示框里边内容是变化的，使用插槽
3 button 有三种类型：1 确定按钮 2 取消按钮 3 确定，取消按钮
4 弹框类型，有大有小，用一个变量来控制
5 使用了动画效果
分析：
5.1固定定位 position: fixed， 可以在浏览器页面滚动时元素的位置不会改变。
5.2 点击 X 进行放大
X和查看详情可以用a
.icon-close {
position: absolute;
top: 23px;
right: 25px;
width: 14px;
height: 14px;
background: url('@/assets/imgs/icon-close.png') no-repeat center;
background-size: contain;
transition: transform 0.3s;
&:hover {
transform: scale(1.5);
}
}5.3封装组件：
1 提示框里边内容是变化的，使用插槽
2 button 有三种类型：1 确定按钮 2 取消按钮 3 确定，取消按钮
3 弹框类型，有大有小，用一个变量来控制
<template>
<transition name="slide">
<div class="modal" v-show="showModal">
<div class="mask"></div>
<div class="modal-dialog">
<div class="modal-header">
<span>{{title}}</span>
<a href="javascript:;" class="icon-close" v-on:click="$emit('cancel')"></a>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn" v-if="btnType==1" v-on:click="$emit('submit')">{{sureText}}</a>
<a href="javascript:;" class="btn" v-if="btnType==2" v-on:click="$emit('cancel')">{{cancelText}}</a>
<div class="btn-group" v-if="btnType==3">
<a href="javascript:;" class="btn" v-on:click="$emit('submit')">{{sureText}}</a>
<a href="javascript:;" class="btn btn-default" v-on:click="$emit('cancel')">{{cancelText}}</a>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default{
name:'modal',
props:{
// 弹框类型：小small、中middle、大large、表单form
modalType:{
type:String,
default:'form'
},
// 弹框标题
title:String,
// 按钮类型: 1:确定按钮 2：取消按钮 3：确定取消
btnType:String,
sureText:{
type:String,
default:'确定'
},
cancelText:{
type:String,
default:'取消'
},
showModal:Boolean
}
}
</script>
<style lang="scss">
@import './../assets/scss/config.scss';
@import './../assets/scss/mixin.scss';
@import './../assets/scss/modal.scss';
</style>
5 在首页使用模态框
点击添加购物车的图标，调用添加购物车接口，成功之后 弹窗弹框， （用一个变量showModal 来控制显示隐藏）
点击弹框的取消，确定，需要子传父 ，用自定义事件
addCart (id) {
this.axios
.post('/carts', {
productId: id,
selected: true
})
.then(res => {
this.showModal = true
this.$store.dispatch('saveCartCount', res.cartTotalQuantity)
})
},
goToCart(){
this.$router.push('/cart');
} <modal
title="提示"
sureText="查看购物车"
btnType="1"
modalType="middle"
v-bind:showModal="showModal"
v-on:submit="goToCart"
v-on:cancel="showModal = false"
>
<template v-slot:body>
<p>商品添加成功！</p>
</template>
</modal>
注意：
1 title="提示" title没有：
2<a v-if="btnType === '1'">{{ sureText }}</a>
<a v-if="btnType === 2">{{ cancelText }}</a>
传递过来的应该是一个字符串 所以用第一个
6 动画
进入： 从-100% 到 0
&.slide-enter{
top:-100%;
}
&.slide-enter-active{
top:0;
}
离开：
&.slide-leave-active{
top:-100%;
}注意 弹框是定位是： absolute ,不是fixed ， 否则没有效果
参考：vue 之 Transition && 各种动画实现，一文让你会动画_vue transition_玄鱼殇的博客-CSDN博客
7 图片懒加载
当我们滚动的时候，图片才进行相应的加载。避免首次加载一堆图片
一次性全部加载的话，如果部署到服务器，回特别耗带宽。需要我们对图片进行优化： 1可以对图片大小进行瘦身， 2 对图片进行懒加载
使用 vue-lazyload插件实现懒加载
1 安装插件
npm i vue-lazyload -S2 再main.js中 引入
3 使用
吧src 换成 v-lazy
<img v-lazy="'/imgs/mix-alpha.jpg'" alt=""> <img v-lazy="item.mainImage" alt="">报错：
vue.runtime.esm.js?c320:4573 [Vue warn]: Failed to resolve directive: lazy
别担心，是版本问题，你应该是默认安装的lazyload版本，和vue2版本不匹配造成的，
npm uninstall vue-lazyload
npm install vue-lazyload@1.3.3 --save-dev
2 图片要加【宽，高】，否则超出去了 ，样式就乱了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
