持鼠標(biāo)滾動(dòng)、前進(jìn)后退和鍵盤控制荔睹、多個(gè)回調(diào)函數(shù)狸演、支持手機(jī)和平板觸摸事件、支持 CSS3 動(dòng)畫僻他、支持窗口縮放宵距、窗口縮放時(shí)自動(dòng)調(diào)整、可設(shè)置滾動(dòng)寬度吨拗、背景顏色满哪、滾動(dòng)速度婿斥、循環(huán)選項(xiàng)、回調(diào)哨鸭、文本對(duì)齊方式
總的來(lái)說(shuō)功能挺齊全的民宿，而且使用起來(lái)也是很方便
1.配置
先說(shuō)幾個(gè)常用的：
頁(yè)面滑動(dòng)速度：scrollingSpeed（單位：毫秒）
是否顯示導(dǎo)航欄：navigation （默認(rèn)false）多說(shuō)一句（一般的整屏滾動(dòng)頁(yè)面，按開發(fā)人員意識(shí)交互增強(qiáng)像鸡，而按使用者交互就少勘高，所以這種整屏滾動(dòng)的最后要加上導(dǎo)航欄，否則容易使使用者迷路）坟桅。
回調(diào)函數(shù)：
conLeave -- 滾動(dòng)前調(diào)用回調(diào)函數(shù)
afterLoad -- 滾動(dòng)到某一屏后的回調(diào)函
完整補(bǔ)充：
1华望、選項(xiàng)
名稱 |類型| default |說(shuō)明
---|---|---
verticalCentered |字符串| true |內(nèi)容是否垂直居中
verticalCentered |字符串 |true |內(nèi)容是否垂直居中
resize |布爾值 |false |字體是否隨著窗口縮放而縮放
slidesColor |函數(shù) |無(wú) |設(shè)置背景顏色
anchors |數(shù)組 |無(wú) |定義錨鏈接
scrollingSpeed |整數(shù) |700 |滾動(dòng)速度，單位為毫秒
easing |字符串 |easeInQuart |滾動(dòng)動(dòng)畫方式
menu |布爾值 |false |綁定菜單仅乓，設(shè)定的相關(guān)屬性與 anchors 的值對(duì)應(yīng)后赖舟，菜單可以控制滾動(dòng)
navigation |布爾值 |false |是否顯示項(xiàng)目導(dǎo)航
navigationPosition |字符串 |right |項(xiàng)目導(dǎo)航的位置，可選 left 或 right
navigationColor |字符串 |#000 |項(xiàng)目導(dǎo)航的顏色
navigationTooltips |數(shù)組| 空 |項(xiàng)目導(dǎo)航的 tip
slidesNavigation |布爾值 |false |是否顯示左右滑塊的項(xiàng)目導(dǎo)航
slidesNavPosition |字符串 |bottom |左右滑塊的項(xiàng)目導(dǎo)航的位置夸楣，可選 top 或 bottom
controlArrowColor |字符串 |#fff |左右滑塊的箭頭的背景顏色
loopBottom |布爾值 |false |滾動(dòng)到最底部后是否滾回頂部
loopTop |布爾值 |false |滾動(dòng)到最頂部后是否滾底部
loopHorizontal |布爾值 |true |左右滑塊是否循環(huán)滑動(dòng)
autoScrolling |布爾值 |true |是否使用插件的滾動(dòng)方式宾抓，如果選擇 false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條
scrollOverflow |布爾值 |false |內(nèi)容超過(guò)滿屏后是否顯示滾動(dòng)條
css3 |布爾值 |false |是否使用 CSS3 transforms 滾動(dòng)
paddingTop |字符串 |0 |與頂部的距離
paddingBottom |字符串| 0 |與底部距離
fixedElements |字符串 |無(wú) |
normalScrollElements | |無(wú) |
keyboardScrolling |布爾值 |true |是否使用鍵盤方向鍵導(dǎo)航
touchSensitivity |整數(shù) |5 |
continuousVertical |布爾值 |false |是否循環(huán)滾動(dòng)豫喧，與 loopTop 及 loopBottom 不兼容
animateAnchor |布爾值| true |
normalScrollElementTouchThreshold |整數(shù)| 5|
2石洗、方法
名稱 |方法
---|---|---
moveSectionUp() |向上滾動(dòng)
moveSectionDown() |向下滾動(dòng)
moveTo(section, slide) |滾動(dòng)到
moveSlideRight() |slide 向右滾動(dòng)
moveSlideLeft() slide |向左滾動(dòng)
setAutoScrolling() |設(shè)置頁(yè)面滾動(dòng)方式，設(shè)置為 true 時(shí)自動(dòng)滾動(dòng)
setAllowScrolling() |添加或刪除鼠標(biāo)滾輪/觸控板控制
setKeyboardScrolling() |添加或刪除鍵盤方向鍵控制
setScrollingSpeed() |定義以毫秒為單位的滾動(dòng)速度
3紧显、回調(diào)函數(shù)
名稱 |方法
---|---|---
afterLoad |滾動(dòng)到某一屏后的回調(diào)函數(shù)讲衫，接收 anchorLink 和 index 兩個(gè)參數(shù)，anchorLink 是錨鏈接的名稱孵班，index 是序號(hào)涉兽，從1開始計(jì)算
onLeave |滾動(dòng)前的回調(diào)函數(shù)，接收 index篙程、nextIndex 和 direction 3個(gè)參數(shù)：index 是開的“頁(yè)面”的序號(hào)枷畏，從1開始計(jì)算；nextIndex 是滾動(dòng)到的“頁(yè)面”的序號(hào)虱饿，從1開始計(jì)算direction 判斷往上滾動(dòng)還是往下滾動(dòng)拥诡，值是 up 或 down。
afterRender |頁(yè)面結(jié)構(gòu)生成后的回調(diào)函數(shù)氮发，或者說(shuō)頁(yè)面初始化完成后的回調(diào)函數(shù)
afterSlideLoad |滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)渴肉，與 afterLoad 類似，接收 anchorLink折柠、index宾娜、slideIndex批狐、direction 4個(gè)參數(shù)
onSlideLeave |某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)扇售，與 onLeave 類似前塔，接收 anchorLink、index承冰、slideIndex华弓、direction 4個(gè)參數(shù)。
4,效果圖
