Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge about how to solve WeChat Mini Programs's scroll-x failure. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Invalid scroll-x

In WeChat Mini Programs's document, use the scroll-view tag, and then set it a scroll-x to achieve the elements, horizontal arrangement, you can slide left and right.

However, in the actual development, it is not so simple to find. Paste some wxml and wxss codes.

Jed_shi remaining 09:43:21 ¥321 joining jed_shi 09:43:21 remaining 09:43:21 joining jed_shi Join jed_shi and join jed_shi at 09:43:21. 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: 22rpx; 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;

Cannot scroll horizontally

It is found that the actual effect is like this. It hurts, buddy!

The solution.

It turns out that in fact, all you have to do is add white-space: nowrap; to scroll-view and display:inline-block to box, a child element of scroll-view.

It's like this:

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

Successful scrolling

You can slide horizontally in a cool way. It's solved perfectly.

reminder

You don't have to set the display:flex; property for scroll-view, but be sure to add this.

. scroll-box {white-space: nowrap;}

Or it's gonna be like this.

These are all the contents of the article "how to solve WeChat Mini Programs's scroll-x failure". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.