微信小程序分类界面显示、左树右表形式

蒜鸟小窝

已于 2023-05-24 16:51:45 修改

阅读量2.9k

点赞数 20

分类专栏：微信小程序文章标签：微信小程序小程序前端

于 2022-06-24 13:47:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45465881/article/details/125443594

版权

微信小程序专栏收录该内容

33 篇文章

订阅专栏

这是一个智能医疗系统的界面设计实例，展示了医院科室选择的功能。用户可以通过顶部下拉框选择搜索类型，左右两侧支持懒加载，右侧科室列表会根据左侧医院选择动态更新。界面采用自适应布局，能根据设备高度自动调整，确保在不同设备上的良好兼容性。同时，用户可以多选科室，提供更好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要以医院科室为示例进行编写，左边为医院列表，右侧为每个医院下对应的具体科室列表，左右两侧均支持添加懒加载功能；顶部下拉框选择，则可实现根据不同的选择，改变搜索框需要搜索的内容；此外，支持选择多个科室。
此界面的数据显示完全支持自适应，均是经过设备高度自动换算，增强界面的兼容性。可根据自己需求随意修改，当然也存在很多不足的地方，欢迎指正批评，多谢！
别忘了点赞收藏哦！

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%;
}