小程序制作分类可滚动区域 scroll-view

效果图:

classify.wxml

<view class='header'>
  <view class="search">
      <i-icon type="search" i-class='icon'  size="28" color="#959998"/>
  <text>搜索商品或粘贴淘宝标题</text>
  </view>
</view>


 <view class='main'>

  <view class='left'>
    <scroll-view scroll-y="true" style="height:{{main}}px" scroll-into-view="true" scroll-with-animation="true">
      <block  wx:for="{{cateItems}}" wx:for-list="item">
        <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>

      </block>
    </scroll-view>
    </view>
    
    
    <view class="nav_right">
    <!--如果有数据，才遍历项-->
    <scroll-view scroll-y="true"  style="height:{{main}}px" scroll-into-view="true" scroll-with-animation="true">
    <view wx:if="{{cateItems[curIndex].ishaveChild}}">
      <block wx:for="{{cateItems[curIndex].children}}">
        <view class="nav_right_items">
        <!--界面跳转 -->
          <navigator url="../../detail/detail}}">
            <image src="{{item.image}}"></image>
            <text>{{item.name}}</text>
          </navigator>
        </view>
      </block>
    </view>
    
    <!--如果无数据，则显示数据-->
    <view class="nodata_text" wx:else>该分类暂无数据</view>
    </scroll-view>
  </view>

 </view>

classify.js

// pages/class/class.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    main: 0,
    cateItems: [{
      
      cate_id: 1,
      cate_name: "女装",
      ishaveChild: true,
      children: [
        { 
            child_id: 1, 
            name: '洁面皂', 
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg" 
          }, { 
            child_id: 2, 
            name: '卸妆', 
            image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg" 
          }, { 
            child_id: 3, 
            name: '洁面乳', 
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg" 
          }, { 
            child_id: 4, 
            name: '面部祛角质', 
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg" 
            }
      ]
    }, {
        cate_id: 2,
        cate_name: "女鞋",
        ishaveChild: true,
        children: [
          {
            child_id: 1,
            name: '气垫bb',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
          }, {
            child_id: 2,
            name: '修容/高光',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
          }, {
            child_id: 3,
            name: '遮瑕',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
          }, {
            child_id: 4,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }
        ]
      }, {
        cate_id: 3,
        cate_name: "男装",
        ishaveChild: true,
        children: [
          {
            child_id: 1,
            name: '气垫bb',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
          }, {
            child_id: 2,
            name: '修容/高光',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
          }, {
            child_id: 3,
            name: '遮瑕',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
          }, {
            child_id: 4,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 5,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 6,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 7,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 8,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 9,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 10,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 11,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 12,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 13,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 14,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }, {
            child_id: 15,
            name: '腮红',
            image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
          }
        ]
      }, {
        cate_id: 4,
        cate_name: "彩妆",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 5,
        cate_name: "食品",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 6,
        cate_name: "洗护",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 7,
        cate_name: "运动",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 8,
        cate_name: "百货",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 9,
        cate_name: "箱包",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 10,
        cate_name: "内衣",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 11,
        cate_name: "家电",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 12,
        cate_name: "家居",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 13,
        cate_name: "成人",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 14,
        cate_name: "数码",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 15,
        cate_name: "护肤",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 16,
        cate_name: "萌宠",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 17,
        cate_name: "配饰",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 18,
        cate_name: "男鞋",
        ishaveChild: false,
        children: []
      }, {
        cate_id: 19,
        cate_name: "母婴",
        ishaveChild: false,
        children: []
      }
    ],
    curNav: 1,
    curIndex: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    console.log('onLoad') 
    var that = this 
    // 获取系统信息 
    wx.getSystemInfo({ 
      success: function (res) { 
        console.log(res); 
        // 可使用窗口宽度、高度 
        console.log('height=' + res.windowHeight);
        console.log('width=' + res.windowWidth); 
        // 计算主体部分高度,单位为px 
        that.setData({ 
          // second部分高度 = 利用窗口可使用高度 - first部分高度（这里的高度单位为px，所有利用比例将100rpx转换为px） 
          main: res.windowHeight - res.windowWidth/750*100 
          }) 
        } 
      })

  
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
 //事件处理函数  
 switchRightTab: function (e) { 
   // 获取item项的id，和数组的下标值  
   let id = e.target.dataset.id, 
   index = parseInt(e.target.dataset.index); 
   // 把点击到的某一项，设为当前index
   this.setData({ 
     curNav: id, 
     curIndex: index 
     }) 
  },

  //跳转详情界面
  particulars: function (e) {

  }
})

classify.wxss

.page{
  background: #e9edf3;
}
.header{
  color: #959998;
  height: 100rpx;
  display: flex;
  z-index: 180;
  top: 0px;
  background: #fff;
  align-items: center;
  border-bottom:1px solid #F0F4F3; 
  border-top:1px solid #F0F4F3; 
}
.search{

  width: 90%;
  height: 60rpx;
  border-radius:20px;
  margin:20rpx auto; 
  font-size: 14px;
  line-height: 60rpx;
  text-align: center;
  color: #252525;
  background: #EFF3F2;
 
}

.search text{
  color: #959998;
  font-family: monospace;
  text-align: center;
  line-height: 46rpx;
    
}
.search image{
  width: 46rpx;
  height: 46rpx;
 
}
.main{
  display: flex;
}
.left{
  width: 25%
}
.left view{
  text-align: center;
  line-height: 100rpx;
  background: #F4F8F7;
}
.left .active{
  background: #fff;
}
.active{
  color: #F7262F;
}
.nav_right{
  width: 75%; 
}
 .nav_right .nav_right_items{  
  /*浮动向左*/  
  float: left;  
  /*每个item设置宽度是33.33%*/  
  width: 33.33%;  
  height: 120px;  
  text-align: center;  
} 
.nav_right .nav_right_items image{  
  /*被图片设置宽高*/  
  width: 60px;  
  height: 60px;  
  margin-top: 15px;  
} .nav_right .nav_right_items text{  
  /*给text设成块级元素*/  
  display: block;  
  margin-top: 15px;  
  font-size: 14px;  
  color: black;
  /*设置文字溢出部分为...*/  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nodata_text {
  color: black;
  font-size: 14px;  
  text-align: center;
  margin-top: 200rpx; 
} 
//去掉滚动阴影效果
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

/*左侧栏主盒子*/ .nav_left{  
  /*设置行内块级元素（没使用定位）*/  
  display: inline-block;  
  width: 25%;  
  height: 100%;  
  /*主盒子设置背景色为灰色*/  
  background: #f5f5f5;  
  text-align: center;  
} 
/*左侧栏list的item*/ 
.nav_left .nav_left_items{  
  /*每个高30px*/  
  height: 40px;  
  /*垂直居中*/  
  line-height: 40px;  
  /*再设上下padding增加高度，总高42px*/  
  padding: 6px 0;  
  /*只设下边线*/  
  border-bottom: 1px solid #dedede;  
  /*文字14px*/  
  font-size: 14px; 
} 

/*左侧栏list的item被选中时*/  
.nav_left .nav_left_items.active{  
  /*背景色变成白色*/  
  background: #fff;  
  color: #f0145a; 
}