uniapp之scrollview图片区域滚动（横向滚动）

scrollview仅适用于区域（局部）滚动，如果用于页面滚动和长列表，则有性能问题。

<scroll-view class="scrollView"	 scroll-x="true">
	<view >
		<shopListItem class=" recomItem " :commodityList="commodityList"
		 wrap="no-wrap" width="160rpx" height="160rpx"></shopListItem>			
	</view>
</scroll-view>

1、 scroll-x=“true” 是设置元素横向滚动的， scroll-y="true"则是竖向滚动

2、横向滚动时，必须给scroll-view设置white-space：nowrap不能换行；竖向滚动时，一定要设置scroll-view的固定高度。

.scrollView{	
		white-space: nowrap;
		width:100%
	    height:83rpx
	}

3、一定要设置scroll-view的高度与宽度，和其中shopListItem的转化为行内块(便于滑动和排列一行)，调节合适间距。否则会出现如下图，显示不全的问题。

.scrollView {
	white-space: nowrap;
	width: 100%;
	height: 88rpx;
	
	.recomItem  {
		display: inline-block;
		margin: 33rpx 22rpx;
	}
}

4、去掉scrollview中下边的滚动条，注意：官网中自带的show-scrollbar本来就设置的是false不显示，但还是显示。需要找到App.vue全局文件。

输入以下代码：

/* 去除scrollview滚动条 不支持nvue页面 */
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}