微信小程序 兩種滑動(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)文章
這篇文章主要為大家介紹了微前端框架qiankun源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
package.json中browser?module?main字段優(yōu)先級(jí)對(duì)比
這篇文章主要介紹了package.json中browser?module?main字段的優(yōu)先級(jí)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序下拉刷新界面的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
Javascript中bind()方法綁定函數(shù)的使用與實(shí)現(xiàn)
這篇文章主要為大家介紹了Javascript中bind()方法綁定函數(shù)的使用與實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
JavaScript嚴(yán)格模式不支持八進(jìn)制的問題講解
這篇文章主要講解JavaScript嚴(yán)格模式不支持八進(jìn)制的問題，本文圍繞JavaScript嚴(yán)格模式展開內(nèi)容，詳細(xì)介紹為什么JavaScript嚴(yán)格模式不支持八進(jìn)制，下面來看看詳細(xì)介紹,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
微信小程序 本地存儲(chǔ)及登錄頁面處理實(shí)例詳解
這篇文章主要介紹了微信小程序 本地存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了TypeScript遍歷對(duì)象屬性的問題，文章圍繞TypeScript遍歷對(duì)象屬性的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM三
這篇文章主要為大家介紹了JS輕量級(jí)函數(shù)式編程實(shí)現(xiàn)XDM示例詳解第3/3篇，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06