小程序制作分类可滚动区域 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: [