之前用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"></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"></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); } }); });