微信小程序 兩種滑動(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ì)本站的支持！
您可能感興趣的文章:
- 微信小程序 scroll-view實(shí)現(xiàn)錨點(diǎn)滑動(dòng)的示例
- 微信小程序圖片橫向左右滑動(dòng)案例
- 微信小程序左右滑動(dòng)切換頁面詳解及實(shí)例代碼
- 微信小程序側(cè)邊欄滑動(dòng)特效(左右滑動(dòng))
- 微信小程序 頁面滑動(dòng)事件的實(shí)例詳解
- 微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼
- 微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)
- 微信小程序使用scroll-view標(biāo)簽實(shí)現(xiàn)自動(dòng)滑動(dòng)到底部功能的實(shí)例代碼
- 微信小程序 監(jiān)聽手勢(shì)滑動(dòng)切換頁面實(shí)例詳解
- 小程序?qū)崿F(xiàn)滑動(dòng)塊效果
相關(guān)文章
這篇文章主要介紹了微信小程序 繪圖之餅圖實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 UI布局常用技巧整理總結(jié)的相關(guān)資料,現(xiàn)在不論是APP 還是各種軟件，UI布局還是非常重要的，用戶體驗(yàn)第一位啊，這里就整理下微信小程序的UI布局，需要的朋友可以參考下2016-12-12
這篇文章主要給大家分享的是JavaScript用html5新方法操作元素類名的詳解，早先JavaScript處理起來特別不方便，需要先取到class屬性，然后對(duì)字符串進(jìn)行處理。現(xiàn)在html5給所有元素增加了classList屬性來操作類屬性，非常方便，下面就一起來看看具體操作過程吧2021-11-11
這篇文章主要介紹了微信小程序 增、刪、改、查操作實(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)聽的簡(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注冊(cè)動(dòng)態(tài)頁面
這篇文章主要介紹了用javascript制作qq注冊(cè)動(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