wxml:

<view class="classify">

<!--分类导航栏-->

<scroll-view class='left-navbar' scroll-y="true">

<view wx:for="{{navLeftItems}}" class="nav_left_items {{curNav == index? 'active' : ''}}" wx:key="key" bindtap="left" data-index="{{index}}">{{item.name}}

</view>

<view>其他分类</view>

</scroll-view>

<scroll-view id="right" scroll-y="true" scroll-top="{{scrollTop}}">

<!--顶部图片-->

<view class="goods-banner">

<image class="img-banner" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532341900&di=0f2fc8e00aba62424e315686b95cbc71&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016d865795e7010000018c1bda195b.jpg" mode="scaleToFill"></image>

</view>

<!--商品展示-->

<view class="goods-list">

<view wx:for='{{navRightItems[curIndex].sub}}' class="goods" wx:key="unique" bindtap="ToSearchResult" id="{{item.screenName}}">

<image class="img" wx:if='{{item.icon}}' src="{{item.icon}}"></image>

<text wx:if='{{item.name}}'>{{item.name}}</text>

</view>

</view>

</scroll-view>

</view>

wxcss:

/**分类栏**/

.classify {

/* margin-top: 100rpx; */

}

.left-navbar {

position: absolute;

left: 0;

width: 25%;

height: 100%;

background-color: #eee;

font-size: 15px;

}

.left-navbar view {

height: 80rpx;

line-height: 80rpx;

text-align: center;

}

.active {

background-color: #fff;

color: red;

font-size: 17px;

}

#right {

position: absolute;

right: 0;

width: 75%;

height: 100%;

}

.img-banner {

height: 150rpx;

width: 100%;

}

.goods-list {

display: flex;

flex-wrap: wrap;

margin-top: 30rpx;

}

.goods-title {

width: 100%;

font-size: 15px;

font-weight: bold;

padding-left: 10rpx;

}

.goods {

width: 150rpx;

font-size: 14px;

margin: 15rpx;

text-align: center;

}

.img {

width: 140rpx;

height: 140rpx;

}

js:

Page({

data: {

navLeftItems: [],

navRightItems: [],

curNav: 0,

curIndex: 0,

},

onLoad: function(options) {

var that = this;

wx.request({

url: 'http://119.29.207.185/api/Goods/getFactoryCate',

success: function(res) {

console.log(res,"数据")

that.setData({

navLeftItems: res.data.data,

navRightItems: res.data.data

})

}

})

},

// 左侧按钮

left: function(e) {

var that = this;

var index = e.currentTarget.dataset.index;

console.log(index, "左侧按钮")

that.setData({

curNav: index,

curIndex: index,

})

}

})