scroll-x失效
使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动,按照文档写效果一直出不来,而且在scroll-view上添加flex都失效了
<scroll-view
scroll-x
class="tabs"
scroll-left="{{0}}"
scroll-with-animation
>
<view
wx:for="{{7}}"
class="tab-item {{currentTab==index?'active':''}}"
data-current="index"
bindtap="swichTab"
>{{item}}
</view>
</scroll-view>
解决办法
后来发现scroll-view不需要添加display:flex,只需要注意在scroll-view加上white-space: nowrap,在scroll-view的子元素添加display:inline-block即可;例:
.tabs{
white-space: nowrap;
}
.tab_item{
display:inline-block
}
本文详细介绍了在使用scroll-view标签时遇到的scroll-x失效问题及其解决方案。通过调整样式属性,如添加white-space:nowrap和display:inline-block,可以成功实现元素的横向排列及左右滑动效果。
1051

被折叠的 条评论
为什么被折叠?



