一、先设置要切换的导航栏
app.json
{
"pages":[
"pages/cook/cook",
"pages/food/food",
"pages/headline/headline",
"pages/me/me",
"pages/message/message"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [{
"pagePath": "pages/cook/cook",
"text": "学做菜",
"iconPath": "images/tab/cook-0.jpg",
"selectedIconPath": "images/tab/cook-1.jpg"
},
{
"pagePath": "pages/food/food",
"text": "美食圈",
"iconPath": "images/tab/food-0.jpg",
"selectedIconPath": "images/tab/food-0.jpg"
},
{
"pagePath": "pages/headline/headline",
"text": "菜谱",
"iconPath": "images/tab/headline-0.jpg",
"selectedIconPath": "images/tab/headline-1.jpg"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "images/tab/message-0.jpg",
"selectedIconPath": "images/tab/message-1.jpg"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/tab/me-0.jpg",
"selectedIconPath": "images/tab/me-1.jpg"
}
]
}
}
二、开始写页面了
cook.wxml
这里面导入了模板
<!--pages/cook/cook.wxml-->
<!-- <text>pages/cook/cook.wxml</text> -->
<view class="content">
<view class="img">
<image src="/images/haibao/haibao-3.jpg" style="width:100%"></image>
</view>
<view class="nav">
<view class="nav-item">
<view><image src="/images/icon/fenlei.jpg"></image></view>
<view>菜品分类</view>
</view>
<view class="nav-item">
<view><image src="/images/icon/meishi.jpg"></image></view>
<view>美食</view>
</view>
<view class="nav-item">
<view><image src="/images/icon/shangou.jpg"></image></view>
<view>闪购</view>
</view>
<view class="nav-item">
<view> <image src="/images/icon/shipin.jpg"></image></view>
<view>视频</view>
</view>
</view>
<!-- 分割线 -->
<view class="hr"></view>
<!-- 内容 -->
<!-- 头部 -->
<view class="head">
<view>新闻头条</view>
<view class="right">></view>
</view>
<!-- 身体 -->
<import src="/pages/template/cookBodyItem.wxml"></import>
<view>
<template is="cookBodyItem" data="{{array}}" ></template>
</view>
</view>
使用的模板
cookBodyItem.wxml
<template name="cookBodyItem">
<block wx:for="{{array}}" wx:for-item="itemName" wx:for-index="idx" wx:key="1">
<!-- 每一行的数据 -->
<view class="hang">
<!-- 左边图片 -->
<view bindtap="seeDetail" id="{{idx}}">
<image src="{{itemName.img}}" style="width:120rpx;height:120rpx;"></image>
</view>
<!-- 右边的文字说明 -->
<view class="rightText">
<view class="title">{{itemName.title}}</view>
<view class="textPlace">
<view class="type">{{itemName.type}}</view>
<view class="comment">{{itemName.comment}}</view>
<view class="accessNumber">{{itemName.accessNumber}}</view>
</view>
</view>
</view>
</block>
</template>
三、样式处理
cook.wxss
/* pages/cook/cook.wxss */
.nav{
display: flex;
flex-direction: row;
text-align: center;
}
.nav-item{
margin-top: 20rpx;
width: 25%;
font-size: 20rpx;
}
.nav-item image{
width: 50rpx;
height: 50rpx;
}
.hr{
opacity: 0.5;
height: 20rpx;
background-color: rgba(43, 183, 226, 0.111);
}
.head{
display: flex;
flex-direction: row;
margin-left: 20rpx;
opacity: 0.2;
height: 20rpx;
text-align: left;
}
.right{
position: absolute;
right: 20rpx;
text-decoration-color: blue;
}
/* 模板需要的样式 */
.hang{
display: flex;
flex-direction: row;
margin-left: 20rpx;
margin-top: 20rpx;
}
.rightText{
display: flex;
flex-direction: column;
}
.textPlace{
display: flex;
flex-direction: row;
margin-top: 30rpx;
}
.title{
font-weight: bold;
font-size: 30rpx;
}
.type{
font-weight: normal;
font-size: 23rpx;
}
.comment{
position: absolute;
right: 220rpx;
font-weight: normal;
font-size: 23rpx;
}
.accessNumber{
position: absolute;
right: 20rpx;
font-weight: normal;
font-size: 23rpx;
}
四、js内部方法及数据初始化
cook.js
// pages/cook/cook.js
Page({
/**
* 页面的初始数据
*/
data: {
array: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var array = this.initData();
this.setData({
array:array
});
},
initData: function(){
var array = [];
var object1 = new Object();
object1.title = "每日健康养生谈";
object1.comment = "666评论";
object1.accessNumber = "1488浏览";
object1.type = "养生知识";
object1.img="/images/list/food-1.jpg";
array[0] = object1;
var object2 = new Object();
object2.title = "红烧猪蹄";
object2.comment = "77评论";
object2.accessNumber = "148浏览";
object2.type = "菜谱杂锦";
object2.img="/images/list/food-2.jpg";
array[1] = object2;
var object3 = new Object();
object3.title = "排骨猪肉汤";
object3.comment = "108评论";
object3.accessNumber = "239浏览";
object3.type = "菜谱杂锦";
object3.img="/images/list/food-3.jpg";
array[2] = object3;
return array;
},
//点击绑定事件
seeDetail: function(e){
console.log(e.currentTarget.id);
}
})
五、最终结果
我圈中那个地方我放了点击事件,所以,点击的话调试器就会有输出
六、项目参考
https://github.com/xianzaizheli/weiXinLearn
day1-学做菜