uniapp scroll-view组件左右滑动效果展示

scroll-view组件左右滑动

效果要求：
在页面中，组件一开始在中间靠右侧部分，手指/鼠标滑动时，组件会过渡到左侧，如果在组件内容滑动到左侧时，组件会缩回到右侧。很乱是吧？看下方链接的视频就可以明确效果了。

scroll-view组件左右滑动效果视频链接：
https://58d.oss-cn-hangzhou.aliyuncs.com/goods/uniapp%20scroll-view%E7%BB%84%E4%BB%B6%E6%BB%91%E5%8A%A8%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA_1599622845000.mp4

截图如下：

分析效果图：

1. 一开始，组件在右侧，可以通过给组件一个margin-left来实现。
2. scroll-view组件中，横向滚动的属性是：scroll-x
3. @scrolltoupper=“scrolltoupper” 监听scroll-view组件滑动到左边或者上面时触发的函数
4. @scrolltolower=“scrolltolower” 监听scroll-view组件滑动到右边或者下面时触发的函数
5. scroll-with-animation=“true” 滑动的时候可以有动画过渡的可以设置这个属性
6. 因为效果图中展示的是上下两行的图片信息，所以可以在scroll-view中设置两个view组件来作为子元素
   具体实现效果的代码如下：

<scroll-view class="list-content" :style="{marginLeft:leftNum+'px'}" scroll-x="true"
scroll-left="10" @scrolltoupper="scrolltoupper" :upper-threshold="0" @scrolltolower="scrolltolower" scroll-with-animation="true">
	<view class="item-content">
		<view class="item" v-for="item in goodsList.slice(0,4)" :key="item.id" @click="navToDetailPage(item)">
			<image :src="item.itemImage" mode="widthFix"></image>
			<view class="text">
				<view>{
     {
     item.itemName}}</view>
				<view>￥{
     {
     item.retailPrice}}</view>
			</view>
		</view>
	</view>
	<view class="item-content">
		<view class="item" v-for="item2 in goodsList.slice(4,8)" :key="item2.id" @click="navToDetailPage(item2)">
			<image :src="item2.itemImage" mode="widthFix"></image>
			<view class="text">
				<view>{
     {
     item2.itemName}}</view>
				<view>￥{
     {
     item2.retailPrice}}</view>
			</view>
		</view>
	</view>
</scroll-view>

methods部分的代码：

scrolltoupper(e) {
     
	this.leftNum = 150;
},
scrolltolower(e){
     
	this.leftNum = 0;
}

css代码部分：

.list-content {
     
	background: #fff;
	width: 660upx;
	height: 100%;
	border-radius: 10upx;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	// flex-wrap: wrap;
	padding: 20upx;
	box-sizing: border-box;
	white-space: nowrap;  //  这个代码比较重要，样式可以使得scroll-view能够不换行展示
	box-shadow: 0 0 8upx 8upx rgba(0,0,0,.1);
	margin-left:300upx; //这个样式可以将组件初始位置设置为靠右的形式
	transition: All 1s ease-in-out;
	-webkit-transition: All 1s ease-in-out;
	-moz-transition: All 1s ease-in-out;
	-o-transition: All 1s ease-in-out;
	overflow: auto;
	.item-content{
     
		height:50%;
		display: flex;
		justify-content: start;
		align-items: center;
	}
	.item {
     
		width: 170upx;
		height: 250upx;
		flex-shrink: 0;
		margin: 0 8upx;
		display: inline-block;
		overflow: hidden;
		&>image {
     
			width: 170upx;
			height: 221upx;
		}

		.text {
     
			width: 100%;
			height: 70upx;
			background: #fff;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding:0upx auto;
			view:first-child {
     
				width: 100%;
				text-overflow: ellipsis;
				color: #333333;
				font-size: 22upx;
				word-break: keep-all;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			view:last-child {
     
				color: #C90000;
				font-size: 24upx;
				font-family: DIN;
			}
		}
	}
}