快捷導(dǎo)航

微信小程序兩種滑動(dòng)方式（橫向滑動(dòng)，豎向滑動(dòng)）詳細(xì)及實(shí)例代碼

更新時(shí)間：2017年01月13日 11:18:06 投稿：lqh

這篇文章主要介紹了微信小程序兩種滑動(dòng)方式詳細(xì)及實(shí)例代碼的相關(guān)資料,這里對(duì)橫向滑動(dòng)和豎向滑動(dòng)都做介紹，需要的朋友可以參考下

微信小程序滑動(dòng)方式

豎向滑動(dòng)：

<scroll-view scroll-y="true" style="height: 200rpx;">
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

橫向滑動(dòng)：

<!-- white-space-->
normal: 正常無變化(默認(rèn)處理方式.文本自動(dòng)處理換行.假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行)
pre: 保持HTML源代碼的空格與換行,等同與pre標(biāo)簽
nowrap: 強(qiáng)制文本在一行,除非遇到br換行標(biāo)簽
pre-wrap: 同pre屬性,但是遇到超出容器范圍的時(shí)候會(huì)自動(dòng)換行
pre-line: 同pre屬性,但是遇到連續(xù)空格會(huì)被看作一個(gè)空格
inherit: 繼承

水平滾動(dòng)

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序繪圖之餅圖實(shí)現(xiàn)
這篇文章主要介紹了微信小程序繪圖之餅圖實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序 UI布局常用技巧整理總結(jié)
這篇文章主要介紹了微信小程序 UI布局常用技巧整理總結(jié)的相關(guān)資料,現(xiàn)在不論是APP 還是各種軟件，UI布局還是非常重要的，用戶體驗(yàn)第一位啊，這里就整理下微信小程序的UI布局，需要的朋友可以參考下
2016-12-12
JavaScript利用html5新方法操作元素類名詳解
這篇文章主要給大家分享的是JavaScript用html5新方法操作元素類名的詳解，早先JavaScript處理起來特別不方便，需要先取到class屬性，然后對(duì)字符串進(jìn)行處理?，F(xiàn)在html5給所有元素增加了classList屬性來操作類屬性，非常方便，下面就一起來看看具體操作過程吧
2021-11-11
微信小程序增、刪、改、查操作實(shí)例詳解
這篇文章主要介紹了微信小程序增、刪、改、查操作實(shí)例詳解的相關(guān)資料,這里附有實(shí)例代碼，需要的朋友可以參考下
2017-01-01
實(shí)現(xiàn)微信小程序的wxml文件和wxss文件在webstrom的支持
這篇文章主要介紹了實(shí)現(xiàn)微信小程序的wxml文件和wxss文件在webstrom的支持的相關(guān)資料,需要的朋友可以參考下
2017-06-06
微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)拖拽 image 觸摸事件監(jiān)聽的實(shí)例的相關(guān)資料,這里提供image觸摸并監(jiān)聽的簡單實(shí)例，需要的朋友可以參考下
2017-08-08
JavaScript?ES6語法中l(wèi)et,const?,var?的區(qū)別
這篇文章主要為大家介紹了JavaScript中l(wèi)et,const?,var?的區(qū)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
electron渲染進(jìn)程主進(jìn)程相互傳值示例解析
這篇文章主要為大家介紹了electron渲染進(jìn)程主進(jìn)程相互傳值示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
用javascript制作qq注冊動(dòng)態(tài)頁面
這篇文章主要介紹了用javascript制作qq注冊動(dòng)態(tài)頁面,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下
2021-04-04
autojs使用intent發(fā)送郵件帶附件實(shí)現(xiàn)示例
這篇文章主要為大家介紹了autojs使用intent發(fā)送郵件帶附件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01