效果展示
底部导航栏
首页轮播图
热门分类
精品展示
项目结构
代码实现
底部导航栏
<element name="category" src="./category/category"></element>
<element name="cookbook" src="./cookbook/cookbook"></element>
<element name="map" src="./map/map"></element>
<element name="more" src="./more/more"></element>
<div>
<tabs class="tabs" index="0" vertical="false" on:change="change">
<tab-content class="tab-content" scrollable="true">
<cookbook></cookbook>
<category></category>
<map></map>
<more></more>
</tab-content>
<tab-bar class="tab-bar" mode="fixed">
<div class="tab-item" for="{{(index,tab) in tabs}}">
<image src="{{currentSelected === index ? tab.tintIcon : tab.icon}}"></image>
<text>
{{tab.title}}
</text>
</div>
</tab-bar>
</tabs>
</div>
.container {
flex-direction:column;
justify-content:flex-start;
align-items:center;
}
.tabs {
width:100%;
}
.tab-content {
width:100%;
}
.tab-bar {
height: 50px;
border-top-width: 0.5px;
border-top-color: #ccc;
.tab-item {
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width:22px;
height:22px;
}
text {
font-size:12px;
font_weight:100;
color:#000;
}
}
}
export default {
data: {
tabs:[
{
id:'tab1',
title:'美食大全',
icon:"/common/images/个人中心1.png",
tintIcon:"/common/images/个人中心.png",
component:"cookbook"
},
{
id:'tab2',
title:'分类',
icon:"/common/images/关于我们1.png",
tintIcon:"/common/images/关于我们.png",
component:"category"
},
{
id:'tab3',
title:'地图',
icon:"/common/images/新闻中心1.png",
tintIcon:"/common/images/新闻中心.png",
component:"map"
},
{
id:'tab4',
title:'更多',
icon:"/common/images/首页1.png",
tintIcon:"/common/images/首页.png",
component:"more"
},
],
currentSelected:0
},
change:function(e) {
console.log("Tab Index:"+e.index);
this.currentSelected = e.index
},
}
首页轮博图
<div class="cb-swiper-container">
<swiper>
<image for="{{list.slice(0,5)}}" src="{{$item.img}}"></image>
</swiper>
</div>
.cb-swiper-container {
height:240px;
swiper {
width:100%;
image {
width:100%;
height:100%;
object-fit:fill;
}
}
}
export default {
props:{
list:{
type:Array
}
},
onReady(){
console.log(this.list)
}
}
热门分类
<div class="cb-hc-container">
<div class="cb-hc-title">
<text>
人们分类
</text>
</div>
<div class="cb-hc-list">
<div class="cb-hc-item" for="list">
<image src="{{$item.img}}"></image>
<text>{{$item.title}}</text>
</div>
</div>
</div>
.cb-hc-container {
flex-direction: column;
}
.cb-hc-title {
border-bottom-width: 0.5px;
border-bottom-color: #eee;
height: 44px;
}
text {
font-size: 12px;
padding-left: 10px;
}
.cb-hc-list {
flex-wrap: wrap;
margin-top: 20px;
}
.cb-hc-item {
width: 33.33333%;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
image {
object-fit: cover;
width: 70px;
height: 70px;
border-radius: 8px;
}
text {
font-size: 14px;
line-height: 30px;
}
import list from '../../../../common/data/cookbook-hotcat.json';
export default {
data:{
list:[]
},
onReady() {
this.list = list
}
}
精品展示
<div class="cb-top-container">
<div class="cb-top-title">
<text class="title-text">
精品号才
</text>
</div>
<div class="cb-top-body">
<div class="cb-top-item" for="{{list.slice(0,10)}}">
<image src="{{$item.img}}"></image>
<div class="cb-top-item-info">
<text class="cb-top-item-title">
{{$item.name}}
</text>
<text class="cb-top-item-subtitle">
{{$item.all_click}}浏览{{$item.favorites}}收藏
</text>
</div>
</div>
</div>
</div>
.cb-top-container {
flex-direction: column;
background-color: #f5f5f5;
}
.cb-title-title {
height: 50px;
padding-top: 5px;
padding-left: 10px;
color: #333;
}
text {
font-size: 12px;
}
.title-text {
font-size: 22px;
}
.cb-top-body {
flex-wrap: wrap;
padding-left: 10px;
padding-right: 10px;
}
.cb-top-item {
width: 50%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
padding-bottom: 15px;
margin-bottom: 10px;
height: 160px;
}
image {
width: 100%;
flex: 1;
object-fit: contain;
}
.cb-top-item-info {
height: 50px;
flex-direction: column;
align-items: center;
}
.cb-top-item-title {
font-size: 16px;
}
.cb-top-item-subtitle {
font-size: 12px;
color: #666;
font-weight: 100;
}
export default {
props: {
list: {
type:Array
}
}
}