css div添加滚动条（附加源码）

问题描述

先看效果图。
每个商品通过后台接口查询出来，前端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>