解決微信小程序scroll-view組件無橫向滾動的問題
更新時間：2020年02月04日 10:35:10 作者：flyyy菜鳥
這篇文章主要介紹了微信小程序scroll-view組件無橫向滾動的解決方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
微信開放文檔中scroll-view組件的部分代碼如下
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
<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>
要實現(xiàn)橫向滾動，只需設(shè)置以下兩個:
- 父元素設(shè)置 white-space:nowrap; // 不換行
- 子元素設(shè)置 display:inline-block;
.scroll-view_H {
/*設(shè)置display:flex無效*/
white-space: nowrap;
}
.scroll-view-item_H {
width: 200rpx;
height:200rpx;
background-color: #f00;
display: inline-block;
}
總結(jié)
以上所述是小編給大家介紹的解決微信小程序scroll-view組件無橫向滾動的問題，希望對大家有所幫助！
相關(guān)文章
CodeMirror2 IE7/IE8 下面未知運行時錯誤的解決方法
最近用CodeMirror2作后臺的模板編輯器，在IE9、Firefox下面沒有問題。到了IE7、IE8下面，textarea里面的代碼就顯示不出來了。搜索了好多，終于找到原因2012-03-03
我想用JS實現(xiàn)對文本的加密和解密,想用維吉尼亞密碼算法,誰有現(xiàn)成代碼啊2010-11-11
微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細流程
在社交小程序里有個常見的場景是關(guān)注功能，我們本篇以關(guān)注已經(jīng)發(fā)布的文章為例，講解一下關(guān)注功能如何實現(xiàn)2022-08-08
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等?？梢暬瘓D表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
下面小編就為大家?guī)硪黄褂迷鷍s+canvas實現(xiàn)模擬心電圖的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JavaScript中正則表達式判斷匹配規(guī)則及常用方法
JS作為一門常用于web開發(fā)的語言，必然要具備正則這種強大的特性，本文將對JS中的正則用法及常用函數(shù)進行一番總結(jié)2017-08-08
第一次動手實現(xiàn)bootstrap table分頁效果
這篇文章主要為大家詳細介紹了第一次動手實現(xiàn)bootstrap table分頁效果的相關(guān)代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場景與使用區(qū)別的介紹，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
javascript自定義startWith()和endWith()的兩種方法
js中自定義startWith()和endWith()方法有兩種，在本文將為大家詳細介紹下，感興趣的朋友不要錯過2013-11-11
wx:for是微信小程序中的一個列表渲染指令,用于循環(huán)渲染一個數(shù)組或?qū)ο笾械臄?shù)據(jù),它類似于JavaScript中的for循環(huán),可以根據(jù)數(shù)據(jù)的長度自動渲染相應(yīng)的列表項,本文給大家介紹微信小程序wx:for 的使用及wx:key綁定兩種方式,感興趣的朋友一起看看吧2023-12-12