Heim > Web-Frontend > Layui-Tutorial > So verwenden Sielayui.laypage

So verwenden Sielayui.laypage

藏色散人
Freigeben: 2020-11-18 11:28:41
Original
2440 Leute haben es durchsucht

So verwenden Sielayui.laypage: Laden Sie zuerst das Pluginlayui.laypage herunter und verwenden Sie dann das Modul über „$('.layui-laypage .layui-laypage-curr em').css('background','' )" Dürfen.

So verwenden Sielayui.laypage

Empfohlen: „layUI Tutorial

Beziehen Sie sich auf das offizielle Dokument vonlayui.laypage https://www.layui.com/demo/laypage.html

Der erste Schritt besteht darin, das Plug-in herunterzuladen (Beachten Sie, dass Sie es nicht einfach importieren können.) Layui.css undlayui.js wurden offiziell automatisch erstellt. Der Pfad der Datei darf nicht falsch sein Der Pfad ist

    ./layui/css /layui.css
    1. ./layui/layui.js

Der zweite Schritt ist die Verwendung des Moduls

    //分页    function cutPage(pagesCount){
        layui.use(['laypage', 'layer'], function(){              var laypage = layui.laypage,
              layer = layui.layer;              //总页数大于页码总数              laypage.render({
                elem: 'cutPage',//分页容器 ,html代码为 <p id=&#39;cutPage&#39;></p>
                count:pagesCount ,//数据总数,数据总数后台会在第一次页面加载的时候返回给你
                limit:5, //每页展示的数据条数
                jump: function(obj){ //jump主要是包含要执行的函数
                  console.log(obj.curr)  //分页器的页码,作为请求参数
                  $('.layui-laypage .layui-laypage-curr em').css('background','#009688')
                  cutAdvertList(obj.curr)  //这个是数据请求接口的函数封装
               }
            })
        })
    }
Nach dem Login kopieren
 list=( i=;i<data.info.list.length;i++
Nach dem Login kopieren

Hier gibt es natürlich eine Falle , die Schnittstelle zum Laden der Seite zum Anfordern von Daten wird verwendet. Der Code ist zwar derselbe, wird jedoch beim Ausführen in einer Endlosschleife ausgeführt, sodass wir die Datenanforderungsfunktion neu kapseln müssen

Das obige ist der detaillierte Inhalt vonSo verwenden Sielayui.laypage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage