一. Swiper

swiper是一个应用于移动端的动画插件,原理类似于轮播图

  • 官网

  • html结构
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    </div> <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
    </div>
    导航等组件可以放在container之外
  • 引入css样式文件和js文件
  • 初始化
    • 创建Swiper的实例
    var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true, // 如果需要分页器
    pagination: '.swiper-pagination', // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev', // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
    })
    • 在参数对象中使用特定的属性名和属性值,即可调用对应效果
    • 在AJAX异步请求中,swiper的初始化要在页面内容成功加载完成后进行

二. ejs模板引擎

ejs模板引擎与es6模板引擎一样,可以一次性的改变html结构,而不会引起多次的回流和重绘

  • 引入ejs.js文件

    • 原理上,通过解析模板字符串来创建一个有效的html结构字符串,再一次性的添加到指定的元素当中
  • 在html中编写对应的模板
    • script类型为text/template
    • 赋予特定的ID值
    • 所有的js代码必须使用<%%>包起来
      • 代码以行块的形式被解析,也就是一行中仅有js代码,那么整行都要用<%%>包起来
    • 变量引入时,使用<%=变量%>来调用变量
  • 在js中调用编写好的模板
    • 通过id值获取模板对应html内容
    • 使用ejs.render()方法来解析模板字符串
      • 第一个参数为对应的模板字符串
      • 第二个参数为一个对象,通过属性名为模板中的变量名,属性值为js中的变量名,来实现变量的传递
      • 返回值是解析完毕的模板字符串
    • 将上述返回的模板字符串添加到指定的DOM元素中即可

三. iScroll插件

iScroll是一款移动端使用的滚动插件,能实现上拉加载和下拉加载等特定的功能

  • 中文api文档

  • 引入对应的iScroll.js文件
  • 初始化
    • 创建iScroll的实例

      • 第一个参数为指定的DOM元素或者ID值
      • 第二个参数为参数对象
    var myIScroll=new iScroll("wrapper",{
    vScroll:true,
    momentum:true })
    • 参数设置

      • hScroll/vScroll:是否允许水平/垂直滚动
      • bounce:是否超过实际位置反弹
      • bounceLock:当内容少于滚动是否可以反弹
      • momentum:是否开启拖动惯性
      • lockDirection:当水平或垂直拖动时是否锁定另一边的拖动
      • useTransform:是否使用CSS变形
      • useTransition:是否使用CSS变换
      • checkDOMChanges:是否自动检测内容变化
      • topOffset:已经滚动的基准值(一般用在拖动刷新)
      • x:滚动水平初始位置(负值)
      • y:滚动垂直初始位置(负值)
      • Scrollbar的相关参数
        • hScrollbar/vScrollbar:是否显示水平/垂直滚动条
        • fixedScrollbar:在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出scroller的可见区域
        • hideScrollbar:是否隐藏滚动条
        • fadeScrollbar:滚动条是否渐隐渐显
      • Zoom放大相关的参数
        • zoom:是否放大
        • zoomMin:放大的最小倍数
        • zoomMax:放大的最大倍数
        • doubleTapZoom:双击放大倍数
      • Function 自定义函数
        • onRefresh:refresh的回调
        • onScrollStart:开始滚动的回调
        • onBeforeScrollMove:在内容移动前的回调
        • onScrollMove:内容移动的回调
        • onBeforeScrollEnd:在滚动结束前的回调
        • onScrollEnd:在滚动完成后的回调
        • onTouchEnd:手离开屏幕后的回调
        • onDestroy:销毁实例的回调
        • onZoomStart:放大开始时的回调
        • onZoom:放大的回调
        • onZoomEnd:放大结束后的回调

Swiper+ ejs模板引擎+ iScroll插件知识总结的更多相关文章

  1. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  2. 在express站点中使用ejs模板引擎

    在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎 前言 1.1         安装 1.2修改app.js 1.3创建测试页面 前言 使用 vs创建 ...

  3. nodejs-5.1 ejs模板引擎

    ejs官方文档:https://ejs.bootcss.com/ 1.什么是 EJS? "E" 代表 "effective",即[高效]. EJS 是一套简单的 ...

  4. 前端笔记之NodeJS(三)Express&ejs模板引擎&请求识别

    一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

  5. node+ejs模板引擎的应用

    前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...

  6. 使用ejs模板引擎

    let express = require('express'); let fs = require('fs'); let ejs = require('ejs'); let app = expres ...

  7. Express框架中如何引用ejs模板引擎

    1.如何在项目中安装ejs模板引擎 在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...

  8. koa 基础(九) ejs 模板引擎的使用

    1.app.js /** * ejs 模板引擎的使用: * 1.npm install koa-views --save * 2.npm install ejs --save * 3.var view ...

  9. koa2--04.ejs模板引擎

    首先在项目文件下使用cmd,输入:npm install --save koa-views ejs,将koa-views中间件和ejs模板引擎安装到文件中,并自动写入依赖 接在在index.js文件中 ...

随机推荐

  1. 43.可变参数实现printf

    #include <stdio.h> #include <stdio.h> #include <Windows.h> #include <stdarg.h&g ...

  2. Android 将HTML5封装成android应用APK文件的几种方法

    越来越多的开发者热衷于使用html5+JavaScript开发移动Web App.不过,HTML5 Web APP的出现能否在未来取代移动应用,就目前来说,还是个未知数.一方面,用户在使用习惯上,不喜 ...

  3. C#开发 —— 基础知识

    C# 用于开发可以运行在 .Net 平台上的应用程序,C# 本身只是一种语言,尽管它是用于生成面向 .Net 环境的代码,但它本身不是 .Net 的一部分 Console.WriteLine 命名空间 ...

  4. JSP_Learn

    // 解决中文乱码的问题String name = new String((request.getParameter("name")).getBytes("ISO-885 ...

  5. win7禁用启用本地连接bat及vbs

    平台:Windows 7 .8.1 目的:用bat启用禁用网卡 操作: cls @ECHO OFFtitle 启用或禁用本地连接 CLS color 0a GOTO MENU:MENU ECHO. E ...

  6. SQL insert 主键冲突

    待总结 https://blog.csdn.net/JavaCoder_juejue/article/details/82313891 https://blog.csdn.net/a772304419 ...

  7. 使用pandas导出PostgreSQL 模式下的所有表数据并保存

    PostgreSQL PostgreSQL 是一个非常强大的数据库,它是一个免费的对象-关系数据库服务器(数据库管理系统).PostgreSQL支持大部分 SQL 标准, 在语句上也有很大的相似的地方 ...

  8. 今日SGU 5.5

    SGU 114 题意:求一个点到其他点的距离总和最小,距离的定义是x轴距离乘以那个点的人数p 收获:带权中位数,按坐标排序,然后扫一遍,最后权值超过或等于总权值的一半时的那个点就是答案,证明暂无 #i ...

  9. jQuery过滤选择器具体解释

    基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("backgrou ...

  10. 没有killall命令的解决方法

    没有killall命令的解决方法 -bash: killall: command not found https://www.byte128.com/archives/231.html 执行killa ...