持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
一。底部导航栏
需要在app.json(全局配置文件)里写内容
首先需要配置页面(pages是包含页面，page/文件夹名/文件名)
"pages": [
"pages/index/index",
"pages/mine/mine",
"pages/shopcart/shopcart",
"pages/list/list",
"pages/order/order"
]
tabBar：底部 tab 栏的表现
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
pagePath：页面路径，必须在 pages 中先定义
text：tab 上按钮文字
iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./icon/首页 (1).png",
"selectedIconPath": "./icon/首页.png"
}, {
"pagePath": "pages/list/list",
"text": "列表",
"iconPath": "./icon/列表 (1).png",
"selectedIconPath": "./icon/列表.png"
}, {
"pagePath": "pages/shopcart/shopcart",
"text": "购物车",
"iconPath": "./icon/shopcart.png",
"selectedIconPath": "./icon/shopcart (2).png"
}, {
"pagePath": "pages/order/order",
"text": "列表",
"iconPath": "./icon/我的订单 (1).png",
"selectedIconPath": "./icon/我的订单.png"
}, {
"pagePath": "pages/mine/mine",
"text": "列表",
"iconPath": "./icon/我的 (1).png",
"selectedIconPath": "./icon/我的.png"
}]
}
二。侧边栏
scroll-view：可滚动视图区域。使用竖向滚动时，需要给[scroll-view]一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，起支持传入单位(rpx/px)。
scroll-y(默认值false)允许纵向滚动
scroll-x(默认值false)允许横向滚动
页面布局：
<view class="container">
<scroll-view class="left" scroll-y>
<view wx:for="{{types}}" wx:key="index" bindtap="clicktap" data-index="{{index}}" class="{{activeIndex==index? 'active':''}}">{{item.Name}}</view>
</scroll-view>
<scroll-view class="right" scroll-y>
<view wx:for="{{subjects}}" class="item">
<view>{{item.Title}}</view>
<view class="right_a">
<view>{{item.Section.Name}}</view>
<view>{{item.Createtime}}</view>
</view>
</view>
</scroll-view>
</view>
页面样式：
.container{
display: flex;
width: 100vw;
height: 100vh;
}
.left {
width: 150rpx;
background-color:#ccc;
text-align: center;
}
.left view{
padding:5px 0 ;
}
.right{
flex: 1;
}
.right_a{
display: flex;
justify-content: space-between;
}
.active{
color: #369;
border-left: 4px solid #369;
}
.right .item{
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
js内容：
Page({
data: {
activeIndex: 0,
types: [],
subjects: []
},
高亮
点击左侧数据，获取下标
clicktap(e) {
let {
index
} = e.currentTarget.dataset
this.data.activeIndex = index
this.setData({
activeIndex: this.data.activeIndex
})
},
左边数据
loadtype() {
wx.request({
url: "https://bingjs.com:8002/Section/GetSections",
success: ({
data
}) => {
// console.log(data);
this.data.types = data
this.setData({
types: this.data.types
})
}
})
},
右边数据
loadsubject() {
wx.request({
url: 'https://www.bingjs.com:8002/Subject/GetSubjects',
success: ({
data
}) => {
console.log(data);
this.data.subjects = data
this.data.subjects.forEach(i => {
i.Createtime = this.getTime(i.Createtime)
})
this.setData({
subjects: this.data.subjects
})
}
})
},
获取数据可以封装起来
function $request(url, data, method = "GET") {
return new Promise((res, req) => {
// 加载loading
// wx.showModal({
// title: '数据加载中'
// })
// 发生请求
wx.request({
url,
data,
method,
success: ({
data
}) => {
res(data)
},
// 请求完成的回调
// complete: () => {
// // 关闭loading
// wx.hideLoading()
// }
})
})
}
// 导出
module.exports={$request}
导入： let {$request}=require("../../utils/request")
左边数据
async loadtype() {
let types=await $request("https://bingjs.com:8002/Section/GetSections")
this.data.types = data
this.setData({
types
})
},
右边数据
async loadsubject() {
let subjects=await $request("https://bingjs.com:8002/Subject/GetSubjects")
this.setData({
相同数据参数可以只写一个
subjects
})
this.data.subjects.forEach(i => {
i.Createtime = this.getTime(i.Createtime)
})
this.setData({
subjects
})
}
将时间戳变成数字
getTime(time) {
let date = new Date(parseInt(time))
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
return [year, month, day].join("-")
},
页面加载时间
onLoad() {
this.loadtype()
this.loadsubject()
}
})
