问题描述
先看效果图。
每个商品通过后台接口查询出来，前端v-for进行显示，所以这块我要添加一个滚动条，我不确定有多少个商品。
解决方案
实现思路：div设置高度为1000rpx（我这边是举例，根据实际场景去设置高度），我每个商品的高度是210rpx，如果我这边有10条数据要显示的话，就已滚动条的形式往下滑动展示，上源码！
在v-for的外层添加一个view（我这边是写的微信小程序，用的是view，如果你的事PC用div就可以），设置固定高度为1000rpx，
设置overflow-y:autoy轴滚动条也就是竖向的，如果你想设置横向的就使用overflow-x:auto，如果你想设置横向和竖向的就使用overflow:auto，设置高之后超出的数据就会已滚动条的形式进行显示。
<view style="height: 1000rpx;overflow-y:auto"> <view v-for="item in shangpin"> <view class="shangpin-view" > <view class="shangpintupian-view"> <image :src="item.listPicUrl" style="height: 100%;width: 100%;"></image> </view> <view class="shangpinmingcheng-view"> <view class="shangpinmingcheng-fontstyle-view"> {{item.name.length>30?item.name.substring(0, 25) + '...':item.name}} </view> <view style="color: #999999;"> {{item.sales==undefined?'-':item.sales}}人兑换 </view> <view class="shangpin-view-one"> <view class="shangpinmingcheng-jiage-view">￥{{item.currency}}</view> <view class="shangpinmingcheng-qugoumai-view" @click="pathSpUrl(item.id)">去购买</view> </view> </view> </view> <view style="height: 20rpx;"></view> </view> </view>
