jquery weui 實現手機滾動重新整理，結合底部tabber
阿新 • • 發佈：2019-01-25
<!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>