1、小程序端
2、样式
/* 选材样式 */
.productNav{
display: flex;
flex-direction: row;
}
.left{
width:25%;
font-size:30rpx;
background-color: #f4f4f4;
}
.left view{
text-align:center;
height:90rpx;
line-height: 90rpx;
}
.selected{
background-color: #fff;
font-weight: bold;
color:#E54847;
}
.normal{
background-color: #f4f4f4;
border-bottom: 1px solid #f2f2f2;
}
.right{
width:75%;
margin:0;
}
.right .cailiao-box{
margin-left:1px;
}
.right .cailiao-info{
background-color: #fff;
padding:5rpx;
height:60px;
line-height: 60px;
margin-bottom: 45rpx;
text-align: center;
}3、数据
// pages/details/details.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
url: app.globalData.URL,
activeIndex:0,
currentTab:'',
categoryList:''
},// 实现一级分类的切换效果
switchNav:function(event){
// console.log(event)
const {index } =event.currentTarget.dataset
// console.log(index)
this.setData({
activeIndex:index
})
},
// 获取材料类别
getCailiaoType:function(options){
var _this = this
var app_url = _this.data.url;
wx.request({
url: app_url + '/v1/getCailiaoType',
method: 'get',
success: function (res) {
let cailiaoTypeData =res.data.data
// console.log(cailiaoTypeData)
_this.setData({
cailiaoTypeData: cailiaoTypeData,
})
},
fail: function (res) {
console.log(res);
}
})
},
// 获取材料
getCailiao:function(options){
var _this = this
var app_url = _this.data.url;
wx.request({
url: app_url + '/v1/getCailiaoData',
method: 'get',
success: function (res) {
let getSelectCailiaoData =res.data
console.log(getSelectCailiaoData)
console.log(getSelectCailiaoData[0]['children'].length)
// console.log(getSelectCailiaoData[2]['children'])
console.log(999)
_this.setData({
categoryList: getSelectCailiaoData,
})
},
fail: function (res) {
console.log(res);
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let id = options.data;
var that = this;
that.getCailiaoType()
that.getCailiao();
var app_url = that.data.url;
wx.request({
url: app_url + '/v1/getGongdiDetails/' + id,
data: {},
success: function (res) {
var gongdi_info = res.data;
that.setData({
gongdi_info: gongdi_info
})
},
fail: function (res) {
}
})
},
//事件处理函数
switchRightTab: function (e) {
// 获取item项的id，和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index);
// 把点击到的某一项，设为当前index
this.setData({
curNav: id,
curIndex: index
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})4、后端
路由：
构建数据：
5、效果
