scroll-view小程序侧边栏，点击加载右侧商品
<!-- // 滚动条 -->
<view class='category_list'>
<!-- // 左侧 -->
<view class='r_first_category' >
<scroll-view lower-threshold='8' bindscrolltolower="getnextgoods" //通过给scroll-view设置 lower-threshold='8' bindscrolltolower="getnextgoods"触底距离 和触底的滚动事件 实现滚动加载
scroll-y ><view class="r_item {{itemIndex === index ? 'item_active':'' }}" wx:for="{{category_list}}" wx:key='index' data- bindtap='navChange'>
{{item.short_name =='' ? item.category_name:item.short_name}}
</view>
</scroll-view>
</view>
<!-- // 右侧 写到右侧样式 -->
<view >
<scroll-view scroll-y >
<view class='list' wx:for="{{goods_list}}" wx:key='index' wx:for-item="goodItem">
<view class='item'>
<view class='img'>
<image wx:if='{{goodItem.img_list[0]}}' src='{{goodItem.img_list[0]}}'></image>
<image wx:else src='../../../imgs/nopic.jpg'></image>
</view>
<view class='info'>
<view class='good_name'>{{goodItem.goods_name}}</view>
<view class='stock_num' wx:if="{{buy_type == 'purchase'}}">
平台库存：{{goodItem.total_stock}}
</view>
<view class='stock_num' wx:if="{{buy_type == 'localgoodssale'}}">
库存：{{goodItem.total_stock}}
</view>
<view class='cell_price'>
<view class='price' wx:if="{{buy_type == 'purchase'}}">
平台采购价：¥ {{goodItem.min_price}}
</view>
<view class='price' wx:if="{{buy_type == 'localgoodssale'}}">
零售价：¥ {{goodItem.price}}
</view>
<van-icon name="add" color='#1989fa' size='40rpx' data-gooditem='{{goodItem}}' bindtap='goodsSkuShowFun' />
</view>
</view>
</view>
</view>
<view class="no_more {{cart_goods_num > 0? 'margin_top':'' }}">
<span>没有更多了</span>
</view>
</scroll-view>
</view>
</view>
样式
.category_list {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: relative;
width: 100%;
height: 100%;
}
.r_first_category {
background: #f8f8f8;
height: 100%;
width: 25%;
display: inline-block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.r_first_category .r_item {
height: 92rpx;
color: rgba(0, 0, 0, 0.767);
min-height: 92rpx;
text-align: center;
line-height: 46rpx;
padding: 0 5rpx;
display: flex;
align-items: center;
justify-content: center;
}
.r_first_category .item_active {
background-color: #fff;
color: #ff454e;
}
.list {
padding: 10rpx;
}
.list .item {
display: flex;
}
.list .item .img {
width: 180rpx;
height: 180rpx;
overflow: hidden;
background: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
}
.list .item .img image {
width: 100%;
height: 100%;
}
.list .item .info {
margin-left: 20rpx;
flex: 1;
position: relative;
}
.list .item .info .good_name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 80rpx;
}
.list .item .info .stock_num {
font-size: 24rpx;
color: #323233;
}
.list .item .info .cell_price {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
width: 100%;
}
.list .item .info .cell_price .price {
color: #f44;
}
.no_more {
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 30rpx 150rpx 30rpx;
color: #999;
}
方法
onLoad() {
//获取滚动条可滚动高度
wx.getSystemInfo({
success: (res) => {
this.setData({
// clientHeight: res.windowHeight - res.windowWidth / 750 * 96
clientHeight: res.windowHeight - 210
});
}
});