现在的位置: 首页 > web前端 > 正文

slip js_通过滑动和拖动手势操作列表的 UI 库

2020年07月09日 web前端 ⁄ 共 1027字 ⁄ 字号 评论关闭

  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框架的页面样式给大家简单的介绍了一些,希望大家多看看。

抱歉!评论已关闭.