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,
})
}
}) |
请发表评论