之前用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);
}
});
});内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:https://sulao.cn/post/622
评论列表