小編給大家分享一下微信小程序scroll-x失效怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)聶榮免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

失效的scroll-x

在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個(gè)scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動(dòng)。。。。

 然而，在實(shí)際開(kāi)發(fā)中，發(fā)現(xiàn)并不是這么簡(jiǎn)單。。。貼上部分wxml和wxss代碼…

 
  
   
    
     
     
      jed_shi
      剩余09:43:21
     
    
    
     
    
    
     ￥321
     加入
    
   
   
    
     
     
      jed_shi
      剩余09:43:21
     
    
    
     
    
    
     ￥321
     加入
    
   
   
    
     
     
      jed_shi
      剩余09:43:21
     
    
    
     
    
    
     ￥321
     加入
    
   
   
    
     
     
      jed_shi
      剩余09:43: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;
}

不能橫向滾動(dòng)

發(fā)現(xiàn)實(shí)際出來(lái)的效果是這樣的。。扎心了，老鐵?。?！

解決方案。。

后來(lái)發(fā)現(xiàn)其實(shí)只要給scroll-view加上white-space: nowrap; ，給scroll-view的子元素box加上display:inline-block就行了。。。

 就像這樣：

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

成功滾動(dòng)

就可以很爽的橫向滑動(dòng)了。。。。完美解決了

溫馨提示

可以不用給scroll-view設(shè)置display:flex;這種屬性了，但一定要加上這個(gè)

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

不然就會(huì)變成這樣。

以上是“微信小程序scroll-x失效怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱(chēng)：微信小程序scroll-x失效怎么辦-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/dijiei.html