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。
横向滚动定位到某一元素，使用scroll-into-view
应用场景：视频选集选中第十集，页面加载完毕后，横向滚动自动滚动到第十集的位置
<scroll-view class="series-scroll-view" scroll-x="true" scroll-into-view="scrollIntoHere"> //设置scroll-into-view为需要定位的元素的id
<view
:class="activedId!=item.svnumber?'every-video':'every-video-actived'"
:id="activedId==item.svnumber?'scrollIntoHere':`every-video${index}`" //设置需要定位的元素的id，如scrollIntoHere
v-for="(item,index) in videoList"
:key="index"
@tap="selectVideo"
:data-vid="item.vid"
>
<view class="video-title">第{{item.svnumber}}集：{{item.vtitle}}</view>
</view>
</scroll-view>
