B站配套视频教程观看
通过上拉获得数据的方式实现菜品列表的功能
index.js添加参数：
p表示分页
processing 是否正在处理
//index.js
//获取应用实例
var app = getApp();
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
loadingHidden: false, // loading
swiperCurrent: 0,
categories: [],
activeCategoryId: 0,
goods: [],
scrollTop: "0",
loadingMoreHidden: true,
searchInput: '',
p:1,
processing:false,
},
去除我们为了演示小程序添加的Onload初始化代码：
that.setData({
banners: [
{
"id": 1,
"pic_url": "/images/food.jpg"
},
{
"id": 2,
"pic_url": "/images/food.jpg"
},
{
"id": 3,
"pic_url": "/images/food.jpg"
}
],
categories: [
{id: 0, name: "全部"},
{id: 1, name: "川菜"},
{id: 2, name: "东北菜"},
],
activeCategoryId: 0,
goods: [
{
"id": 1,
"name": "小鸡炖蘑菇-1",
"min_price": "15.00",
"price": "15.00",
"pic_url": "/images/food.jpg"
},
{
"id": 2,
"name": "小鸡炖蘑菇-1",
"min_price": "15.00",
"price": "15.00",
"pic_url": "/images/food.jpg"
},
{
"id": 3,
"name": "小鸡炖蘑菇-1",
"min_price": "15.00",
"price": "15.00",
"pic_url": "/images/food.jpg"
},
{
"id": 4,
"name": "小鸡炖蘑菇-1",
"min_price": "15.00",
"price": "15.00",
"pic_url": "/images/food.jpg"
}
],
loadingMoreHidden: false
});food/index.js文件添加getFoodList函数
,
getFoodList: function () {
var that = this;
if( that.data.processing ){
return;
}
if( !that.data.loadingMoreHidden ){
return;
}
that.setData({
processing:true
});
wx.request({
url: app.buildUrl("/food/search"),
header: app.getRequestHeader(),
data: {
cat_id: that.data.activeCategoryId,
mix_kw: that.data.searchInput,
p: that.data.p,
},
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({"content": resp.msg});
return;
}
var goods = resp.data.list;
that.setData({
goods: that.data.goods.concat( goods ),
p: that.data.p + 1,
processing:false
});
if( resp.data.has_more == 0 ){
that.setData({
loadingMoreHidden: false
});
}
}
});
}
food/index.wxml中添加时间绑定 切换tab标签出发后端请求：
bindtap="catClick"
<!--分类展示-->
<view class="type-container">
<scroll-view class="type-navbar" scroll-x="true">
<view class="type-box" wx:for-items="{{categories}}" wx:key="id">
<view id="{{item.id}}" class="type-navbar-item {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="catClick">
{{item.name}}
</view>
</view>
</scroll-view>
</view>
index.js添加catClick
,
catClick: function (e) {
this.setData({
activeCategoryId: e.currentTarget.id
});
this.setData({
loadingMoreHidden: true,
p:1,
goods:[]
});
this.getFoodList();
}
首页获取完成后 也需要进行查询：
that.getFoodList();
getBannerAndCat: function () {
var that = this;
wx.request({
url: app.buildUrl("/food/index"),
header: app.getRequestHeader(),
success: function (res) {
var resp = res.data;
if (resp.code != 200) {
app.alert({"content": resp.msg});
return;
}
that.setData({
banners: resp.data.banner_list,
categories: resp.data.cat_list
});
that.getFoodList();
}
});
},当我们切换tab页签 就会发送这个请求、
api/下面的Food.py添加接口
@route_api.route("/food/search" )
def foodSearch():
resp = {'code': 200, 'msg': '操作成功~', 'data': {}}
req = request.values
cat_id = int( req['cat_id'] ) if 'cat_id' in req else 0
mix_kw = str(req['mix_kw']) if 'mix_kw' in req else ''
p = int( req['p'] ) if 'p' in req else 1
if p < 1:
p = 1
page_size = 10
offset = ( p - 1 ) * page_size
query = Food.query.filter_by(status=1 )
if cat_id > 0:
query = query.filter_by(cat_id = cat_id)
if mix_kw:
rule = or_(Food.name.ilike("%{0}%".format(mix_kw)), Food.tags.ilike("%{0}%".format(mix_kw)))
query = query.filter(rule)
food_list = query.order_by(Food.total_count.desc(), Food.id.desc())\
.offset( offset ).limit( page_size ).all()
data_food_list = []
if food_list:
for item in food_list:
tmp_data = {
'id': item.id,
'name': "%s"%( item.name ),
'price': str( item.price ),
'min_price':str( item.price ),
'pic_url': UrlManager.buildImageUrl(item.main_image)
}
data_food_list.append(tmp_data)
resp['data']['list'] = data_food_list
resp['data']['has_more'] = 0 if len( data_food_list ) < page_size else 1
return jsonify(resp) index.js添加OnReachBottn函数实现上拉效果，这个函数是微信的函数 他会自动的在触碰到底部时被调用
onReachBottom: function () {
var that = this;
setTimeout(function () {
that.getFoodList();
}, 500);
},下拉到底部就又会触发一个请求
不能发送请求的情况
正在处理时不能发送请求
数据库全部被加载完成后 也不能发送请求。
点击详情页，发现id=undefined
index.wxml修改：
data-id="{{item.id}}"
<!--分类展示-->
<view class="type-container">
<scroll-view class="type-navbar" scroll-x="true">
<view class="type-box" wx:for-items="{{categories}}" wx:key="id">
<view id="{{item.id}}" class="type-navbar-item {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="catClick" data-id="{{item.id}}">
