uniapp组件scroll-view水平滑动

uniapp的scroll-view组件，配合white-space: nowrap和display: inline-block可实现水平滑动展示元素

        white-space: nowrap        内部元素不换行，一行显示

        display: inline-block        一行显示不换行，还可以指定宽高

代码

				
					"index">
						
							"../../static/temp/banner4.jpg" mode="widthFix">
							"title">{{item.title}}
							$ {{item.price}}
						
					
				
 
 
							.sv_view {
								white-space: nowrap;
								width: 100%;
								.sv_item {
									display: inline-block;
									width: 180rpx;
									margin-left: 25rpx;
									margin-right: 25rpx;
				
									view {
										display: flex;
										flex-direction: column;
										align-items: center;
									}
				
									image {
										width: 100%;
				
									}
				
									.title {
										margin-top: 5rpx;
										width: 100%;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										font-size: 26rpx;
										color: #909399;
									}
				
									.jiage {
										margin-top: 5rpx;
										color: #fa436a;
										font-size: 13rpx;
									}
								}
							}

效果：