标签：css 分页 for probe shrink 数据 console col ext
js代码
var win = $(window), scrollAreaEl = $(‘.t_r_content‘), leftFreezeEl = $(‘.t_l_freeze‘), leftTableEl = leftFreezeEl.find(‘table‘), rightTableEl = $(‘.t_r_t table‘); //动态计算容器最大高度 function adjustHeight() { var winHeight = win.height(), tableHeight = winHeight - 90; leftFreezeEl.height(tableHeight); scrollAreaEl.height(tableHeight); } adjustHeight(); win.on(‘resize‘, adjustHeight); //设置iscroll var myScroll = new IScroll(".t_r_content", { scrollbars: true, mouseWheel: true, interactiveScrollbars: true, shrinkScrollbars: ‘scale‘, fadeScrollbars: true, scrollX: true, scrollY: true, probeType: 2, bindToWrapper: true }); var pullDown = $("#pullDown"), pullUp = $("#pullUp"), pullDownLabel = $(".pullDownLabel"), pullUpLabel = $(".pullUpLabel"), container = $(‘#list‘), container1 = $(‘#list1‘), loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新 pullDown.hide(); pullUp.hide(); //阻止默认滚动 scrollAreaEl.on(‘touchmove mousewheel‘, function (e) { e.preventDefault(); }); //固定上左表头的滚动 myScroll.on(‘scroll‘, updatePosition); myScroll.on(‘scrollEnd‘, updatePosition); var loadingStep = 0; function updatePosition() { var a = this.y; var b = this.x; leftTableEl.css(‘transform‘, ‘translate(0px, ‘ + a + ‘px) translateZ(0px)‘); rightTableEl.css(‘transform‘, ‘translate(‘ + b + ‘px, 0px) translateZ(0px)‘); if(loadingStep == 0 && !pullDown.attr("class").match(‘refresh|loading‘) && !pullUp.attr("class").match(‘refresh‘)) { console.log(this.y); if(this.y > 40) { //下拉刷新操作 $(".pulldown-tips").hide(); pullDown.addClass("refresh").show(); pullDownLabel.text("松手刷新数据"); loadingStep = 1; console.log("下拉刷新操作"); pulldown(); } else if(this.y < (this.maxScrollY - 14)) { //上拉加载更多 pullUp.addClass("refresh").show(); pullUpLabel.text("正在加载"); loadingStep = 1; console.log("上拉加载更多"); pullUpAction(); } } } /** * 上拉加载 */ function pullUpAction() { setTimeout(function() { var li, i; for(i = 0, li = ""; i < 3; i++) { li += "<tr><td>" + "new Add " + i + "</td><td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td></tr>"; } container.append(li); var li1, j; for(j = 0, li1 = ""; j < 3; j++) { li1 += "<tr><td>" + "new Add " + j + "</td></tr>"; } container1.append(li1); pullUp.attr(‘class‘, ‘‘).hide(); myScroll.refresh(); loadingStep = 0; }, 1000); } /** * 下拉加载 */ function pulldown(){ setTimeout(function() { pullDown.attr(‘class‘, ‘‘).hide(); loadingStep = 0; myScroll.refresh(); }, 1000); }
html
<div style="margin-top: 44px;"> <div id="pullDown" class=""> <div class="pullDownLabel"></div> </div> <div class="data-table"> <div class="t_l"> <table> <tbody> <tr> <th>品类1</th> </tr> </tbody> </table> <div class="t_l_freeze"> <table id="list1"> <tr> <td>品类1</td> </tr> <tr> <td>男鞋2</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋</td> </tr> <tr> <td>男鞋AA</td> </tr> </table> </div> </div> <div class="t_r"> <div class="t_r_t"> <table> <tbody> <tr> <th>1a</th> <th>2b</th> <th>3c</th> <th>4d</th> <th>5e</th> <th>6f</th> <th>7g</th> <th>8h</th> <th>9i</th> </tr> </tbody> </table> </div> <div class="t_r_content"> <table> <tbody id="list"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table> </div> </div> </div> <div id="pullUp" class=""> <div class="pullUpLabel">加载更多</div> </div> </div>
标签：css 分页 for probe shrink 数据 console col ext
原文地址：https://www.cnblogs.com/kkvt/p/14080686.html
