解決微信小程序scroll-view組件無橫向滾動的問題
更新時間：2020年02月04日 10:35:10 作者：flyyy菜鳥
這篇文章主要介紹了微信小程序scroll-view組件無橫向滾動的解決方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
微信開放文檔中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)文章
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。2011-06-06
javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法,涉及javascript數(shù)學(xué)運算及頁面元素動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文主要介紹了js判斷是否是手機頁面的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
filemanage功能中用到的common.js...2007-04-04
詳細(xì)聊聊TypeScript中any unknown never和void的區(qū)別
這篇文章主要給大家聊聊TypeScript 中 any、unknown、never 和 void 有什么區(qū)別，文中有詳細(xì)的代碼實例講解，具有一定的參考價值,需要的朋友可以參考下2023-07-07
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了js for等循環(huán) 跳出多層循環(huán)，終止循環(huán)執(zhí)行的方法,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了JavaScript 高性能數(shù)組去重的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
各大瀏覽器內(nèi)置的開發(fā)工具，都提供了一個console對象。它主要有兩個作用：顯示網(wǎng)頁代碼運行時的錯誤信息。提供了一個命令行接口，用來與網(wǎng)頁代碼互動。下面我們就來詳細(xì)研究下如何使用console進(jìn)行性能測試。2015-04-04
打開一個小程序，我們會發(fā)現(xiàn)，一般構(gòu)圖排版都是圖片banner - 快捷按鈕 - 產(chǎn)品/文章列表等詳細(xì)信息，底部導(dǎo)航一般是2~5個。這樣的排版是比較美觀的，那么為什么要這樣設(shè)計，這些輪播圖、快捷按鈕等小程序組件都有什么用呢？接下來就帶你詳細(xì)了解下2022-12-12