精华内容
下载资源
问答
  • 分页,jquery weui 分页

    2018-11-29 09:56:00
    var pages = 1; var limit = 10; var loading = false; $('.weui-loadmore').hide(); $(function () { load(); }) $("#listwrap").pullToRefresh().on("pul...

    var pages = 1;
    var limit = 10;
    var loading = false;
    $('.weui-loadmore').hide();
    $(function () {
    load();
    })

    $("#listwrap").pullToRefresh().on("pull-to-refresh", function () {//zfl
    setTimeout(function () {
    pages = 1;
    $("#body_list").html("");
    load();
    if (loading) loading = false;
    $("#listwrap").pullToRefreshDone(); // 重置下拉刷新 zfl
    }, 1500); //模拟延迟
    });

    $("#listwrap").infinite(50).on("infinite", function () {
     if (loading) return;
    loading = true;
     pages++; //页数
     $('.weui-loadmore').show();
    setTimeout(function () {
     load();
     loading = false;
     }, 2500);//zfl
     //模拟延迟
    });

    滚动加载有事不响应,并非是document.body的问题,需要看页面布局,看绑定的body的滚动条是否显示

     

    SELECT tableB.*
    FROM (
    SELECT ROW_NUMBER() OVER (ORDER BY ID DESC) AS rownumber, *
    FROM (
    SELECT ta.*,tqt.QuestionClassify FROM yc.table AS ta

    ) tableB
    ) tableB
    WHERE rownumber > @Limit * (@Page - 1)
    AND rownumber <= @Limit * @Page

    转载于:https://www.cnblogs.com/DoudouZhang/p/10036481.html

    展开全文
  • weUI分页查询实现

    2019-10-02 23:43:43
    本文旨在介绍移动端h5分页查询实现 1.前端html 前端基于weui 样式库实现 参考http://jqweui.com/ 1 <div class="weui-search-bar" id="searchBar"> 2 <form class="weui-search-bar__form"> ...

    本文旨在介绍移动端h5分页查询实现

    1.前端html

        前端基于weui 样式库实现   参考http://jqweui.com/

     1   <div class="weui-search-bar" id="searchBar">
     2             <form class="weui-search-bar__form">
     3                 <div class="weui-search-bar__box">
     4                     <i class="weui-icon-search"></i>
     5                     <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品" required=required />
     6                     <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
     7                 </div>
     8                 <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
     9                     <i class="weui-icon-search" id="search"></i>
    10                     <span>搜索您想要的商品</span>
    11                 </label>
    12             </form>
    13             <button type="button" class="btn btn-info btn-xs" style="margin-left:5px" id="btn-search">搜索</button>
    14            
    15         </div>
    View Code

    2.js前端分页

     1             //全局变量
     2             var load = false; // load为判断接口是否请求完成,防止多次触摸、多次点击导致接口的多次请求出错
     3             var page = 1;//默认第一页
     4             
     5             $(function () {
     6                 getData(page, "/Home/GetProListJson"); //初始化数据从第一页数据开始请求            
     7             });
     8 
     9             //请求后台数据
    10             function getData(page, url) {  //请求接口的方法,方法带page,url两个参数。
    11                 $('#more').text('正在加载中...');
    12                 $.ajax({
    13                     url: url,  //请求接口的url
    14                     type: 'get',//请求方式(post或get)默认为get
    15                     async: true,  //默认情况下是true表示所有请求为异步请求,如果要为同步则用false
    16                     cache: false,//默认为false,设置为false将不会从浏览器缓存中加载请求信息。
    17                     dataType: "json",
    18                     data: {
    19                         'page': page,
    20                         'limit': 6,
    21                         'name': $("#searchInput").val()
    22                     },
    23                     success: function (data) {  //请求成功调用的回调函数
    24                         if (data.code == 0) {
    25                             $("#pageNum").val(parseInt(data.currentPage) + 1);
    26                             showList(data);
    27                             if (data.currentPage >= data.totalPage) { //这里判断接口数据是否到底部
    28                                 load = true;
    29                                 $("#more").html('已经到底了');
    30                             } else if (data.currentPage < data.totalPage) {
    31                                 load = false;
    32                                 $("#more").html('查看更多');
    33                             }
    34                         }
    35                     },
    36                     error: function (error) { //请求失败调用的回调函数
    37                         console.log(error);
    38                     }
    39                 });
    40             }
    41             //显示数据
    42             function showList(data) {   //显示列表的html内容
    43                 for (var i = 0; i < data.list.length; i++) {
    44                     var html = "<li>"
    45                     html += "<a href='/Home/ProInfo?id=" + data.list[i].Goods_Id + "'>"
    46                     html += " <div class='proimg'><img src='" + data.list[i].Img_Url + "' /></div>";
    47                     html += " </a>";
    48                     html += " <div class='protxt'>";
    49                     html += " <div class='name'>" + data.list[i].Goods_Name + "</div>";
    50                     html += " <div class='wy-pro-pri'>¥<span>" + data.list[i].Goods_Price + "</span></div>";
    51                     html += "</div>";
    52                     html += "<div class='button_sp_area'><a href='javascript: ;' class='weui-btn weui_btn_mini weui-btn_primary' id='btn-mianfei'>免费领取</a></div>";
    53                     $("#goodslist").append(html);
    54 
    55                 }
    56             }
    57             //继续加载按钮事件  ,点击按钮后请求换页的数据
    58             $(document).on("click", '#more', function () {
    59                 if (load == false) {
    60                     $("#goodslist").append(html);
    61                     load = true;
    62                     $("#pageNum").val(1);
    63                     page = $("#pageNum").val();
    64                     getData(page, "/Home/GetProListJson");
    65                 }
    66             }) 
    67             //搜索功能
    68             $(document).on("click", "#btn-search", function () {
    69                 if (load == false) {
    70                     $("#goodslist").empty();
    71                     load = true;
    72                     $("#pageNum").val(1);
    73                     page = $("#pageNum").val();
    74                     getData(page, "/Home/GetProListJson");
    75                 }
    76             });
    77 
    78             //==============核心代码=============  
    79             //鼠标向下滚动加载下一页数据,或者移动端向下滑动加载下一页数据
    80             var winH = $(window).height(); //页面可视区域高度  
    81             var scrollHandler = function () {
    82                 var pageH = $(document.body).height();
    83                 var scrollT = $(window).scrollTop(); //滚动条top   
    84                 var aa = (pageH - winH - scrollT) / winH;
    85                 if (aa < 0.02) {//0.02是个参数 
    86                     if (load == false) {
    87                         load = true;
    88                         page = $("#pageNum").val();
    89                         getData(page, "/Home/GetProListJson");
    90                     }
    91 
    92                 }
    93             }
    94             //定义鼠标滚动事件  
    95             $(window).scroll(scrollHandler);  
    View Code

    3.后端数据接口

    后端实现比较简单,只要注意返回json数据格式的定义,这里只介绍下控制器实现代码

     1         [HttpGet]
     2         public ActionResult GetProListJson(Pagination pagination)
     3         {
     4             var ret = new
     5             {            
     6                 code = 0,
     7                 msg = "",
     8                 list = goodsApp.GetList(Request["name"], pagination),
     9                 currentPage = pagination.page,
    10                 count = pagination.total,
    11                 totalPage= pagination.total/pagination.limit
    12             };
    13             return Content(ret.ToJson());
    14         }
    View Code

    4.总结

       1.首先定义请求参数,这里面参数是{'page': page,limit': 6,'name': $("#searchInput").val()}

       2.确定哪些参数是从页面获取,比如这里面查询参数name;确定哪些参数是动态变化的,这里面是page 

       3.页面状态的变化,比如在这有两种状态,数据已加载完和未加载完

       4.还有js方法的封装,注意单一职能原则,毕竟js也是面向对象的语言

     

    转载于:https://www.cnblogs.com/wktang/p/10547616.html

    展开全文
  • $smarty.const.__MODULE__}/Index/index" class="weui-btn weui-btn_default">返回首页 后台控制器方法 (thinkphp3.2) //考试结果查询页 public function showlist(){ if(IS_POST){ $result=M(...

    前台模板页面

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>查看成绩页</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link rel="stylesheet" href="{$smarty.const.HOME_CSS_URL}/weui.css"/>
        <link rel="stylesheet" href="{$smarty.const.HOME_CSS_URL}/weuix.css"/>
    
        <script src="{$smarty.const.HOME_JS_URL}/zepto.min.js"></script>
        <script src="{$smarty.const.HOME_JS_URL}/php.js"></script>
    
    </head>
    
    <body ontouchstart>
    
    <div class="page-hd">
        <h1 class="page-hd-title">
            {cookie('Front_name')} 的考试成绩
        </h1>
        <p class="page-hd-desc">正常情况每个月参加一次考试</p>
    </div>
    
    
    <div class="page-bd-15">
        <div class="weui-cells" id="rank-list">
        </div>
    
        <div class="weui-loadmore" id="more">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
    
    
    <script id="tpl" type="text/html">
    
        <table class="weui-table weui-table-2n" >
            <thead>
            <tr><th>考试时间</th><th>成绩</th><th>结果</th></tr>
            </thead>
            <tbody >
            <% for(var i in list) {   %>
            <tr><td title="考试时间"><%=date("Y-m-d",list[i].time)%></td><td title="成绩"><%=list[i].result%>分</td><td title="结果">
                <% if (list[i].result>80) { %>
                    <span style="color:#04BE02;">通过体检</span>
                <% } else if (list[i].result>=50) { %>
                    <span style="color:#18B4ED;">需要再教育</span>
                <% } else { %><span style="color:#EF4F4F;">
                    体检不合格</span>
                <% } %>
            </td></tr>
            <% } %>
            </tbody>
    
        </table>
    
    </script>
    
    
    
    <script>
    
        var pagesize=5;//每页数据条数
        var page = 2;
        var maxpage;
        $('#more').hide();
        function ajaxpage(page){
            //alert(page);
            $.ajax({
                type : "POST",
                url : '{$smarty.const.__ACTION__}',
                data: {
                    "page":page,
                    "pagesize":pagesize
                },
                dataType : "json",
                beforeSend:function(){
                    $("#more").show();
                },
                success : function(rs) {
                    //alert(rs.total);
                    $("#rank-list").append(tpl(document.getElementById('tpl').innerHTML,rs));
                    var maxpage = Math.ceil(rs.total / pagesize);
                    sessionStorage['maxpage'] = maxpage;
                },
                timeout : 15000
            });
        }
    
        $(window).scroll(
            function() {
                var scrollTop = $(this).scrollTop();//滚动条的垂直偏移
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight == scrollHeight) {
                    maxpage = sessionStorage['maxpage'];
                    if(page<=maxpage) {
                        ajaxpage(page);
                        page++;
                        //if(page==maxpage){
                       //     $("#more").html("没有更多数据了");return false;
                       // }
                    }else{
                        $("#more").html("没有更多数据了");return false;
                    }
                }
    
            });
        $(function(){
            ajaxpage(1);
        })
    
    </script>
    
    <br>
    <br><br>
    <br>
    
    
    <a href="{$smarty.const.__MODULE__}/Index/index"  class="weui-btn weui-btn_default">返回首页</a>
    <br>
    
    </body>
    </html>

    后台控制器方法 (thinkphp3.2)

    //考试结果查询页
        public function showlist(){
            if(IS_POST){
                $result=M("result");
                $total      = $result->where("uid=".cookie('Front_id'))->count();
    
                $pindex = max(1, I('page'));
                $psize = I('pagesize');
    
                $list =  $result->where("uid=".cookie('Front_id'))->order("time desc")->limit(($pindex - 1) * $psize.','.$psize)->select();
                
                $data['status']  = 1;
                $data['total'] = $total;
                $data['list'] = $list;
                $this->ajaxReturn($data);
            }
    
    
           $this->display();
        }

     

    展开全文
  • JQuery weui实现分页加载更多

    千次阅读 2018-08-10 15:48:04
    首先,我想说是当我刚用JQuery weui框架做加载更多的时候遇到的坑,同时我也下载了SUI Mobile框架的样式做页面。导致,当我使用JQuery weui自带的加载更多控件的时候无法生效。 原因,JQuery weui中的infinite和...

    首先,我想说是当我刚用JQuery weui框架做加载更多的时候遇到的坑,同时我也下载了SUI Mobile框架的样式做页面。导致,当我使用JQuery weui自带的加载更多控件的时候无法生效。

    原因,JQuery weui中的infinite和JQuery weui中的样式布局绑定的,导致无法生效。

    解决,去除掉SUI Mobile中的样式使用

    一、JQuery weui中自带的demo上拉加载更多

    <!DOCTYPE html>
    <html>
      <head>
        <title>滚动加载</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">
    
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
    ">
    
    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../comm/css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    
      </head>
    
      <body ontouchstart>
    
        <h1 class="demos-title">滚动加载</h1>
        <div id="list" class='demos-content-padded'>
          
          <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践,阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向。全书分为七大部分:第Ⅰ部分“人工智能”,第Ⅱ部分“问题求解”,第Ⅲ部分“知识、推理与规划”,第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生,是高等院校本科生和研究生人工智能课的首选教材,也是相关领域的科研与工程技术人员的重要参考书。</p>
          
          <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践,阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向。全书分为七大部分:第Ⅰ部分“人工智能”,第Ⅱ部分“问题求解”,第Ⅲ部分“知识、推理与规划”,第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生,是高等院校本科生和研究生人工智能课的首选教材,也是相关领域的科研与工程技术人员的重要参考书。</p>
          
          <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践,阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向。全书分为七大部分:第Ⅰ部分“人工智能”,第Ⅱ部分“问题求解”,第Ⅲ部分“知识、推理与规划”,第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生,是高等院校本科生和研究生人工智能课的首选教材,也是相关领域的科研与工程技术人员的重要参考书。</p>
          
          <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践,阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向。全书分为七大部分:第Ⅰ部分“人工智能”,第Ⅱ部分“问题求解”,第Ⅲ部分“知识、推理与规划”,第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生,是高等院校本科生和研究生人工智能课的首选教材,也是相关领域的科研与工程技术人员的重要参考书。</p>
          
          <p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材,已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践,阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向。全书分为七大部分:第Ⅰ部分“人工智能”,第Ⅱ部分“问题求解”,第Ⅲ部分“知识、推理与规划”,第Ⅳ部分“不确定知识与推理”,第Ⅴ部分“学习”,第Ⅵ部分“通信、感知与行动”,第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法,还描述了其各个研究方向最前沿的进展,同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生,是高等院校本科生和研究生人工智能课的首选教材,也是相关领域的科研与工程技术人员的重要参考书。</p>
          
        </div>
        <div class="weui-loadmore">
          <i class="weui-loading"></i>
          <span class="weui-loadmore__tips">正在加载</span>
        </div>
        <script src="../lib/jquery-2.1.4.js"></script>
    <script src="../lib/fastclick.js"></script>
    <script>
      $(function() {
        FastClick.attach(document.body);
      });
    </script>
    <script src="../js/jquery-weui.js"></script>
    
        <script>
          var loading = false;
          $(document.body).infinite().on("infinite", function() {
            if(loading) return;
            loading = true;
            setTimeout(function() {
              $("#list").append("<p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》英文版有1100多页,教学内容非常丰富,不但涵盖了人工智能基础、问题求解、知识推理与规划等经典内容,而且还包括不确定知识与推理、机器学习、通讯感知与行动等专门知识的介绍。目前我们为本科生开设的学科基础必修课“人工智能导论”主要介绍其中的经典内容,而研究生必修的核心课程“人工智能原理”主要关注其中的专门知识。其实《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》也适合希望提高自身计算系统设计水平的广大应用计算技术的社会公众,对参加信息学奥林匹克竞赛和ACM程序设计竞赛的选手及其教练员也有一定的参考作用。</p>");
              loading = false;
            }, 2000);
          });
        </script>
      </body>
    
    </html>
    

    二、滚动加载plus版本

    需求:当刚进入页面的时候,通过传入的pageSize,显示指定数据条数;

    上拉显示加载更多,并且紧接着显示更多数据内容;

    当加载完毕,给予“没有更多数据提示”。

    核心代码

    <div id="content-wrap" class="content">
    ……具体内容……
    </div>
    <div class="weui-loadmore" id="loading" style="display: none">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
     var page = 1;
        //进入页面加载,这里是上拉加载更多的方法实现
        load(page);
        var loading = false;
        $(document.body).infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            setTimeout(function () {
                page = page + 1;
                var moreData = load(page);
                if (moreData[1] != 0) {
                    $("#loading").css("display", "block");
                    $("#content-wrap").append(moreData[0]);
                    loading = false;
                } else {
                    loading = true;
                    $("#loading>span").html("暂无更多数据了哦!").css("color", "#BDBDBD");
                    $("#loading>i").css("display", "none");
                }
            }, 1000);
        });
    
        });
    
        function load(page) {
            storeToken();
            var max = 6;
            var morePage;
            var dataLength;
            var data = {
                "page": {
                    "pageNo": page,
                    "pageSize": max
                }
            };
    
           //这里是加载数据的方法
            var postSuccess = function (data) {
                var template = document.getElementById('show-template').innerHTML;
                var compiled = Template7(template).compile();
                var compiledRendered = compiled(data);
                // Insert rendered template
                dataLength = data.list.length;
                if (page > 1) {
                    morePage = compiledRendered;
                } else {
                    document.getElementById('content-wrap').innerHTML = compiledRendered;
                }
            };
            dopost(data, loan_record_url, true, postSuccess);
            return [morePage, dataLength];
        }

    欢迎加入 CSDN技术交流群:(点击即可加群)QQ群:681223095。

    因经常有人留言,未能及时查看到和回复,所以特建此群,以方便交流。方便问题讨论,有问题和没有问题的小伙伴均可加入,用作自我学习和共同进步。本博主不一定长期在线,但是qq群里会有很多热心的小伙伴,大家一起讨论解决问题。
    右边的二维码是公众号。关注公众号,更多学习内容给予推送,争取每日更新

    这里写图片描述

    展开全文
  • JQuery WEUI分页加载

    2020-12-20 15:34:00
    正在加载...var records = [];var havaData = false;var start = 0;var end = 5;var count = -1;var jsonData = {"openid":openid,"start":start,"end":end};function getData(jsonData){$.get("http://xx",jsonData...
  • [WeUI]实现滚动刷新、数据分页

    千次阅读 2019-10-25 15:27:00
    link rel="stylesheet" href="css/jquery-weui.min.css"> <link rel="stylesheet" href="css/weui.min.css"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jqu...
  • 使用前记得先引入:weui.min.css、jquery-weui.min.css、jquery-weui.min.js 第一步:将下面的代码放在body结束标签上面(这个位置可以自己按需求放) <div class="weui-loadmore" id="loading"> <i ...
  • jquery weui 上拉加载,下拉刷新,以及问题解答。 以下是上拉加载,和下拉刷新的全部代码,直接复制就能使用,记得把api换成项目真实地址,亲测有效,大神勿喷 html <div class="item" id="11111"> <div ...
  • 微信小程序分页效果实现

    千次阅读 2017-12-13 20:32:42
    index.js // pages/bianmin/bianmin.js var p = 0 var GetList = function (that) { wx.request({ url: url, method: "POST", data: { page: p }, header: { 'content-type': 'a
  • *新配置的 api-server,用来使用 axios 分页获取数据 * * 1.需要使用 express 来新建并启动服务,需要安装 express / body-parser / fs / * 2.port 的设置从 PORT || config.dev.port 中解析,因为 port 的解析...
  • //绑定下拉刷新事件 if ($("#page-ptr")[0]) { $("#page-ptr").pullToRefresh().on("pull-to-refresh", function () { $('#page-ptr').infinite() $('.weui-infinite-scroll').show().html("正在加载...");...
  • jqweui tabbar使用示例

    2017-11-05 10:16:00
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">  /*注意: 一定要定义body,html的style*/ body, html { height: 100%; -webkit-tap-highlight-color: ...
  • <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"> <view class="weui-navbar__title">{{item}} <view class="weui-navbar__slider...
  • jqweui 中的tabbar导航

    2018-01-08 19:18:00
    最近做微信的服务号项目,用的jqweui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好。真是很让人头疼! 所以结合着自己做的项目,随便写一点东西。 比如说,tabbar导航的切换。官网给说的...
  • 问题描述:这个弹框的分页不能正常显示,如果把layer.open前面的parent去掉,就可以正常显示. 代码展示: paren ... layer的iframe弹框中父子元素的传值 项目中,左侧导航树,右侧是 iframe 嵌套的页面,在右侧页面中又有...
  • 上一篇文章,我已经实现了ecshop使用jquery.more.js加载瀑布流,可是在测试过程中我发现,原本在chrome浏览器中测试可以通过,可是到了我手机的浏览器中...由于我的页面中是使用weui-tab的方式来分类加载数据,所...
  • 小程序数据分页

    2020-11-04 14:58:41
    后端返回的数据和PC端分页时返回数据相同。
  • 之前的源码可能不完整,这是完整的 使用的是WeUI v1.1.1 ...版本不同,效果可能不一样使用weui 时 看官方文档 有多页面切换和底部导航 缺找不实现的方法 然后就用swiper 切换实现 <!DOCTYPE html> <html lang
  • wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"></image> <input type="text" class="weui-...
  • 此博客引用css和js下载地址: https://download.csdn.net/download/linsa_pursuer/10479055   1.EXCEL工具类(导入jar包poi) package com.taxsearch.entity; import java.util.Date;...import java.util...
  • */ data: { active: 1, arr:['1','2','3','4'], tabs: [], arr2: [], activeTab: 0, }, onLoad() { wx.setNavigationBarTitle({ title: 'tab分页加载' }) const titles = ['首页', '外卖', '商超生鲜', '购物', '...
  • jquery weui轮播图的使用

    千次阅读 2018-03-02 10:09:00
    jquery weui的轮播图是对第三方插件swiper的一个封装,所以使用时需要引入对应的swiper.min.js文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> ...
  • // 实例化分页类 传入总记录数和每页显示的记录数 //请求的数据是传来的页码数向后数十条 $user_list = $user_obj->where($where)->order($order)->limit($page*10,10)->select(); //如果是ajax请求则返回json数据...
  • 注:page-no 默认为0,如果没有分页加载的需要,不需要做任何修改,page-src直接接收数据即可。如果有分页加载,page-no 则为当前页码数(从0开始算),page-src 则为当前页的数据数组。 自定义方法 ...
  • jquery weui ajax滚动加载更多

    万次阅读 2017-07-20 10:18:20
    手机端使用jquery weui制作ajax滚动加载更多。 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: 滚动加载更多 #list{overflow: auto} #list img{width: 45%;height: 200p
  • 基于jQuery WeUi的手机端滚动分页组件,实现上拉加载下一页数据及下拉加载最新数据。对比网上常用手机端分页组件(如,iscroll.js)主要有以下优势:  1.使用非常简单,学习成本很低,1行js代码既可以完成前端代码...
  • 移动端框架之JQuery WeUI

    千次阅读 2017-05-31 15:59:56
    和JQuery WeUI 配合使用的WeUI,是移动端快速开发的利器。 在初步使用的过程中,发现JQuery WeUI扩展的几个功能...2.滚动加载:这几乎已经是移动端实现分页功能的首选。 3.下拉刷新:为了使你的产品更加专业

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 773
精华内容 309
关键字:

weui分页