移动端主流的js框架

JavaScript015

移动端主流的js框架,第1张

1、zeptiojs（不支持IE）

http://zeptojs.com/

2、jGestures

http://jgestures.codeplex.com/

推荐博客文章： http://www.haorooms.com/post/jquery_jGestures

3、swiper

http://www.swiper.com.cn/

4、iScroll.js

http://cubiq.org/iscroll-5

http://iscrolljs.com/

一个专为移动应用程序设计的UI框架，带有丰富UI组件、遵循原生iOS和Android设计标准，即时实现功能、免费使用，在iOS和Android呈现不同的风格。

①引入相关CSS、JS 文件

原生/JQuery框架

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

vue框架

  安装插件包

    npm install onsenui vue-onsenui

  main.js中引入

    import 'onsenui/css/onsenui.css'

    import 'onsenui/css/onsen-css-components.css'

    import Vue from 'vue'

    import VueOnsen from 'vue-onsenui'

    Vue.use(VueOnsen)

②html 结构中使用相关组件，格式为ons-**,<ons-button>按钮</ons-button>  <ons-navigator></ons-navigator><ons-input></ons-input>

或者使用CSS写法 <button class="button">按钮</button><input type="text" class="text-input" placeholder="请输入">

vue中标签写法略有区别 v-ons-**  <v-ons-button @click="clickFun">按钮</v-ons-button>

同大部分UI框架一样，也可以给标签添加不同的class控制同一种标签的不同风格

按钮ons-input,

输入框ons-button,

导航栏ons-navbar,

底部导航栏ons-toolbar,

tab切换 ons-tabbar,ons-tab

列表 ons-list,ons-list-item,ons-list-headerlist-item__thumbnail,list-item__title,list-item__subtitle(Class)

卡片 ons-card

网格布局 ons-row，ons-col，

弹框 ons-dialog,ons-modal,ons-popover