uni-app实现纵向滑动和横向滑动

 <text>纵向滚动</text>
      <view>
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
          <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
          <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
        </scroll-view>
      </view>

	 <text>横向滚动</text>
     <view>
        <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>
      </view>
      
   //scroll-left是默认滑动多少 一般设为0
   <script>
   export default {
		  data() {
		    return {
		      scrollTop: 0,
		      old: {
		        scrollTop: 0
		      }
		    };
		  },
		  methods: {
		    upper: function(e) {
		      console.log(e);
		    },
		    lower: function(e) {
		      console.log(e);
		    },
		    scroll: function(e) {
		      console.log(e);
		      this.old.scrollTop = e.detail.scrollTop;
		    },
		    goTop: function(e) {
		      this.scrollTop = this.old.scrollTop;
		      this.$nextTick(function() {
		        this.scrollTop = 0;
		      });
		      uni.showToast({
		        icon: "none",
		        title: "纵向滚动 scrollTop 值已被修改为 0"
		      });
		    }
		  }
		};
   </script>
   <style>
	   // 上下滑动
	.scroll-Y {
	  height: 400rpx;
	  }
	  .scroll-view-item {
	    height: 400rpx;
	    width: 100%;
	  }
	   // 左右滑动
	.scroll-view_H {
		/* height: 400rpx; */
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		/* border: 1px #ccc solid; */
	}

	.scroll-view-item_H {
		/* height: 300rpx; */
		/* width: 40%; */
		/* margin-right: 20rpx; */
		display: inline-block;
		vertical-align: top;
	}
</style>