DDR爱好者之家 Design By 杰米
一、实践踩坑
项目使用mpvue开发
1.使用flex布局
// html大概长这样 <div class="worth-wraper"> <scroll-view scroll-x="true" scroll-left="0"> <div class="worth-list"> <div class="worth-item-img"> <img src="/UploadFiles/2021-04-02/brand1.png">// css相应就大概长这样 .worth-wraper{ margin-top: 60rpx; height: 560rpx; box-sizing: border-box; display: flex; width: 750rpx; overflow: hidden; font-size: 28rpx; color: #7a7269; line-height: 42rpx; .worth-list{ display: flex; margin-left: 30rpx; .worth-item-img{ flex: 1; margin-right: 20rpx; width: 290rpx; height: 560rpx; } img{ width: 290rpx; height: 560rpx; } .worth-item{ padding: 0 35rpx 0 40rpx; flex: 1; box-sizing: border-box; background: url("../../../static/images/index/worth-bg1.png") no-repeat; background-size: 100% 100%; width: 290rpx; height: 560rpx; margin-right: 20rpx; } } }ios没有问题,样式正常,然后到了安卓机上,却出现了横向滚动条.......然后各种找如何去除横向滚动条的方法....
二、隐藏滚动条
在网上搜了很多,都是说加上这段代码就可以:
/隐藏滚动条/ ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }或者有的人说这样子:
/隐藏滚动条/ ::-webkit-scrollbar{ display: none; }然而两种方法我都试过,然而在安卓机上并没什么鸟用。
后来看到有人这么说:
1.scroll-view 中的需要滑动的元素不可以用 float 浮动;
2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;
3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;
4.包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;
好像能行得通....不用flex,不用float
然后改写css代码
.worth-wraper{ margin-top: 60rpx; width: 750rpx; height: 560rpx; overflow: hidden; scroll-view{ width: 100%; white-space: nowrap; } .worth-list{ display: inline-block; margin-left: 30rpx; padding-bottom: 60rpx; //加个padding值,这样高度大于scroll-view外面包裹的元素 .worth-item-img{ margin-right: 20rpx; width: 290rpx; height: 560rpx; display: inline-block; } } }到这里,scroll-view安卓机上横向滚动条消失了,大概长这样:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]