微信小程序scroll-view 左右滑动效果
页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < view class="scroll_box"> < scroll-view scroll-x> < view class="item_list" > 1 </ view > < view class="item_list" > 2 </ view > < view class="item_list" > 3 </ view > < view class="item_list" > 4 </ view > < view class="item_list" > 5 </ view > < view class="item_list" > 6 </ view > </ scroll-view > </ view > |
样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .scroll_box{ width : 100% ; height : 307 rpx; overflow : hidden ; padding : 20 rpx; background : #fff ; white-space : nowrap ; border : 1px solid red ; } .scroll_box scroll-view{ height : 100% ; width : auto ; overflow : hidden ; } .item_list{ width : 160 rpx; height : 100% ; margin-right : 23 rpx; display : inline- block ; margin-left : 10px ; background-color : blue ; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步