Flask使用Layui实现下拉加载

之前用thinkphp+layui写过,随后会补上php版的下拉加载,当然使用的是layui模块化js框架,无需自己编写,只需要按照layui接口的格式返回数据即可,我们看代码吧

Flask接口

#!/usr/bin/python3
#coding:utf-8
__author__ = 'yang.su'
'''手机版'''

from flask import Flask,Blueprint,request,jsonify,render_template
from common import formatTime,getThumb,getPage
from flask_cache import Cache
from model.mysql import database
import pymysql
import math
import json
app = Flask(__name__)
#定义手机版蓝图
wap = Blueprint('wap', __name__)
#实例化缓存类
cache = Cache(app,config={'CACHE_TYPE': 'simple'})
db = database()

#首页
@wap.route('/')
@wap.route('/index')
def index():
    sql = """SELECT * FROM `v9_picture` WHERE `status`=99 ORDER BY `id` DESC LIMIT 10"""
    new = db.fetch_all(sql)
    return render_template('index.html', new=new)

#首页ajax下拉加载
@wap.route('/ajaxpic', methods=['POST','GET'])
def ajaxPic():
    page = request.form.get('page')
    #page页数
    if not page:
        page = 1
    else:
        page = int(page)
    #第一次显示数量
    pagebase = 10
    #每次下拉增加数量
    pagenum = 6
    #limit分页数
    limit = pagebase + (page * pagenum)
    sql = """SELECT COUNT(*) FROM `v9_picture` WHERE `status`=99"""
    total = db.fetch_one(sql)
    #总页数
    pagetotal = math.ceil(total[0]/pagenum)
    content = {}
    #防止下拉多次崩溃
    if pagetotal > 1 or page <= 10:
        sql2 = """SELECT * FROM `v9_picture` WHERE `status`=99 ORDER BY `id` DESC LIMIT %d,%d""" % (limit, pagenum)
        result = db.fetch_all(sql2)
        datas = []
        for val in result:
            datas.append({'id':val[0], 'title':val[3], 'thumb':getThumb(val[5]), 'time':formatTime(val[15])})
        content['code'] = 1
        content['msg'] = 'OK'
        #最多只让拉10次
        if pagetotal > 10:
            content['pagetotal'] = 10
        else:
            content['pagetotal'] = pagetotal
        content['list'] = datas
    else:
        content = {'code': 0}   
    return jsonify(content)

前端代码

{% include 'public/header.html' %}
<section>
    {% for val in new %}
    <div class="layui-box">
        <a class="layui-thumb" href="{{ url_for('wap.detail', id=val[0]) }}"><img lay-src="{{ val[5] | get_thumb }}" alt="{{ val[3] }}" /></a>
        <div class="layui-title">
            <h2><a href="{{ url_for('wap.detail', id=val[0]) }}" title="{{ val[3] }}">{{ val[3] }}</a></h2>
        </div>
        <div class="layui-tips">
            <div class="layui-posttime"><i class="layui-icon">&#xe609;</i><span class="layui-badge layui-date">{{ val[15] | format_time }}</span></div>
        </div>
    </div>
    {% endfor %}
</section>
<script src="{{ url_for('static',filename='layui/index.js') }}"></script>
{% include 'public/footer.html' %}

index.js代码

layui.use(['flow','jquery'], function(){
  var $ = layui.jquery;
  var flow = layui.flow;
  flow.load({
    elem: 'section'
    ,isAuto: true
    ,isLazyimg: true
    ,end: '更多图片请查看分类'
    ,done: function(page, next){
      setTimeout(function(){
      var lis = [];
      $.ajax({
        url: '/ajaxpic',
        data: {page: page},
        type: 'POST',
        dataType: 'json',
        success: function(json){
          var data = json;
          var arr = Object.keys(data.list);
          if(data.code == 1){
            for(var i in data.list){
              var str = '<div class="layui-box">'
                        +'<a class="layui-thumb" href="/detail/'+data.list[i]['id']+'"><img src="'+data.list[i]['thumb']+'" alt="'+data.list[i]['title']+'" /></a>'
                        +'<div class="layui-title"><h2><a href="/detail/'+data.list[i]['id']+'.html" title="'+data.list[i]['title']+'">'+data.list[i]['title']+'</a></h2></div>'
                        +'<div class="layui-tips"><div class="layui-posttime"><i class="layui-icon">&#xe609;</i><span class="layui-badge layui-date">'+data.list[i]['time']+'</span></div></div>'
                        +'</div>';
              lis.push(str); 	
            }
            next(lis.join(''), page < data.pagetotal);
          }else{
            return false;
          }
        }
      });
   	  },500);
    }
  });
});


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://sulao.cn/post/625.html

我要评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。