微信小程序scroll-x失效的完美解决方法

前端之家收集整理的这篇文章主要介绍了微信小程序scroll-x失效的完美解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

失效的scroll-x

微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动。。。。

然而,在实际开发中,发现并不是这么简单。。。贴上部分wxml和wxss代码

<div class="jb51code">
<pre class="brush:js;">

jed_shi 剩余09:43:21 @H_404_21@ ¥321 jed_shi 剩余09:43:21 @H_404_21@ ¥321 jed_shi 剩余09:43:21 @H_404_21@ ¥321 jed_shi 剩余09:43:21 @H_404_21@ ¥321

.scroll-Box {
margin-top: 33rpx;
padding-bottom: 40rpx;
}
.scroll-Box .Box:first-child {
margin-left: 32rpx;
}
.scroll-Box .Box {
width: 296rpx;
margin-right: 32rpx;
}
.scroll-Box .Box .Box-hd {
display: flex;
align-items: center;
}
.scroll-Box .Box .Box-hd image {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.scroll-Box .Box .Box-hd .info {
display: flex;
flex-direction: column;
}
.scroll-Box .Box .Box-hd .info .name {
font-size: 28rpx;
color: #333;
line-height: 1;
padding-bottom: 10rpx;
}
.scroll-Box .Box .Box-hd .info .time {
font-size: 22rpx;
color: #999;
line-height: 1;
}
.scroll-Box .Box .Box-img {
margin-top: 16rpx;
}
.scroll-Box .Box .Box-img image {
width: 296rpx;
height: 222rpx;
border-radius: 15rpx;
}
.scroll-Box .Box .Box-extra {
display: flex;
justify-content: space-between;
}
.scroll-Box .Box .Box-extra .price {
font-size: 32rpx;
color: #f15733;
}
.scroll-Box .Box .Box-extra button {
width: 104rpx;
height: 44rpx;
background-color: #f15733;
color: #fff;
margin: 0;
padding: 0;
font-size: 26rpx;
line-height: 44rpx;
margin-right: 8rpx;
}

不能横向滚动

不能横向滚动

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

解决方案。。

后来发现其实只要给scroll-view加上white-space: nowrap; ,给scroll-view的子元素Box加上display:inline-block就行了。。。

就像这样:

Box { white-space: nowrap; } .scroll-Box .Box{ display:inline-block }

成功滚动

成功滚动

就可以很爽的横向滑动了。。。。完美解决

温馨提示

可以不用给scroll-view设置display:flex;这种属性了,但一定要加上这个

Box { white-space: nowrap; }

不然就会变成这样。

错误

总结

以上所述是小编给大家介绍的微信小程序scroll-x失效的完美解决方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的微信小程序相关文章