微信小程序滚动失败的完美解决方案-x

无效滚动-x

在微信小程序的文档中，使用scroll-view标签，然后设置一个scroll-x来实现元素，元素水平排列，可以左右滑动。

但是，在实际开发中，就没有那么简单了。粘贴一些wxml和wxss代码…

！-横向滚动商品-scroll-view class=' scroll-box ' scroll-x view class=' box ' view class=' box-HD ' image src=' https://ss2。百度。com/-vo3dSag _ xi4khgko9 wtanfhy/image/h=300/sign=3ab 7 C3 C9 C4 FCC 3 ABC 0 cf 33 a 244 d6b 7/cef C1 e 178 a 82 b 90137378 CD 87 F8 da 973812 ef 47。jpg/'剩余09:43:21/view/view/view class=' box-img ' image src=' https://ss0。百度。com/7po 3d sag _ xi4khgko9 wtanfhy/image/h=300/sign=d 369d 78d 98 eef 01 f 52141 e C5 d 0 fc 99 e 0/C2 fdfc 039245d 688 B3 d 9 DC 4 da 8 c 27d 1ed 31 b 244加入/button/view/view class=' box ' view class=' box-HD ' image src=' https://ss2。百度。com/-vo3dSag _ xi4khgko9 wtanfhy/image/h=300/sign=3 ab 7 C3 C9 C4 FCC 3 ce ABC 0 cf 33 a 244 d6b 7/cef C1 e 178 a 82 b 90137378 CD 87 F8 da 9773812 ef 47。jpg '/图像视图类=' info '剩余09:43:21/view/view/view class=' box-img ' image src=' https://ss0。百度。com/7po 3d sag _ xi4khgko9 wtanfhy/image/h=300/sign=d 369d 78d 98 eef 01 f 52141 e C5 d 0 fc 99 e 0/C2 fdfc 039245d 688 B3 d 9 DC 4 da 8 c 27d 1ed 31 b 244加入/button/view/view class=' box ' view class=' box-HD ' image src=' https://ss2。百度。com/-vo3dSag _ xi4khgko9 wtanfhy/image/h=300/sign=3 ab 7 C3 C9 C4 FCC 3 ce ABC 0 cf 33 a 244 d6b 7/cef C1 e 178 a 82 b 90137378 CD 87 F8 da 9773812 ef 47。jpg '/图像视图类=' info '剩余09:43:21/view/view/view class=' box-img ' image src=' https://ss0。百度。com/7po 3d sag _ xi4khgko9 wtanfhy/image/h=300/sign=d 369d 78d 98 eef 01 f 52141 e C5 d 0 fc 99 e 0/C2 fdfc 039245d 688 B3 d 9 DC 4 da 8 c 27d 1ed 31 b 244按钮加入/button/view/view class=' box ' view class=' box-HD ' image src=' https://ss2。百度。com/-vo3dSag _ xi4khgko9 wtanfhy/image/h=300/sign=3 ab 7 C3 C9 C4 FCC 3 ce ABC 0 cf 33 a 244 d6b 7/cef C1 e 178 a 82 b 90137378 CD 87 F8 da 9773812 ef 47。jpg '/图像视图类=' info '剩余09:43:21/view/view/view class=' box-img ' image src=' https://ss0。百度。com/7po 3d sag _ xi4khgko9 wtanfhy/image/h=300/sign=d 369d 78d 98 eef 01 f 52141 e C5 d 0 fc 99 e 0/C2 fdfc 039245d 688 B3 d 9 DC 4 da 8 c 27d 1ed 31 b 244加入/按钮/视图/视图/滚动视图。滚动框{ margin-top : 33r px；填充-底部： 40 rpx}.滚动框。左侧：第一个子级{左边距： 32 rpx}.滚动框盒子{宽度： 296 rpxmargin-右侧： 32 rpx}.滚动框。盒子box-HD { display : flex；align-items:居中；}.滚动框。盒子高清机顶盒图像{ width : 64 rpx h8 : 64 rpx边界半径： 50%;右边距： 15 rpx}.滚动框。盒子。高清电视。信息{ display : flex flex-direction :柱；}.滚动框。盒子。高清电视。信息。名称{ font-size : 28 rpx颜色： # 333线高： 1;填充-底部： 10 rpx}.滚动框。盒子。高清电视。信息时间{ font-size : 22 rpx颜色： # 999线高： 1;}.滚动框。盒子box-img { margin-top : 16 rpx；}.滚动框。盒子盒子-img图像{ width : 296 rpx h8 : 222 rpx border-radius : 15 rpx；}.滚动框。盒子box-extra { display : flex；正义-内容：空格；}.滚动框。盒子。额外的盒子。价格{ font-size : 32 rpxcolor: # f15733}。滚动框。盒子盒子额外按钮{ width : 104 rpx h8 : 44 rpx背景色： # f 15733color : # fffmargin : 0；padd : 0；font-size : 26rpx线高： 44 rpx右边距： 8 rpx}

不能横向滚动

发现实际出来的效果是这样的。扎心了，老铁！

解决方案。

后来发现，只需在滚动视图中添加white-space : nowrap；将display:inline-block添加到滚动视图的子元素框中。

就像这样：滚动框{ white-space : nowrap；}.滚动框{display: inline-block}成功滚动

你可以非常愉快地横向滑动。完美解决了

技巧

无需为滚动视图设置display:flex这个属性，但是一定要加上这个。滚动框{ white-space : nowrap；}不然就会变成这样。

摘要

以上就是边肖推出的微信小程序scroll-x失败的完美解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！