实现效果
目的
实现购物车右上角购买个数的展示。
设计思路
需要采用百分比的定位方法，而非绝对定位方法
由于不同手机分辨率不同，采用绝对定位方法一定是会出错的。所以需要采用基于百分比的定位方法。
思路
- 首先右上角采用position的绝对定位；
- 要让右上角在购物车这个div中居中；
- 进行margin偏移到右上角。
关键代码：使用position以及relative的组合实现居中
- 购物车的div设置为position=relative
<div class="flex-1 flex-col relative">
</div>
- 右上角包含再购物车的div中，设置position=absolute
<div class="cartip">2</div>
.cartip {
position: absolute;
top: 50%;
left: 50%;
}
- 进行偏移
margin-top: -25px;
margin-left: 5px;
详细代码
注：代码是使用vue编写，其他部分不做过多解释，主要是实现角标效果。
<div v-for="(item, index) in navData" :key="index" class="flex-1 flex-col relative" @click="selectNav(index)" :class="[{ selected: index === currentNav }, { 'text-jpfont-800': index !== currentNav }]">
<div class="text-center leading-none">
<i style="margin-top:0.3125rem;" class="inline-block">
<svg-icon :icon-class="currentNav === item.id ? item.icon + '_p' : item.icon" class-name="fotterIcon" :class="[{ selected: index === currentNav }, { 'text-jpfont-800': index !== currentNav }]" />
</i>
</div>
<div style="font-size:9px;line-height: 8px;margin-top: 7px;" class="text-center leading-none">
{{ item.name }}
</div>
<div v-if="index === 2" class="cartip">2</div>
</div>
<script>
export default {
name: "NavFooter",
data() {
return {
currentNav: 0,
navData: [
{ id: 0, code: "home", icon: "home", name: "首页" },
{ id: 1, code: "category", icon: "category", name: "分类" },
{ id: 2, code: "cart", icon: "cart", name: "购物车" },
{ id: 3, code: "me", icon: "me", name: "我的" }
]
};
},
methods: {
selectNav(index) {
this.currentNav = index;
this.$router.push(this.navData[index].code);
}
}
};
</script>
.cartip {
background-color: #fd622c;
position: absolute;
color: #fff;
font-size: 9px;
width: 15px;
height: 15px;
text-align: center;
line-height: 15px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: 5px;
border-radius: 9999px;
}
