uni

2023-03-21 12:12| 来源: 网络整理| 查看: 265

横向滚动不生效：不生效是因为少了以下两行代码，添加上即可。。。 .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;语句即可 //如：在这个元素上添加vertical-align:top语句。。。。。。

前：后：

横向滚动有滚动条遮挡，导致用户点击内容区域会点击到滚动条，导致点击体验不好的问题（适用于内容仅为文字的横向滚动，如下图）最外层滚动区域设置一个高度,内容部分也给个小一些的高度即可。 .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-into-view为需要定位的元素的id 第{{item.svnumber}}集：{{item.vtitle}}

【本文地址】

uni

uni

今日新闻

推荐新闻