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>