話不多說，直接上代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>主頁</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/cube-ui/lib/cube.min.css">
<style type="text/css">
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
#app{
margin-bottom: 70px;
}
.index-navigation{
width: 100%;
margin: 10px 0px;
}
.index-navigation .cube-scroll-content{
display: inline-block;
}
.index-navigation .navigation-class{
height: 40px;
background-color: #fff;
padding-left: 10px;
overflow-x: auto;
white-space:nowrap;
}
.index-navigation .navigation-span{
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 40px;
line-height: 40px;
}
.index-navigation .navigation-active{
border-bottom: 3px solid #028482;
font-weight: bold;
}
.goods-containter{
width: 100%;
padding: 0px 10px;
overflow: hidden;
}
.goods-containter .goods-box{
width: 50%;
vertical-align: top;
margin-bottom: 10px;
padding: 0px 5px;
}
.goods-containter .goods-left{
float: left;
}
.goods-containter .goods-right{
float: right;
}
.goods-containter .goods-box .goods-box-pic{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
.goods-containter .goods-box .goods-box-pic img{
width: 100%;
}
.goods-containter .goods-box .goods-box-content{
width: 100%;
font-size: 14px;
color: #333;
}
.goods-containter .goods-box .goods-content-show{
width: 100%;
font-weight: bold;
}
.goods-containter .goods-box .goods-box-content .goods-content-price{
color: red;
line-height: 30px;
position: relative;
}
.goods-containter .goods-box .goods-box-content .goods-content-price .goods-price-right{
position: absolute;
right: 0px;
color: #888;
font-size: 12px;
}
.goods-containter .goods-box .goods-box-user{
width: 100%;
}
.goods-containter .goods-box .goods-box-user .goods-user-head{
display: inline-block;
vertical-align: top;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.goods-containter .goods-box .goods-box-user .goods-user-content{
display: inline-block;
vertical-align: top;
width: calc(100% - 45px);
height: 40px;
}
.goods-containter .goods-box .goods-box-user .goods-user-content .goods-content-show{
line-height: 20px;
font-size: 14px;
}
.goods-containter .goods-box .goods-box-user .goods-user-content .goods-content-note{
line-height: 20px;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<div id="app">
<div class="index-container">
<div class="index-navigation">
<cube-scroll ref="horScroll" direction="horizontal">
<div class="navigation-class">
<span class="navigation-span" v-for="(item,index) in navigationData" :class="{'navigation-active': navigationIndex==index}" @click="navigationClick(item,index)">{{item.text}}</span>
</div>
</cube-scroll>
</div>
<div class="goods-containter">
<div class="goods-box" v-for="(item,index) in goodsData" :class="judgeClass(index)" :key="index">
<div class="goods-box-pic"><img :src="item.goods_pic"></div>
<div class="goods-box-content">
<p class="goods-content-show">{{item.goods_content}}</p>
<p class="goods-content-price">￥<span>{{item.goods_price}}</span> <span class="goods-price-right">已有{{item.goods_browse_num}}人看過</span></p>
</div>
<div class="goods-box-user">
<div class="goods-user-head"><img :src="item.user_head_img" width="100%" height="100%"></div>
<div class="goods-user-content">
<p class="goods-content-show">{{item.user_name}}</p>
<p class="goods-content-note">成功交易{{item.deal_success_num}}件寶貝</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<script type="text/javascript">
Vue.component('my-component-menu',{
template: '#menu'
})
Vue.component('my-component-banner',{
template: '#banner',
props: ['images']
})
var vm = new Vue({
el: '#app',
data: {
navigationIndex: 0, //選中的標籤條
goodsData: "",
navigationData: [
{id: 1, text: "推薦"},
{id: 1, text: "二手機"},
{id: 1, text: "二手電腦"},
{id: 1, text: "數碼"},
{id: 1, text: "租房"},
{id: 1, text: "服裝"},
{id: 1, text: "書籍"},
{id: 1, text: "生活用品"},
{id: 1, text: "其他"}
]
},
mounted: function(){ //在實例被創建，並且el更新後執行
var _this = this;
_this.getGoodsData();
},
methods: {
navigationClick(item,index){ //導航條點擊事件
var _this = this;
_this.navigationIndex = index;
},
judgeClass(index){ //判斷左浮動還是右浮動
var _this = this;
if(index%2==0){
return "goods-left";
}else{
return "goods-right";
}
},
getGoodsData(){
var _this = this;
_this.goodsData = [{
"id": 1,
"goods_pic": "img/goods/n_v1bj3gzr22dpgvqoglirka_750_0.jpg",
"goods_content": "九成新的衛衣，剛買來，試穿了一下，尺寸不合適，現轉賣",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/8ef6abfbd5982ecc4f3304b345533113.jpg",
"user_name": "對方是否",
"deal_success_num": 23
},{
"id": 2,
"goods_pic": "img/goods/n_v1bj3gzrymzpjvq3ivjr2a_750_0.jpg",
"goods_content": "視屏線",
"goods_price": "12",
"goods_browse_num": 15,
"user_id": 1,
"user_head_img": "img/headImg/803b2de23d4d042c1c3d217b7b47a783.jpg",
"user_name": "大頭非鯽",
"deal_success_num": 23
},{
"id": 3,
"goods_pic": "img/goods/n_v1bl2lwko7htvfqzmlijbq_750_0.jpg",
"goods_content": "智能吸塵器，9成新，剛裁開，無損壞",
"goods_price": "200",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/5588962c85763d73c2a3a8968b516ca1.jpg",
"user_name": "食堂門口",
"deal_success_num": 23
},{
"id": 4,
"goods_pic": "img/goods/n_v1bl2lwxt2726fr6laraaa_750_0.jpg",
"goods_content": "耐克球鞋，8成新，才穿一天",
"goods_price": "123",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/b800d9e9a33769b74d5c4a6c43304ebb.jpg",
"user_name": "與",
"deal_success_num": 23
},{
"id": 5,
"goods_pic": "img/goods/n_v2a0334dbb23a042068ff7cd8f5fdb5243_750_0.jpg",
"goods_content": "挎包",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/dbede3148589f5ca19d05a082f757f39.jpg",
"user_name": "兩",
"deal_success_num": 23
},{
"id": 6,
"goods_pic": "img/goods/n_v21f76a6e5a0c44f38b5472e2ce789eaf4.jpg",
"goods_content": "古箏，使用了一年的新古箏，無任何毛病",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/ebe01051e831c2c03caf0f33497629b8.jpg",
"user_name": "嗯",
"deal_success_num": 23
},{
"id": 6,
"goods_pic": "img/goods/n_v28def611059974920872b464a67f919da_750_0.jpg",
"goods_content": "玉佩",
"goods_price": "45",
"goods_browse_num": 12,
"user_id": 1,
"user_head_img": "img/headImg/5588962c85763d73c2a3a8968b516ca1.jpg",
"user_name": "突然",
"deal_success_num": 23
}];
}
}
})
</script>
</body>
</html>
用到了滴滴封裝的UI庫，使用時需要替換圖片路徑