领券联盟-前端版本-PowerByNuxt.js-设置首页分类的点击事件
拉大锯
发表于
2020-04-14 03:18
2716
前端开发
web
nuxtjs
vue
前后端分离
设置首页分类的点击事件
我们调整一下UI
接下来我们给我们首页的分类设置点击事件
这些思想呀,跟android是不是一样呀。你学会了android你可以把同样的思想用到前端来,你学会了前端,你可以把这些思想用到其他技能去。对吧,思想是相通的。
代码实现
设置点击事件
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
:key="index" v-text="item.favorites_title" @click="onCategoryClick(item)">
</li>
这样子就给我们的分类设置上了点击事件
但是,这个方法没有呀
所以我们要script标签里写上这么个方法
export default {
methods: {
onCategoryClick(item) {
console.log("onCategoryClick...");
console.log(item.favorites_id);
console.log(item.favorites_title);
},
},
.....
}
这样子,点击事件就有了
验证一下点击事件
运行项目,浏览器打开网页,按F12,或者右键检查
打开console控制台tab
然后我们点击首页的分类内容
就会看到
完整代码
<template>
<section class="container">
<div class="center-box">
<div class="recommend-category-box">
<ul class="clear-fix">
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
:key="index" v-text="item.favorites_title" @click="onCategoryClick(item)">
</li>
</ul>
</div>
<div class="recommend-content-list-box">
<div class="recommend-content-title">
<span v-html="currentCategory"></span>
</div>
<div class="recommend-content-list clear-fix">
<div class="recommend-content-item float-left"
v-for="(item,index) in content.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item" :key="index">
<div class="recommend-item-cover">
<img :src="item.pict_url">
</div>
<div class="recommend-item-title">
<a v-text="item.title" :href="item.coupon_click_url!==null?item.coupon_click_url:item.click_url"
target="_blank"></a>
</div>
<div class="recommend-item-info">
<a v-if="item.coupon_click_url!==null" class="buy-btn" :href="item.coupon_click_url"
target="_blank">领券购买</a>
<span class="recommend-prise" v-text="item.coupon_click_url===null?'晚了,无优惠券':'原价:'+item.zk_final_price">原价:34.00</span>
</div>
<span class="recommend-coupon-info" v-if="item.coupon_info!==null" v-text="item.coupon_info">
</span>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import api from '../utils/api';
export default {
methods: {
onCategoryClick(item) {
console.log("onCategoryClick...");
console.log(item.favorites_id);
console.log(item.favorites_title);
}
},
async asyncData() {
console.log("test load data....");
let categoryResult = await api.getRecommendCategories();
if (categoryResult.code === 10000) {
//请求分类成功
//去获取分类商品列表
let contentResult = await api.getRecommendContent(categoryResult.data[0].favorites_id);
//console.log(contentResult.data.tbk_uatm_favorites_item_get_response.results.uatm_tbk_item);
let titleArray = categoryResult.data[0].favorites_title.split('');
if (contentResult.code === 10000) {
return {
categories: categoryResult.data,
content: contentResult.data,
currentCategory: titleArray.join("<em>/</em>")
};
}
} else {
//TODO:请求分类失败
}
}
}
</script>
<style>
.recommend-content-title span {
font-size: 20px;
font-weight: 600;
color: #4D555D;
font-style: normal;
margin: 0 3px;
}
.recommend-content-title em {
margin-left: 5px;
margin-right: 5px;
font-weight: 400;
font-size: 16px;
}
.recommend-content-title {
text-align: center;
margin-bottom: 30px;
}
.recommend-content-list-box {
box-shadow: 0 5px 10px #d4d4d4;
}
.recommend-coupon-info {
position: absolute;
right: 12px;
top: 20px;
padding: 5px 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: #c9302c;
color: #fff;
}
.buy-btn {
text-decoration: none;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
color: #FFF;
background-color: #F56C6C;
border-color: #F56C6C;
}
.recommend-prise {
margin-left: 10px;
font-weight: 600;
color: #ebb563;
}
.recommend-item-info {
margin-top: 10px;
}
.recommend-item-title a {
margin-top: 10px;
margin-top: 10px;
text-decoration: none;
color: #47494e;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.recommend-content-item {
width: 265px;
position: relative;
box-shadow: 0 5px 10px #d4d4d4;
background: #fff;
padding: 10px 10px;
margin: 10px;
height: 370px;
}
.recommend-item-cover img {
border-radius: 5px;
width: 243px;
height: 243px;
}
.recommend-menu-active {
border-bottom: #c9302c 2px solid;
color: #c9302c !important;
}
.recommend-category-box li {
font-size: 16px;
cursor: pointer;
margin-left: 20px;
color: #8c8c8c;
margin-right: 20px;
}
.recommend-category-box ul > li:hover {
color: #c9302c;
}
.recommend-category-box {
height: 60px;
margin-top: 30px;
margin-bottom: 30px;
background: #fff;
line-height: 58px;
box-shadow: 0 5px 10px #d4d4d4;
}
.recommend-category-box ul {
list-style: none;
}
</style>
后面我们继续去实现把内容加载出来。