小程式分類頁面（左右滑動互不影響）
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,
})
}
})