1.首先我们来配置一下index.json文件
{
"component": true,
"usingComponents": {},
"navigationBarTitleText": "宠物百科"
}
2.接着在index.wxss文件中添加样式(样式的含义和class不做具体解释)
/* pages/baike/index.wxss */
/* 1. 设置整个页面的背景颜色 */
page{
background:#f5f5f5;
/* 避免左侧Item不够时 被白色覆盖*/
}
/* 2.主盒子 */
.container {
width: 100%; /* 宽度占屏幕的100% */
height: 100%; /* 高度占屏幕的100% */
background-color:#fff; /* 背景颜色 */
}
/* 3.左盒子*/
.nav_left{
position:absolute; /* 使用绝对定位 */
top:0px; /* 距离上边距:0px */
left:0px; /* 距离左边距:0px */
width: 25%; /* 每个item所占的宽度 */
background: #f5f5f5; /* 主盒子设置背景色为灰色 */
text-align: center; /* 文字居中显示 */
}
.nav_left .nav_left_items{
height: 15px; /* 每个item高40px*/
padding: 15px 0; /* 上内边距和下内边距是 6px[增加高度] 右内边距和左内边距是 0px*/
border-bottom: 1px solid #dedede; /* 设置下边线 */
font-size: 14px; /* 设置文字大小:14px */
}
.nav_left .nav_left_items.active{
background: #fff;
color: #CC812B;
/*border-left: 3px solid #3385ff;*/
}
/* 4.右盒子 */
/* 4.1. 右侧栏主盒子总体设置 */
.nav_right{
position: absolute; /* 使用绝对定位 */
top: 0; /* 距离上边距:0px */
left: 80px; /* 距离左边距:80px */
width: 75%; /* 右侧主盒子所占宽度 */
height: 600px; /* 右侧主盒子所占高度 */
padding: 10px; /* 所有 4 个内边距都是 10px*/
box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
background: #fff; /* 右侧主盒子背景颜色 */
}
/* 4.2. 右侧栏中的每个item */
.nav_right .nav_right_items{
float: left; /* 浮动向左 */
width: 50%; /* 每个item设置宽度是33.33% */
height: 240rpx; /* 每个item设置高度是120px */
text-align: center; /* 设置图片下方的提示文字居中显示 */
}
.nav_right .nav_right_items image{
width: 240rpx; /* 给图片设置宽度 */
height: 200rpx; /* 给图片设置高度 */
border-radius: 20rpx; /* 给图片添加圆角边框 */
float: left;
}
.nav_right .nav_right_items text{
width: 240rpx;
height: 30rpx;
float: left;
font-size: 24rpx;
color: #666;
}
.nav_right_default{
margin-top: 50%;
text-align: center;
font-size: 24rpx;
color: #999;
}
3.设置index.wxml文件
<view class="container">
<!--左侧栏-->
<view class='nav_left'>
<view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-id="{{item.id}}" wx:for="{{cateList}}" wx:key="{{index}}">
{{ item.title }}
</view>
</view>
<!--左侧栏结束-->
<!--右侧内容-->
<view class="nav_right">
<view class="nav_right_items" wx:for="{{petsList}}" wx:key="{{item.id}}" wx:if="{{petsList.length != 0}}">
<image src="{{item.cover}}" bindtap="getDetail" data-id="{{item.id}}"></image>
<text>{{item.title}}</text>
</view>
<view class="nav_right_default" wx:if="{{petsList.length == 0}}"> 暂无内容 </view>
</view>
<!--右侧内容结束-->
</view>
3.1左侧分类导航内容,我们使用view试图,将分类导航列表【cateList】渲染出来。
cateList的接口可以自己设置接口进行调试,我这边的结构如下图:
3.2右侧内容同样用视图进行渲染,把图片和标题进行样式控制显示。
左侧导航设置点击事件,对右侧进行内容变化。右侧的内容结构如下:
4.设置index.js文件,这个文件主要是进行事件控制和跳转触发
const app = getApp();
var openid = wx.getStorageSync('openid');
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
curNav: 3,
cateList: [],
petsList: [],
},
/**
* 组件的方法列表
*/
methods: {
/* 把点击到的某一项 设为当前curNav */
switchRightTab: function(e) {
let id = e.target.dataset.id;
this.setData({
curNav: id
})
this.getPetsList(id);
},
/**进入文章详情 */
getDetail: function(e) {
var id = e.currentTarget.dataset.id;
wx.navigateTo({
url: 'detail/detail?id=' + id,
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', {
})
}
})
},
getPetsList: function(id) {
var that = this;
wx.request({
url: app.config.serverCfg.domain.topic,
data: {
page: '1',
size: '20',
id: id
},
success(res) {
that.setData({
petsList: res.data.data,
});
}
})
},
/*页面加载时进行分类数据的请求*/
onLoad: function(options) {
var that = this;
wx.request({
url: app.config.serverCfg.domain.cate,
data: {
page: '1',
size: '20'
},
success(res) {
that.setData({
cateList: res.data.data,
});
that.getPetsList(res.data.data[0]['id']);
}
})
},
}
})
4.1 顶部app是获取我设置的一些公共信息,openid获取本地缓存的openid数据
4.2 cateList是分类对象数组,petsList是右侧的内容对象数组
4.3 switchRightTab方法是点击左侧分类,进行右侧的内容切换
4.4 getDetail方法是点击某一个右侧内容后,跳转的宠物详情信息页。
5.本文件源代码下载地址: