jquery weui 实现手机滚动刷新,结合底部tabber

原创 2017年08月03日 15:39:37




<!DOCTYPE html>

<html>


<head>
<title>测试下拉刷新,结合bar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="../lib/weui.min.css">
<link rel="stylesheet" href="../css/jquery-weui.css">
<link rel="stylesheet" href="css/style.css">
</head>


<body ontouchstart>


<div class="content-padded" id="list">
《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经<br> 典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材。
<br> 《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介
<br> 绍了人工智能的理论和实践,阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向。
<br> 全书分为七大部分:第Ⅰ部分“人工智能”,第Ⅱ部分“问题求解”,第Ⅲ部分“知识、推理与规划”,
<br> 第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。
<br><br><br><br><br> 《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、
<br> 思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。
<br> 第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。
<br><br><br><br><br> 《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、
<br> 思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。
<br> 第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。
<br><br><br><br><br> 《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、
<br> 思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。
<br>
</div>
<div class="weui-loadmore" id="loadMsg" hidden="hidden">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>


<div class="container js_container">
<!--底部菜单-->
<div id="tab" class="weui-tabbar" style="height: 45px;position: fixed;">
<ul class="weui-navbar">
<li class="weui-navbar__item weui-bar__item_on">
<a class="mytabbar" href="#" style="color: #666;">首页</a></li>
<li class="weui-navbar__item"><a class="mytabbar" href="#" style="color: #666;">公告</a></li>
<li class="weui-navbar__item"><a class="mytabbar" href="#" style="color: #666;">我的信息</a></li>
</ul>
<div class="weui-tab__panel">
<div class="weui-tab__content page_feedback">
首页
</div>
<div class="weui-tab__content hide">
公告
</div>
<div class="weui-tab__content hide">
我的信息
</div>
</div>
</div>
</div>
<script src="../lib/jquery-2.1.4.js"></script>
<script src="../lib/fastclick.js"></script>
<script src="../js/jquery-weui.js"></script>
<script>
//tab切换    
$(function() {
var aLi = $('.weui-navbar__item');
aLi.on('click', function() {
$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
var index = $(this).index();
$('.weui-tab__panel div').eq(index).show().siblings().hide();
});
});
</script>


<script type="application/javascript">
$(function() {
FastClick.attach(document.body);
});


$(document.body).infinite(200);
var loading = false; //状态标记
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
$("#loadMsg").show();


$.ajax({
type: "get",
async: false,
url: "http://192.168.1.125/letile.do?action=projectMod",
cache: false,
dataType: "jsonp",
jsonpCallback: "resultMe",
success: function(json) {
$("#list").append(json.msg);
$("#loadMsg").hide();
loading = false;
},
error: function(e) {
alert("失败");
},
});
});
</script>
</body>


</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

微信UI项目:jQuery WeUI

jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插...
  • softwave
  • softwave
  • 2016年03月26日 14:26
  • 16489

微信小程序入门五上滑加载下拉刷新

之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的。这章介绍加载和刷新。 效果图: 先介绍在IDE中,怎么模拟上滑这个操作。开始我是用鼠标点击文章列表,然后先上移动。结果一直没有结果,以...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery weui上拉加载更多

上拉加载更多 《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作...
  • ziwoods
  • ziwoods
  • 2017年05月16日 18:20
  • 3800

form标签的位置影响jQuery WeUI滚动加载使用的例子

最近在做微信开发的时候出现了一个问题,发觉滚动加载不起作用了。由于代码较多。我简化下,原来的代码大致是这样得: 。。...
  • sxf359
  • sxf359
  • 2016年11月23日 14:15
  • 3783

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery weui ajax滚动加载更多

手机端使用jquery weui制作ajax滚动加载更多。 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: 滚...
  • ziwoods
  • ziwoods
  • 2017年07月20日 10:18
  • 1939

jquery weui实现多tab异步滚动加载更多

多tab实现ajax加载更多 选项一 ...
  • ziwoods
  • ziwoods
  • 2017年08月13日 11:13
  • 1106

mui的上拉加载下拉刷新的实现

mui的上拉加载下拉刷新的简单实现

jquery 下拉刷新 上拉加载

/** * Created by Administrator on 2015/11/20. */ // 需要引入 zepto.min.js 文件 // dropload.js 文件内容 ;(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery weui 实现手机滚动刷新,结合底部tabber
举报原因:
原因补充:

(最多只允许输入30个字)