1、父传子,实现自定义每页主题
2、在使用vant中的indexBar
3、接口获值,按需遍历,模糊查询
4、返回按钮,数据传递
5、轮播图的实现
(一)第一步
(二)首页轮播图布局
<!-- 分类入口 -->
<div class="foodType">
<ul class="flex foodType_main">
<li class="foodType_item" >
<img src="" alt="">
<span class="f_title">
美食
</span>
</li>
</ul>
</div>
<style>
.foodType{ /* 轮播开始*/
height:5.866666rem;//220
.foodType_main{
flex-wrap:wrap;
}
.foodType_item{
width:20%;
margin-top:0.533333rem;//20
color:#666;
text-align:center;
span{
color:#666;
}
img{
display:block;
width:1.333333rem;//50
height:1.333333rem;
margin:0.053333rem auto;//2
}
}
// .mint-swipe-indicators{
// .is-active{
// background-color:red;
// }
// }
} /* 轮播结束*/
</style>
(三)图片处理
// 格式化图片地址
function formatImgSrc(hash,size,auto){
/*
7e76a23eb90dada42528bc41499d6f8jpeg
/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg
*/
if(!hash)return '';
hash = hash.replace(/^(.{1})(.{2})(.+(jpeg|png))$/g,'$1/$2/$3.$4');
size = size || 90;
size = auto?size:size+'x'+size;
return auto?`//fuss10.elemecdn.com/${hash}?imageMogr/format/webp/thumbnail/${size}x/`:`//fuss10.elemecdn.com/${hash}?imageMogr/format/webp/thumbnail/!${size}r/gravity/Center/crop/${size}/`;
}
export default formatImgSrc;
全局挂载formatImgSrc
app.config.globalProperties.$formatImgSrc = formatImgSrc
6、自定义吸附指令
//自定义吸附指令
const vFixed = {
mounted(el,binding){
//1、获取元素距离顶部的高度
var
_el = el,
dt = 0,
st = 0,
arg=binding.arg || 0,
tVal=arg/37.5 +'rem',
bool,_bool;
var
dHtml = document.documentElement,
dBody = document.body;
var css = {
position :'fixed',
left:'0',
top:tVal,
width:'100%'
}
//设置占位符
var dP = document.createElement('p');
dP.style.height = el.offsetHeight/37.5+'rem'
dP.style.display='none'
el.after(dP)
do{
//元素相对定位父级的距离
dt += _el.offsetTop;
_el = _el.offsetParent
}while(_el)
//2、获取滚动条高度
//给window body HTML添加scroll事件
window.addEventListener('scroll',scrollFn,false)
dHtml.addEventListener('scroll',scrollFn,false)
dBody.addEventListener('scroll',scrollFn,false)
function scrollFn(){
//拿到滚动的高度
st = dHtml.scrollTop || dBody.scrollTop;
bool = st>=dt-arg;//滚动的高度大于 父级相对距离
if(_bool !== bool){//滚动条的状态
// console.log(bool?'高度够了':'高度不够了')
for(var k in css){
if(bool){
el.style[k] = css[k]
dP.style.display='block'
}else{
//清除原本样式
el.style[k] = ''
dP.style.display='none'
}
}
_bool = bool;
}
}
}
}
export default vFixed;
7、首页商户
7.1数据传递 接口接收
7.2数据使用 距离计算
7.3点击切换状态
7.4点击跳转页面 使用组合式API
传:
$router.push({
path:'/detail/menu',
query:{
id:items.id
}
})
接:
this.$route.query.id
7.5详情页vant弹出框的使用
注意:引入弹出框的同时引入遮罩层
8、解决数据丢失
访问的路径没有id 会导致数据丢失
8.1使用localStorage本地存储
// 存储
localStorage.setItem("lastname", "Smith");
8.2简单方法:拼接id
9、详情页
10、详情菜单内容的高度获取
11、详情页滚动、点击切换分类效果
11.1设置选中样式
11.2设置点击左侧,右侧到指点点
11.3右侧滚动左边做出响应
代码见:Menu.vue、menuModel.js
12、加入购物车点击按钮的封装
13、加购商品【使用vuex】
13.1分析
13.2实现
14、加减 数据处理
15、设置动画效果
16、显示隐藏
17、使用vuex实现清空
18、首页角标显示
18.1实现
19、详情页角标显示分析
记录分类所需要得数据
//分类状态
cateGory:{
<!-- 商家id -->
162958680:{
<!-- 根据分类id记录分类的数量 -->
-1:4,
-2:3,
54028672127:5,
}
}
19.1传入商品和分类id
19.2定义分类的状态
19.3加购商品
//添加分类数量
addCategory(state,item){
// console.log(item);
//获取分类的状态
var cState = state.cateGory;
var {resId,cid} = item
var res = cState[resId]
if(!cid)retrun;
//判断商家或者分类是否存在
if(resId in cState){
//判断类别是否存在
if(cid in res){
res[cid]++;//分类数量++
}else{
res[cid]=1;
}
}else{
//添加新的分类
cState[resId] = {
[cid]:1
}
}
},
19.4减少物品
subCategory(state,item){
var cState = state.cateGory;//分类状态
var {resId,cid} = item;//商家id 分类id
var res = cState[resId];//商家的分类信息
if(!cid)return;
res[cid]--;
//删除类别
if(res[cid]<=0){
delete res[cid];
}
//删除商家
if(!state.foodState[resId] || state.foodState[resId].count_all<=0){
delete cState[resId];
}
console.log(cState);
},
20、清空购物车
//清空商家数据
clearCart(state,resId){
//清空购物车的信息
delete state.foodState[resId]
//清空分类的数据
delete state.cateGory[resId]
}