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

古城微笑少年丶 2021-07-25 22:06 1576阅读 0赞

# 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][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]

截图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
分析效果图：

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;
    			}
    		}
    	}
    }

[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]: 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
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/b903bf14318e48eaa48954fc2039a0f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/679d7973482f4724bcce2b36310362c4.png