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、滾動區域里的每一個子元素設置為行內塊元素
          width: 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;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}

注意：
iOS 13 以下的系統，當滾動區域設置了-webkit-overflow-scrolling: touch;時（必須設置，否者幾乎無法滾動），::-webkit-scrollbar 相關屬性會失效，iOS 13 已經修復了此Bug。