通过上拉获得数据的方式实现菜品列表的功能

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}}">

转载请注明：xuhss » python flask实战订餐系统微信小程序-50通过上拉获得数据的方式实现菜品列表的功能