scroll-view组件横向滚动,设置固定宽度,设置justify-content: center;之后,最左侧的view会少一部分。
页面是Component构造器写的。
< scroll-view id = "scroll-view" class = "menus" scroll-x = "{{true}}" enable-flex = "{{true}}" scroll-with-animation = "{{true}}" scroll-left = "{{scrollViewLeft}}" > < view id = "menus-item-{{menuIndex}}" class = "menus-item" wx:for = "{{list}}" wx:for-item = "menuItem" wx:for-index = "menuIndex" data-index = "{{menuIndex}}" bindtap = "menuItemClickEvent" > < view class = "menus-item-line" wx:if = "{{menuIndex === currentIndex}}" ></ view > < view class = "menus-item-text" >{{menuItem.text}}</ view > < view class = "menus-item-ball{{menuIndex === currentIndex ? ' menus-item-ball-current' : ''}}" ></ view > </ view > </ scroll-view > |
page { width : 100% ; background-color : #3c4866 ; } view { margin : 0 ; padding : 0 ; position : relative ; line-height : 0 ; } .menus { width : calc( 100% - 120 rpx - 70 rpx - 90 rpx); height : calc( 38 rpx + 44 rpx); display : flex; flex- direction : row; justify- content : center ; margin : 0 auto ; } .menus-item { height : 100% ; flex-shrink: 0 ; width : fit-content; } .menus-item-line { position : absolute ; width : 100% ; height : 8 rpx; left : 0 ; top : calc( 50% - 4 rpx); border-radius: 4 rpx; background-color : #f85151 ; } .menus-item-text { font-family : PingFangSC-Regular; text-align : center ; font-size : 19 rpx; color : #dce6ff ; line-height : 1 ; padding : 0 10 rpx; min-width : 80 rpx; } .menus-item-ball { width : 22 rpx; height : 22 rpx; border-radius: 11 rpx; background-color : #959cac ; position : absolute ; left : calc( 50% - 11 rpx); top : calc( 50% - 11 rpx); } .menus-item-ball-current { background-color : #f85151 ; } |
样子如图:
代码片段:
https://developers.weixin.qq.com/s/jczRb0mw7Cb4
请问,这应该如何解决?
(PS. 论坛的插入代码真垃圾)
.menus 去掉 justify-content: center;
看看这个 代码片段 吧