温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用slip js

发布时间:2021-11-12 14:12:07 来源:亿速云 阅读:131 作者:iii 栏目:开发技术

本篇内容主要讲解“怎么使用slip js”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用slip js”吧!

  slip是一个移动滑屏web框架,改库大小5.75K,非常轻量,兼容ios5+、android2.3+系统,其滑屏功能,响应灵敏。

  slip.js调用

  varcontainer=document.getElementById('container');

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

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

  Slip:暴露到全局的方法,只要你引入slip.js,就可以得到这个实用牛逼的方法。

  container:被滑动的容器,里面是每个滑动页面。

  'y':页面滑动的方向,你也可以传入'x'。

  webapp:设置页面展现为全屏滑动页面的方法。

  pages:页面元素列表。

  slip框架的页面样式

  slip框架的页面样式需要自定义,不过这里我简单写好了~

  (如果你不使用框架,推荐用transform:translate(X,Y)的写法,首先transform:translate可设计高性能动画,其次兼容android2.3+的系统,transform:translateY不兼容android2.3的系统)

  兼容ios5+、android2.3+系统,其滑屏功能,响应灵敏~如果你只需要设计简单的滑屏效果,可考虑它~

  <!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>

到此,相信大家对“怎么使用slip js”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI