vue3前端开发-小兔鲜项目-热门品牌推荐栏目!这一期内容,大家一定要认真的看完。因为,黑马官方教程视频里面老师没有讲这个,但是内容其实不难。只是按照之前的流程操作就行了。我把自己写好的代码分享给大家。做个参考demo。
第一步:写好模板文件,HomeBran.vue的基础内容。
<script setup>
import HomePanel from './HomePanel.vue'
import {ref,onMounted} from 'vue'
import {findBrandAPI} from '@/apis/home'
const brandList = ref([])
const getBrandList = async () => {
const res = await findBrandAPI()
brandList.value = res.result
}
onMounted(()=>getBrandList())
</script>
<template>
<!--热门品牌栏目-->
<HomePanel title="热门品牌" sub-title="大厂质量 值得信赖">
<ul class="brands-list">
<li v-for="item in brandList" :key="item.id">
<RouterLink to="/">
<img v-img-lazy="item.picture" :alt="item.name" >
<p class="chname">{{ item.name }}</p>
<p class="enname">{{ item.nameEn }}</p>
<p class="desc">{{ item.desc }}</p>
<p class="place">{{ item.place }}</p>
</RouterLink>
</li>
</ul>
</HomePanel>
</template>
<style scoped lang='scss'>
.brands-list{
display: flex;
justify-content: space-between;
height: 265px;
li {
width:153px;
height: 203px;
transition: all .5s;
&:hover{
transform: translate3d(0,-3px,0);
box-shadow: 0 3px 8px rgb(0, 0, 0);
}
img{
width:153px;
height: 153px;
}
.chname{
font-size: 18px;
padding-top:4px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.enname{
font-size: 16px;
padding-top:4px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.desc{
font-size: 12px;
padding-top:4px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #222423;
}
.place{
font-size: 10px;
padding-top:4px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #222423;
}
}
}
</style>
第二步:准备好各种调用接口的资料。
/**
* @description: 获取热门品牌
* @returns
*/
export const findBrandAPI = () =>{
return httpInstance({
url:'/home/brand'
})
}
这个是home.js文件中,需要增加的接口调用的内容。
在首页面的里面调用这个热门品牌的模块组件。就可以刷新渲染出来了。css样式我自己定义了一下,大家可以根据个人习惯,自己定义css内容。
如图,调用接口渲染出来的数据,是默认是10条数据。