周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 布响丸啦
  3. 正文

记录微信小程序scroll-view的一次问题

2022-08-18 62点热度 0人点赞 0条评论

问题描述

通过微信小程序的视图容器scroll-view实现内容横向滚动、

image-20220818115720655

使用flex布局之后想要实现横向排列,但是无法达到效果,是因为没有启用flexbox布局

enable-flex boolean 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其子节点。

再添加scroll-x属性,可以实现横向滚动

<scroll-view class="recommendScroll" enable-flex scroll-x>
  <view class="item" wx:for="{{recommendList}}" wx:key="id">
    <image src="{{item.picUrl}}"></image>
    <text>{{item.name}}</text>
  </view>
</scroll-view>

但是并没有达到预期效果,发现整个滚动区域的高度比内容高度大的多,是因为横向排列之后,区域高度仍然是纵向高度

image-20220818120216714

解决方法

手动为滚动区域添加高度可以解决问题

image-20220818120613036

标签: scroll-view 小程序
最后更新:2022-08-18

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复
目录
  • 问题描述
  • 解决方法

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号