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