/** * Created by jl on 2016/3/28. *///初始化绑定iScroll控件var actHtml="";var myScroll,    pullUpEl, pullUpOffset,    idCount= 0, fyList=5; $.getJSON('js/data.json', function (data) {    setTimeout(function () {        var actiJson=data.result;        …
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0…
1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction()和pullUpAction()里面的东西进行修改即可!!! html: <div id="moreWrapper" class="moreWrapper"> <div class="news-tab flexbox flexbox-mid…
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动端截图: 1. 先说一个题外话,拿到这个效果后,先分析了下,由于新闻分类很多,每个类目下都得有很多新闻,并且加载的时候得用ajax,所以得分清在哪个栏目下触发的加载,然后挑出相应的接口数据,插入到那个页面. 先分析一下:这个效果类似选项卡,但是简单的选项卡是把选项卡子内容全部写在文档内部(页面加载的时候会把所…
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时…
新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content=&…
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果,我很喜欢.感觉有回应. 现在开始实现我页面的第一个交互效果,让我的页面更生动一点. 实现的插件 基于iScroll.js插件 代码 html <div class="header">我是头部固定</div> <div id="wrapper&quo…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0"> <title>Title</title> <script src="js/jquery.min.js&qu…
前言 初学iscroll这个控件,给我的一个感觉还是蛮不错的. 什么是iScroll:是目前最成熟的自定义滚动解决方案之一,在移动端和PC有很好的兼容性.iScroll官方提供了5个不同的版本 iscroll.js 通用版 包含了大部分公共特性 iscroll-lite.js 缩减版 削减了一些功能特性,例如:滚动条,鼠标滚轮等等 iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求. iscroll-zoom.js 滚动缩放版 iscroll-infinite.js…
js菜鸡-------自我记录 html页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta nam…