html5手機(jī)頁面滑動(dòng)(h5怎么制作滑動(dòng)長(zhǎng)頁面)
圖文排版
H5
手機(jī)版秀米
對(duì)于左右滑動(dòng)布局
公眾號(hào)留言最多的問題大概有
滑動(dòng)布局就四五列,想要增加更多怎么做?
想把內(nèi)容放在第一個(gè)序列,要怎么做?
想調(diào)整下序列位置,該怎么弄?
放心,問題不大
因?yàn)椋瑒?dòng)布局更新啦
這次針對(duì)的是序列設(shè)置
增加、復(fù)制、拖動(dòng)、刪除序列
這些操作都可以一條龍服務(wù)
現(xiàn)在,就一起來看下吧
這是視頻版滴~
這是文字版滴~
01
展開全文
滑動(dòng)序列,更新了啥?
從左邊模板區(qū),布局→基礎(chǔ)布局,找到左右滑動(dòng)布局并添加到編輯區(qū)域中:
選中左右滑動(dòng)布局,點(diǎn)擊工具條上的設(shè)置滑動(dòng)序列,進(jìn)入序列設(shè)置;在序列旁邊,有四個(gè)按鈕設(shè)置,分別為增加序列、復(fù)制當(dāng)前序列、拖動(dòng)序列調(diào)整順序、刪除序列:
02
新的滑動(dòng)序列怎么用呢?
滑動(dòng)序列更新后,增加的四個(gè)按鈕設(shè)置,在操作左右滑動(dòng)布局上,方便了很多。
1
增加滑動(dòng)序列
現(xiàn)在,增加滑動(dòng)序列,有兩種操作:
這兩種,第一種是這次優(yōu)化后的新增操作,第二種是一直就有的滑動(dòng)序列添加操作;現(xiàn)在,我們來實(shí)際操作下:
在滑動(dòng)序列設(shè)置頁面,點(diǎn)擊第一個(gè)序列右邊的?號(hào),新增一個(gè)序列;新增序列處于自動(dòng)選中狀態(tài),然后從左邊點(diǎn)擊內(nèi)容添加。
增加滑動(dòng)序列按鈕
在滑動(dòng)序列設(shè)置頁面,不選中任何已有序列;直接從左邊點(diǎn)擊內(nèi)容,會(huì)被當(dāng)新滑動(dòng)序列,加到最后。
看出來了嗎?改動(dòng)后,序列里如果已有內(nèi)容,可以選中序列,進(jìn)行替換;不論圖片,還是圖片,先選中序列,再從左邊選擇內(nèi)容替換:
2
復(fù)制滑動(dòng)序列
復(fù)制滑動(dòng)序列,就是字面意思啦;如果滑動(dòng)序列內(nèi)容都一致的話,可以直接點(diǎn)擊復(fù)制序列按鈕,新增多個(gè)一樣的序列,方便省時(shí)。
復(fù)制滑動(dòng)序列按鈕
在滑動(dòng)序列設(shè)置頁面,直接點(diǎn)擊序列旁邊的復(fù)制按鈕,右排第二個(gè),直接增加多個(gè)序列,內(nèi)容會(huì)復(fù)制當(dāng)前的序列。
3
拖動(dòng)滑動(dòng)序列調(diào)整順序
這對(duì)于左右滑動(dòng)布局,是一個(gè)非常好用的功能,只要摁住拖動(dòng)按鈕,就可以隨意調(diào)序列位置了。
拖動(dòng)調(diào)整序列順序按鈕
在滑動(dòng)序列設(shè)置頁面,鼠標(biāo)摁住拖動(dòng)按鈕不松手,左右調(diào)整序列位置,放到需要的位置松開鼠標(biāo),即完成調(diào)整順序。
4
刪除滑動(dòng)序列
這里的刪除滑動(dòng)序列,是將序列刪除,操作很簡(jiǎn)單,點(diǎn)刪除按鈕,序列就沒了。
刪除滑動(dòng)序列按鈕
依舊在設(shè)置滑動(dòng)序列頁面,在需要?jiǎng)h除序列的旁邊,點(diǎn)擊刪除按鈕,該序列就被刪除了:
03
SVG布局、SVG圖集序列
也有同樣的設(shè)置
小伙伴們呀,如果你用SVG布局、SVG圖集做排版,那么會(huì)發(fā)現(xiàn),它們的序列設(shè)置,也做了同樣的改動(dòng)。
SVG布局、SVG圖集的序列設(shè)置,也可以增加、復(fù)制、拖動(dòng)、刪除序列操作。
SVG布局動(dòng)畫層的序列設(shè)置
SVG圖集動(dòng)畫層的序列設(shè)置
基本來說,SVG圖集的序列與左右滑動(dòng)布局是很相似的,只需要考慮圖片本身就好了;而SVG布局的序列,還要考慮后續(xù)的動(dòng)畫設(shè)置是否合理。
小結(jié)
這次的更新,是左右滑動(dòng)布局、SVG布局、SVG布局的序列操作設(shè)置調(diào)整。
在每列序列旁邊,新增四個(gè)按鈕,增加序列、復(fù)制序列、拖動(dòng)序列調(diào)整順序、刪除序列;另外,現(xiàn)在選中序列,可對(duì)序列里的內(nèi)容進(jìn)行替換。
更多閱讀
小白適用
系統(tǒng)介紹秀米的基礎(chǔ)操作
長(zhǎng)按識(shí)別二維碼繼續(xù)閱讀
??? 向左滑動(dòng)
秀米有那么多騷技能
不來學(xué)幾招?
長(zhǎng)按掃碼關(guān)注我們
想知道秀米今年有多努力嗎?
點(diǎn)“閱讀原文”看看吧~
填表有機(jī)會(huì)獲得米點(diǎn)哦~
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。