小程序组件 scroll-view

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现:

scroll-view 中的需要滑动的元素不可以用 float 浮动;
scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;
scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;
包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;
<view class="scroll_box">
<scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">
<view class="item_list" wx:for="{{list}}">
<image src="../../images/head.jpg" class="item_book_img" mode="aspectFill"></image>
<view class="item_book_text">测试数据</view>
</view>
</scroll-view>
</view>
.scroll_box{
width: 100%;
height: 307rpx;
overflow: hidden;
padding: 20rpx;
background: #fff;
white-space: nowrap;
}
.item_list{
width: 160rpx;
height: auto;
margin-right: 23rpx;
display: inline-block;
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • scroll-view:可滚动视图区域。 纵向滚动 1、需要打开是否允许纵向滚动。 scroll-y 注:只要写上...
    肉肉要次肉阅读 5,036评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 5,004评论 0 1
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 10,330评论 0 7
  • 黑猫阅读 Halloween Horror 生词: fair costume Hispano latern jac...
    大红花酱阅读 3,043评论 0 0

友情链接更多精彩内容