zoukankan      html  css  js  c++  java
  • angual+mui 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

    //html 部分

    <div class="mui-content">

    <div id="slider" class="mui-slider mui-fullscreen">

    <div id="sliderSegmentedControl" class=" mui-segmented-control mui-segmented-control-inverted">

    <!--<div class="mui-scroll">-->

    <a class="mui-control-item mui-active" href="#item1mobile">

    推荐

    </a>

    <a class="mui-control-item" href="#item2mobile">

    热点

    </a>

    <!--</div>-->

    </div>

    <div class="mui-slider-group">

    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">

    <div id="scroll1" class="mui-scroll-wrapper">

    <div class="mui-scroll">

    <ul class="mui-table-view">

    <li class="mui-table-view-cell" ng-repeat="i in data">

    <p ng-bind="i"></p>

    </li>

    </ul>

    </div>

    </div>

    </div>

    <div id="item2mobile" class="mui-slider-item mui-control-content">

    <div class="mui-scroll-wrapper">

    <div class="mui-scroll">

    <ul class="mui-table-view">

    <li class="mui-table-view-cell" ng-repeat="i in data1">

    <p ng-bind="i"></p>

    </li>

    </ul>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

     

    //js部分

    var app = angular.module('pullapp', [])

    app.controller('pullcon', ['$scope', '$interval', function($scope, $interval) {

    $scope.data = [];

    $scope.data1 = [];

    mui.init();

    (function($) {

    //阻尼系数

    var deceleration = mui.os.ios ? 0.003 : 0.0009;

    $('.mui-scroll-wrapper').scroll({

    bounce: false,

    indicators: true, //是否显示滚动条

    deceleration: deceleration

    });

    $.ready(function() {

    //循环初始化所有下拉刷新,上拉加载。

    $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {

    console.log(mui('.mui-slider-group .mui-scroll'))

    $(pullRefreshEl).pullToRefresh({

    up: {

    callback: function() {

    var self = this;

    setTimeout(function() {

    createFragment(index, 10,self);

    // self.endPullUpToRefresh();

    }, 1000);

    }

    }

    });

    });

    var createFragment = function(index, count, reverse) {

    console.log(reverse);

    if(index == 0) {

    console.log(11)

    var list = [{

    name: '1111'

    }, {

    name: '222'

    }, {

    name: '333'

    }, {

    name: '444'

    }]

    for(i in list) {

    $scope.data.push(list[i].name)

    }

    reverse.endPullUpToRefresh(true);

    // mui('#item1mobile').pullRefresh().endPullupToRefresh($scope.data.length < 10); 

    } else {

    var list = [{

    name: '555'

    }, {

    name: '654'

    }, {

    name: '73`2'

    }, {

    name: '8322'

    }]

    for(i in list) {

    $scope.data1.push(list[i].name)

    }

    console.log(list.length)

    reverse.endPullUpToRefresh(true);

    //mui('#item2mobile').pullRefresh().endPullupToRefresh($scope.data1.length < 10); 

    }

    $scope.$apply();

    };

    });

    })(mui);

    }]);

     

    //需要引用的js

     

      <script src="../js/jquery.min.js"></script>

    <script src="../js/angular.min.js"></script>

    <script src="../js/mui.min.js"></script>

    <script src="../js/mui.pullToRefresh.js"></script>

     

    //body里面需要添加angual的

    <body ng-app="pullapp" ng-controller="pullcon">

  • 相关阅读:
    【多线程】-实现多线程的三种方法
    在java项目启动时就执行某操作
    PHP上传多个Excel表格里的数据到数据库然后在页面显示
    PHP如何生成word并下载
    PHP把网页表单导出到word
    把PHP网页表单导出到word文档中
    HTTP Keep-Alive的作用
    利用paramiko获取上传下载远程服务器的资源信息
    3.django连接mysql数据库及安装mysqldb驱动报错解决办法
    3.Pycharm和navicate的使用
  • 原文地址:https://www.cnblogs.com/zyzhao/p/7479813.html
Copyright © 2011-2022 走看看