Scroll-view

最近在开发uniapp的时候，遇见了一个需求，由于缺乏uniapp经验，所以遇到的时候也是手足无措，需求如下：

 之前也就是用uni完成一些逻辑什么的，但是像这种需要用到uni提供的方法时，确实是一时候摸不到头脑了，那么下面我就为大家说一下我的经验或者说我踩的坑

scroll-view | uni-app官网

 我刚开始看官网的时候，开到了这个我还以为找到了解药。但是我把代码一复制进去，各类的报错啊，以及样式上的问题，把上面的方法代码引入进去不行，改了样式还不行，经过很多次调样式啊，加方法，还是不行。

于是，我就只复制

<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
			<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
			<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>

这一段，然后写进去自己的内容，唉，大致的样式是有了。符合我现在遇到的需求，但是上面有自带的样式啊，以及绑定的事件啊，还是需要一些改变的。

 scroll-left="120"

这个是图片向左120个像素

 scroll-x="true"

X轴滚动，这个不能删除

@scroll="scroll"

绑定事件，因为我只需要展示图片，所以我是把这个删除了

class="scroll-view_H"

这个样式也是必须得加的，不然图片是滑动不了

以下是我的代码，大家可以参考一下：

<scroll-view class="scroll-view_H" scroll-x="true">
			<image src="../../static/shopSupper.png" mode="" style="width: 304rpx;height: 154rpx;margin-left: 24rpx;">
			</image>
			<image src="../../static/gameSupper.png" mode="" style="width: 304rpx;height: 154rpx;margin-left: 12rpx;"
				@click="taskArea(1)"></image>
			<image src="../../static/studentSupper.png" style="width: 304rpx;height: 154rpx;margin-left: 12rpx;margin-right: 28rpx;"></image>
</scroll-view>

   .newheadimg {
		width: 244rpx;
		height: 168rpx;
		bottom: 208rpx;
		left: 506rpx;
		z-index: 1;
		position: fixed;
	}

以此，就可以实现图片滚动了。

还有就是大家注意距离。不然页面很容易超出限制