溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

解決微信小程序scroll-view組件無(wú)橫向滾動(dòng)的問(wèn)題

發(fā)布時(shí)間：2020-09-24 09:39:51 來(lái)源：腳本之家 閱讀：272 作者：flyyy菜鳥 欄目：web開發(fā)

微信開放文檔中scroll-view組件的部分代碼如下

 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" >
     <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
     <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
     <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
 </scroll-view>

要實(shí)現(xiàn)橫向滾動(dòng)，只需設(shè)置以下兩個(gè):

  • 父元素設(shè)置 white-space:nowrap; // 不換行
  • 子元素設(shè)置 display:inline-block;
.scroll-view_H {
 /*設(shè)置display:flex無(wú)效*/
 white-space: nowrap; 
}
.scroll-view-item_H {
 width: 200rpx;
 height:200rpx;
 background-color: #f00;
 display: inline-block;
}

總結(jié)

以上所述是小編給大家介紹的解決微信小程序scroll-view組件無(wú)橫向滾動(dòng)的問(wèn)題，希望對(duì)大家有所幫助！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手