一、底部标签导航设计
1、新建一个香哈菜谱“xhcp”项目
2、将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图片图片复制到pages文件夹下
3、打开app.json配置文件,在pages数组里添加5个页面路径:
“pages/cook/cook”“pages/headline/headline”“pages/food/food”“page
s/message/message”“pages/me/me”
"pages":[
"pages/cook/cook",
"pages/headline/headline",
"pages/food/food",
"pages/message/message",
"pages/me/me"
],
4、在window数组里配置窗口导航背景颜色为灰色(#494949)、导航栏文字为“学做菜”、字体颜色为白色(white)
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#505050",
"navigationBarTitleText": "学做饭",
"navigationBarTextStyle":"white"
},
5、在tabBar对象里配置底部标签导航背景色为白色(#ffffff)、文字默认颜色为灰色(#999999)、选中时为红色(#CC1004)。在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标
"tabBar": {
"backgroundColor": "#fff",
"color":"#999",
"selectedColor": "#cc1004",
"borderStyle": "black",
"list": [
{
"pagePath":"pages/cook/cook",
"text": "学做菜",
"iconPath": "pages/images/tab/cook-0.jpg",
"selectedIconPath": "pages/images/tab/cook-1.jpg"
},
{
"pagePath":"pages/headline/headline",
"text": "头条",
"iconPath": "pages/images/tab/headline-0.jpg",
"selectedIconPath": "pages/images/tab/headline-1.jpg"
},
{
"pagePath":"pages/food/food",
"text": "美食圈",
"iconPath": "pages/images/tab/food-0.jpg",
"selectedIconPath": "pages/images/tab/food-0.jpg"
},
{
"pagePath":"pages/message/message",
"text": "消息",
"iconPath": "pages/images/tab/message-0.jpg",
"selectedIconPath": "pages/images/tab/message-1.jpg"
},
{
"pagePath":"pages/me/me",
"text": "我的",
"iconPath": "pages/images/tab/me-0.jpg",
"selectedIconPath": "pages/images/tab/me-1.jpg"
}
]
}
}
二、宫格导航设计
1、进入pages/cook/cook.wxml文件,先设计海报轮播区域。采用一张图片来进行布局,图片的宽度设置为100%,高度设置为230px
<view class="content">
<view class="img">
<image src="../images/haibao/haibao-1.jpg" style="width: 100%;height:230px;"></image>
</view>
2、设计宫格导航。分为4个导航:“菜谱分类”“视频”“美食养生”“闪购”。每
个导航对应一个图标。在导航的下面是灰色的间隔线
<view class="nav">
<view class="nav-item">
<!-- 第一个 -->
<view>
<image src="../images/icon/fenlei.jpg" style="width: 25px;height:23px;"></image>
</view>
<view>菜谱分类</view>
</view>
<!-- 第二个 -->
<view class="nav-item">
<view>
<image src="../images/icon/shipin.jpg " style="width: 25px;height:23px;"></image>
</view>
<view>视频</view>
</view>
<!-- 第三个 -->
<view class="nav-item">
<view>
<image src="../images/icon/meishi.jpg" style="width: 25px;height:23px;"></image>
</view>
<view>美食养生</view>
</view>
<!-- 第四个 -->
<view class="nav-item">
<view>
<image src="../images/icon/shangou.jpg" style="width: 25px;height:23px;"></image>
</view>
<view>闪购</view>
</view>
</view>
3、进入
pages/cook/cook.wxss文件,针对宫格导航添加样式
.nav{
display: flex;
flex-direction: row;
text-align: center;
}
.nav-item{
width: 25%;
margin-top: 20px;
font-size: 12px;
}
.hr{
height: 15px;
background-color: #cccccc;
margin-top: 15px;
opacity: 0.2;
}
三、香哈头条初始化数据
1、作为客户端,微信小程序的数据来源于服务端。下面模拟服务端提供的香哈头条列表的数据。有了数据,页面才能动态地进行渲染。
2、进入pages/cook/cook.js文件,添加initData函数,在data页面初始化数据
里添加array数组,然后将initData定义的数据通过setData设值函数赋值给
array数组。
Page({
data: {
array:[]
},
onLoad:function(options) {
var array = this.initData();
this.setData({array:array});
},
initData:function(){
var array = [];
var object1 = new Object();
object1.img = '../images/list/food-2.jpg';
object1.title='爱心早餐';
object1.type='健康人生';
object1.liulan='99+浏览';
object1.pinglun='99+评论';
array[0] = object1;
var object2 = new Object();
object2.img = '../images/list/food-3.jpg';
object2.title='困了就喝咖啡';
object2.type='家庭医生在线';
object2.liulan='99+浏览';
object2.pinglun='99+评论';
array[1] = object2;
var object3 = new Object();
object3.img = '../images/list/food-4.jpg';
object3.title='小黄人大白狗';
object3.type='家庭医生在线';
object3.liulan='99+浏览';
object3.pinglun='99+评论';
array[2] = object3;
var object4 = new Object();
object.img = '../images/list/food-5.jpg';
object4.title='爸爸去哪儿';
object4.type='广告';
object4.liulan='99+浏览';
object4.pinglun='99+评论';
array[3] = object4;
return array;
}
})
四、香哈头条列表渲染及绑定数据
1、进入pages/cook/cook.wxml文件,设计香哈头条列表信息界面布局。
<view class="head">
<view>香哈头条</view>
<view class="right"></view>
</view>
<view class="list">
<view class="item" bindtap="seeDetail" id="0">
<view>
<image src="../images/list/food-1.jpg" style="width: 75px;height:58px;"></image>
</view>
<view class="desc">
<view class="title">爱心早餐</view>
<view class="count">
2、进入pages/cook/cook.wxss文件,针对香哈头条列表信息添加样式。
.head{
display: flex;
flex-direction: row;
margin: 10px;
font-size: 13px;
color:#999999;
}
.right{
position: absolute;
right: 10px;
color:#cccccc;
}
.hr2{
height: 2px;
background-color: #cccccc;
opacity: 0.2;
}
.item{
display: flex;
flex-direction: row;
margin-left: 10px;
margin-bottom: 5px;
}
.desc{
margin-left: 20px;
line-height: 30px;
}
.title{font-weight: bold;}
.count{
display: flex;
flex-direction: row;
font-size: 12px;
color: #999999;
}
.liulan{
position: absolute;
right: 70px;
}
.pinglun{
position: absolute;
right: 10px;
}
3、现在香哈头条列表数据直接写在了界面里。下面我们通过数据绑定和wx:for循环的方式动态加载数据。
<view class="list">
<block wx:for="{{array}}">
<view class="item" bindtap="seeDetail" id="0">
<view>
<image src="{{item.list}}" style="width: 75px;height:58px;"></image>
</view>
<view class="desc">
<view class="title">{{item.title}}</view>
<view class="count">
<view>{{item.type}}</view>
<view class="liulan">{{item.liulan}}</view>
<view class="pinglun">{{item.pinglun}}</view>
</view>
</view>
</view>
<view class="hr2"></view>
</block>
</view>
五、香哈头条模板引用
1、在pages中添加一个temp.wxml文件,在这个文件里制作一个香哈头条列表的模板,模板名称为cooks,将列表循环的内容放置在这个文件里。
<template name="cooks">
<block wx:for="{{array}}">
<view class="item" bindtap="seeDetail" id="0">
<view>
<image src="{{item.list}}" style="width: 75px;height: 58px;"/>
</view>
<view class="desc">
<view class="title">{{item.title}}</view>
<view class="count">
<view>{{item.type}}</view>
<view class="liulan">{{item.liulan}}</view>
<view class="pinglun">{{item.pinglun}}</view>
</view>
</view>
</view>
<view class="hr2"></view>
</block>
</template>
2、将cooks模板引入到cook.wxml文件里,将列表信息展现出来。
<import src="temp" />
<view class="list">
<template is="cooks" data="{{array}}"/>
</view>
🌈本篇博客的内容【微信小程序天气制作】已经结束。
🌈若对你有些许帮助,可以点赞、关注、评论支持下博主,你的支持将是我前进路上最大的动力。