微信小程序分类界面显示、左树右表形式
- 主要以医院科室为示例进行编写，左边为医院列表，右侧为每个医院下对应的具体科室列表，左右两侧均支持添加懒加载功能；顶部下拉框选择，则可实现根据不同的选择，改变搜索框需要搜索的内容；此外，支持选择多个科室。
此界面的数据显示完全支持自适应，均是经过设备高度自动换算，增强界面的兼容性。可根据自己需求随意修改，当然也存在很多不足的地方，欢迎指正批评，多谢！
别忘了点赞收藏哦！
1.界面展示：
2.JS代码：
Page({
/**
* 页面的初始数据
*/
data: {
scroll:true, //是否允许右侧内容滚动
index: 0,
array: ['医院', '科室'],
useHeight:'',
current:'0',
leftList:[
{id:'0',text:'测试医院1'},{id:'1',text:'类别医院2'},{id:'2',text:'测试医院3'},
{id:'3',text:'测试医院4'},{id:'4',text:'测试医院5'},{id:'5',text:'测试医院6'},
{id:'6',text:'测试医院7'},{id:'7',text:'类别医院8'},{id:'8',text:'测试医院9'},
{id:'9',text:'测试医院10'},{id:'10',text:'测试医院11'},{id:'11',text:'测试医院12'},
{id:'12',text:'测试医院13'},{id:'13',text:'类别医院14'},{id:'14',text:'测试医院15'},
{id:'15',text:'测试医院16'},{id:'16',text:'测试医院17'},{id:'17',text:'测试医院18'},
{id:'18',text:'测试医院19'},{id:'19',text:'类别医院20'},{id:'20',text:'测试医院21'},
{id:'21',text:'测试医院22'},{id:'22',text:'测试医院23'},{id:'23',text:'测试医院24'},
{id:'24',text:'测试医院25'},{id:'25',text:'类别医院26'},{id:'26',text:'测试医院27'},
{id:'27',text:'测试医院28'},{id:'28',text:'测试医院29'},{id:'29',text:'测试医院30'}
],
rightList:[]
},
/**
* 选择搜索类型
*/
bindPickerChange(e){
this.setData({
index:e.detail.value
})
},
/**
* 左侧点击事件
*/
bindSelectLeft(e){
let index = e.currentTarget.dataset.id;
this.setData({
current:index
})
this.getDataList(index);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getDataList(0);
},
// 数据初始化
getDataList(e){
let list1 = [
{code:'0',text:'点赞科室'}, {code:'1',text:'收藏科室'},{code:'2',text:'关注科室'},
{code:'3',text:'谢谢科室'},{code:'4',text:'非常感谢科室'},{code:'5',text:'栓Q科室'},
{code:'0',text:'点赞科室'},{code:'1',text:'收藏科室'},{code:'2',text:'关注科室'},
{code:'3',text:'谢谢科室'},{code:'4',text:'非常感谢科室'},{code:'5',text:'栓Q科室'},
{code:'0',text:'点赞科室'},{code:'1',text:'收藏科室'},{code:'2',text:'关注科室'},
{code:'3',text:'谢谢科室'},{code:'4',text:'非常感谢科室'},{code:'5',text:'栓Q科室'}
];
let list2 = [
{code:'3',text:'谢谢科室'},{code:'4',text:'非常感谢科室'},{code:'5',text:'栓Q科室'},
{code:'0',text:'点赞科室'},{code:'1',text:'收藏科室'},{code:'2',text:'关注科室'},
{code:'3',text:'谢谢科室'},{code:'4',text:'非常感谢科室'},{code:'5',text:'栓Q科室'}
]
if(e==0){
this.setData({
rightList:list1,
scroll:true
})
}else if(e==2){
this.setData({
rightList:list2,
scroll:true
})
}else{
this.setData({
rightList:[],
scroll:false
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 获取当前设备可用高度
let that = this;
wx.getSystemInfo({
success(res) {
that.setData({
useHeight:res.windowHeight
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
3.wxml代码：
<view class="level search-box" style="height: {{useHeight*0.08}}px;">
<view class="down-box">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<text>{{array[index]}}text>
<text>▼text>
picker>
view>
<view class="level input-box">
<icon class="input-icon" type="search" size="16">icon>
<input placeholder="请输入{{array[index]}}名称"/>
view>
<view class="button-box">
<view>搜索view>
view>
view>
<view class="level">
<view class="left-box">
<scroll-view scroll-y="true" style="height: {{useHeight*0.91}}px;">
<block wx:for="{{leftList}}" wx:key="item">
<view
bindtap="bindSelectLeft"
data-id="{{item.id}}"
class="left-text {{current==item.id?'yes':'no'}}">{{item.text}}view>
block>
scroll-view>
view>
<view class="right-box">
<scroll-view scroll-y="{{scroll}}" style="height: {{useHeight*0.85}}px;">
<view wx:if="{{rightList.length>0}}">
<block wx:for="{{rightList}}" wx:key="item">
<view class="right-text">
<label class="level">
<view class="right-value">{{item.text}}view>
<checkbox class="check-box" value="{{item.code}}" checked="true"/>
label>
view>
block>
view>
<view class="not-data" wx:else>
<text>暂无数据！text>
view>
scroll-view>
<view class="level">
<view class="btn btn-no">取消view>
<view class="btn btn-yes">确定view>
view>
view>
view>
4.wxss代码：
page{
background-color: white;
}
/* 水平居中摆放（行内元素） */
.level{
display: flex;
flex-direction: row;
align-items: center;
}
/* 搜索 */
.search-box{
padding-left: 15rpx;
padding-right: 15rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.down-box{
width: 15%;
border: 1rpx solid #f1f1f1;
border-radius: 10rpx;
font-size: 32rpx;
padding: 10rpx 15rpx;
color: gray;
}
.input-box{
width: 70%;
font-size: 30rpx;
background-color: #f1f1f1;
margin-left: 10rpx;
border-radius: 10rpx;
padding: 10rpx 15rpx;
}
.input-icon{
padding: 0 5rpx;
}
.button-box{
width: 15%;
font-size: 32rpx;
color: #0099ff;
text-align: center;
}
/* 左侧内容 */
.yes{
background-color: white;
border-left: 10rpx solid #0099ff;
border-top-left-radius: 10rpx;
border-bottom-left-radius: 10rpx;
}
.no{
border-left: 10rpx solid transparent;
}
.left-box{
width: 30%;
background-color: #f1f1f1;
text-align: center;
font-size: 32rpx;
}
.left-text{
border-bottom: 1rpx solid white;
padding: 30rpx 10rpx;
}
/* 右侧内容 */
.right-box{
width: 70%;
margin: 0rpx 10rpx;
color: rgb(43, 38, 38);
}
.right-text{
font-size: 31rpx;
padding: 30rpx 10rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.right-value{
flex: 1;
}
.check-box{
flex: 1;
text-align: right;
zoom: .6;
}
/* 确定取消 */
.btn-box{
justify-content: center;
}
.btn{
flex: 1;
padding: 10rpx 15rpx;
border-radius: 10rpx;
font-size: 32rpx;
text-align: center;
margin: 15rpx 15rpx 0rpx 15rpx;
}
.btn-no{
color: #0099ff;
background-color: #dddddd;
}
.btn-yes{
color: white;
background-color: #0099ff;
}
/* 无数据显示 */
.not-data{
display: flex;
justify-content: center;
font-size: 32rpx;
color: gray;
margin-top: 50%;
}