uni-app使用scroll-view组件横向滚动的一些问题

横向滚动不生效：不生效是因为少了以下两行代码，添加上即可

<scroll-view class="scroll-view-content" scroll-x="true">
    <view v-for="(item,index) in videoInfo" :key="index" class="every-scroll-item">
	。。。						
    </view>
</scroll-view>

.scroll-view-content{
    white-space: nowrap;  //1、scroll-view元素添加此行代码，意思是规定段落中的文本不进行换行
    .every-scroll-item{
          display: inline-block;  //2、滚动区域里的每一个子元素设置为行内块元素
           300rpx;
          height: 80rpx;
          background-color: #ccc;
          margin-right: 30rpx;
    }
}

scroll-view的子标签里使用多行省略功能不生效

之前在scroll-view里设置了white-space: nowrap;即强制不换行功能，这个css语句会作用于当前标签的所有子标签。这会导致子标签里设置多行省略功能失效。
则若在scroll-view的子标签里使用多行省略号展示的功能时，应在当前子标签添加white-space: normal;

white-space: normal;  //加上这个语句
display: -webkit-box;   
-webkit-line-clamp: 2; 
/* ! autoprefixer: off */
-webkit-box-orient: vertical; 
/* autoprefixer: on */   
overflow: hidden;   
text-overflow: ellipsis; 

前：

后：

scroll-view滚动元素不对齐的问题

在scroll-view下的每个滚动元素上添加vertical-align: top;语句即可
<scroll-view class="article-scroll-view" scroll-x="true">
    <view class="every-article-item" v-for="(item,index) in articleInfo" :key="index">   //如：在这个元素上添加vertical-align:top语句
      。。。。。。
    </view>
</view>

前：

后：

横向滚动有滚动条遮挡，导致用户点击内容区域会点击到滚动条，导致点击体验不好的问题（适用于内容仅为文字的横向滚动，如下图）

最外层滚动区域设置一个高度,内容部分也给个小一些的高度即可。
.select-options-content{
					.options-scroll-view{
						white-space: nowrap;
						height: 76rpx;   //滚动区域给一个高度
						.every-option-item{
							display: inline-block;
							margin: 0 30rpx;
							font-size: 32rpx;
							height: 52rpx;  //内容部分给一个高度（要小于滚动区域高度）
							line-height: 52rpx;  //给一个行高使得内容部分文字居中
							color: #333;
						}
						.every-option-selected{
							display: inline-block;
							margin: 0 30rpx;
							font-size: 32rpx;
							height: 52rpx;
							line-height: 52rpx;
							color: #114b9b;
							border-bottom: 2px solid #0169b1;
						}
					}
				}

当然，也可以直接隐藏滚动条，但是可能会伴随一些兼容问题，具体见

https://ask.dcloud.net.cn/article/36090

App.vue 增加如下样式可以去除 scroll-view 组件的滚动条（不支持nvue页面）

::-webkit-scrollbar {  
    display: none;  
     0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}

注意：
iOS 13 以下的系统，当滚动区域设置了-webkit-overflow-scrolling: touch;时（必须设置，否者几乎无法滚动），::-webkit-scrollbar 相关属性会失效，iOS 13 已经修复了此Bug。