小程序分类页面

样式（二级分类）

html

结构说明：list 列表分为 left 和 right 两块

<view class="category">
    <view class="search">
        <input type="text" name="search" bindconfirm='shop_search_function' confirm-type='search'
            placeholder="请输入关键词" />
        <image src="{{imgurl}}l_shousuo.png" />
    </view>

    <!-- tab切换 -->
    <view class="list flex">
        <view class="left">
            <view class="item flex {{i==index?'active':''}}" data-index="{{index}}" wx:for="{{list}}" wx:key="{{index}}"
                bindtap="clickTab">{{item.name}}</view>
        </view>
        <view class="right flex">
            <view class="item flex" wx:for='{{rightList.auctionMateriaList}}' wx:key="{{index}}">
                <image src="{{item.smallimage}}" />
                <text>{{item.name}}</text>
            </view>
        </view>
    </view>
</view>

less

样式说明：分类页面高度是100%，list列表给定高，然后overflow: auto；实现页面固定盒子滚动
页面所有盒子高度采用百分比

.category {
    height: 100%;
    border: 1rpx solid transparent;

    .search {
        height: 6%;
        margin: 1.5% 60rpx 1.5% 24rpx;
        position: relative;

        input {
            height: 100%;
            background: rgba(245, 245, 245, 1);
            border-radius: 32rpx;
            padding-left: 85rpx;
        }

        image {
            width: 44rpx;
            height: 44rpx;
            position: absolute;
            left: 30rpx;
            top: 10rpx;
        }
    }

    .list {
        border-top: 1rpx solid #F5F5F5;
        align-items: flex-start;
        height: 91%;
        padding-top: 10rpx;

        .left {
            width: 168rpx;
            background: rgba(245, 245, 245, 1);
            height: 100%;
            overflow: auto;

            .item {
                width: 100%;
                height: 130rpx;
                justify-content: space-around;
                position: relative;

                &.active {
                    background-color: #fff;
                    color: #FC5E62;

                    &:before {
                        content: '';
                        width: 6rpx;
                        height: 40rpx;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        margin-top: -20rpx;
                        background-color: #FC5E62;
                    }
                }
            }
        }

        .right {
            flex: 1;
            margin-top: 10rpx;
            height: 100%;
            overflow: auto;
            font-size: 24rpx;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            .item {
                flex-direction: column;
                width: 33%;
                margin-bottom: 60rpx;
                image {
                    width: 105rpx;
                    height: 110rpx;
                    margin-bottom: 35rpx;
                }
            }
        }

    }
}

js

逻辑说明：左右分开渲染
左边渲染list，右边单独定义一个变量rightList，默认初始值为list的第一项，即第一大类
点击左侧类别名称，获取索引，动态给右边列表赋值 list [index] , 实现点击左边渲染右边的效果

// pages/category/category.js
const app = getApp()
const request = require('../../utils/request.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgurl: app.globalData.pmhImgurl, //全局img路径
    list: [], //分类列表
    rightList: {}, //分类右边列表
    i: 0, //分类点击的分类索引
  },
  // 点击分类左侧，渲染右侧
  clickTab(e) {
    let index = e.currentTarget.dataset.index
    this.setData({
      i: index,
      rightList: this.data.list[index]
    })
  },
  // 键盘搜索功能
  shop_search_function: function (e) {
    var value = e.detail.value;
    console.log("------->" + value);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    request('classify/selectClassify').then(data => {
      console.log(data);
      this.setData({
        list: data,
        rightList: data[0]
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})