小程序中组件 scroll-view 横向不滑动??

项目开发中,除了上下滚动外,还大量的用到横向滚动的效果,在小程序中 scroll-view 组件就提供了这两种不同的滚动效果,但在使用时发现  scroll-view 设置横向滚动时没有效果。。。。你不觉得这很郁闷吗?

在scroll-view组件中:1、子元素不能使用float;2、将子元素的爸爸设置成display:flex;也是没有作用的;那么要怎么做呢??

别担心,召唤师已经来了:1、scroll-view中滑动子元素要设置display:inline-block;这样元素就能横向排布了;2、scroll-view的爸爸要有明确的宽度以及:overflow:hidden;white-space:nowrap;的样式

对于子元素中的文本:white-space:pre-wrap; 当文本超出父元素,让其换行;

召唤师:“怎么你还不清楚吗????好吧!!大招来也。。。。”

<scroll-view class="father" scroll-x="true">
    <view class="son" >我是谁</view>
    <view class="son" >我在哪</view>
    <view class="son" >我是召唤师</view>
    <view class="son" >我正在召唤师峡谷</view>
</scroll-view>
 
.father {
    width: 100%;
    height: 92rpx;
    background: pink;
    position: relative;
    margin: 0 0 20rpx;
    border-bottom: 1px solid #e5e5e5;
    overflow:hidden;
    white-space:nowrap;
}
.son{
    height: 92rpx;
    padding: 0 20rpx;
    line-height: 92rpx;
    font-size: 30rpx;
    display:inline-block
}

要注意:爸爸中:overflow:hidden;white-space:nowrap;的样式,以及儿子中display:inline-block;样式的设置。

召唤师:“技能冷却中,我先撤了!等我下一个大招!!!!!”

这是我的第一篇博客文章,欢迎留言!!有什么不对的也希望各位召唤师指正修改!!!

发布了4 篇原创文章 · 获赞 3 · 访问量 5354

猜你喜欢

转载自blog.csdn.net/objdreammylife/article/details/81408100
今日推荐