溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

怎么使用slip js

發(fā)布時(shí)間：2021-11-12 14:12:07 來(lái)源：億速云 閱讀：126 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容主要講解“怎么使用slip js”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么使用slip js”吧!

　　slip是一個(gè)移動(dòng)滑屏web框架，改庫(kù)大小5.75K，非常輕量，兼容ios5+、android2.3+系統(tǒng)，其滑屏功能，響應(yīng)靈敏。

　　slip.js調(diào)用

　　varcontainer=document.getElementById('container');

　　varpages=document.querySelectorAll('.page');

　　varslip=Slip(container,'y').webapp(pages);

　　Slip：暴露到全局的方法，只要你引入slip.js，就可以得到這個(gè)實(shí)用牛逼的方法。

　　container:被滑動(dòng)的容器，里面是每個(gè)滑動(dòng)頁(yè)面。

　　'y':頁(yè)面滑動(dòng)的方向，你也可以傳入'x'。

　　webapp:設(shè)置頁(yè)面展現(xiàn)為全屏滑動(dòng)頁(yè)面的方法。

　　pages:頁(yè)面元素列表。

　　slip框架的頁(yè)面樣式

　　slip框架的頁(yè)面樣式需要自定義，不過(guò)這里我簡(jiǎn)單寫(xiě)好了~

　　(如果你不使用框架，推薦用transform:translate(X,Y)的寫(xiě)法，首先transform:translate可設(shè)計(jì)高性能動(dòng)畫(huà)，其次兼容android2.3+的系統(tǒng)，transform:translateY不兼容android2.3的系統(tǒng))

　　兼容ios5+、android2.3+系統(tǒng)，其滑屏功能，響應(yīng)靈敏~(yú)如果你只需要設(shè)計(jì)簡(jiǎn)單的滑屏效果，可考慮它~

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport">

　　<metacontent="yes"name="apple-mobile-web-app-capable">

　　<metacontent="black"name="apple-mobile-web-app-status-bar-style">

　　<metacontent="telephone=no"name="format-detection">

　　<metacontent="email=no"name="format-detection">

　　<title>slip</title>

到此，相信大家對(duì)“怎么使用slip js”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手