list-view+若干 bug

api/common.js

@@ -4,7 +4,7 @@ const token = wx.getStorageSync('accessToken');
 
 export default {
   community:{
-    list:()=>request.get('/api/community')
+    list:(data)=>request.get('/api/community',data)
   },
   address:{
     list(commityId){

api/shop.js

@@ -2,17 +2,7 @@ import request from './request';
 
 export default {
   category:()=>request.get('/api/merchant-categories'),
-  list(category_id,longitude,latitude){
+  list:(data)=>request.get('/api/merchant',data),
-    const data = {};
-    if(category_id){
-      data.category_id = category_id;
-    }
-    if(longitude&&latitude){
-      data.longitude = longitude;
-      data.latitude = latitude;
-    }
-    return request.get('/api/merchant',data);
-  },
   detail(id,lng,lat){
     const data = {};
     if(lng&&lat){
@@ -25,7 +15,7 @@ export default {
 
 
   
-  orderList:()=>request.get('/api/merchant-pay'),
+  orderList:(data)=>request.get('/api/merchant-pay',data),
   //计算商品订单金额
   calculateOrderPrice:(merchant_product_id)=>request.post('/api/merchant/order/calculate-price',{merchant_product_id}),
   //计算在线买单赠送积分

api/user.js

@@ -30,9 +30,9 @@ export default {
     },
     pre:(data)=>request.post('/api/order/pre-order',data),
     real:(data)=>request.post('/api/order',data),
-    list:()=>request.get('/api/order/user/list'),
+    list:(data)=>request.get('/api/order/user/list',data),
     cancel:(orderid)=>request.post(`/api/order/${orderid}/user/cancel`),
-    merchantList:()=>request.get('/api/merchant/order/user'),
+    merchantList:(data)=>request.get('/api/merchant/order/user',data),
     merchantDetail(order_id,longitude,latitude){
       const data = {};
       if(longitude&&latitude){

app.wxss

@@ -2,13 +2,13 @@
 page{
   font-size:32rpx;
   line-height: 1;
-  padding-bottom:80rpx;
   --main-font-color:#222222;
   --main-bgclolor:#F5F5F5;
   --main-color:#FEC400;
   --main-hover-color:#fcce39;
   color:var(--main-font-color);
   background-color:var(--main-bgclolor);
+  overflow: hidden;
 }
 
 button{
@@ -262,7 +262,6 @@ page-container .content{
   justify-content: space-between;
   background-color: #fff;
   font-size: 34rpx;
-  font-weight: 600;
 }
 .tab-bar .item-container{
   flex:1;
@@ -271,7 +270,7 @@ page-container .content{
 .tab-bar .item{
   position: relative;
   padding:40rpx 0;
-  color: #7C8695;
+  color: #555555;
   transition-duration: .4s;
   display: inline-block;
 }
@@ -286,7 +285,8 @@ page-container .content{
   transition-duration: .4s;
 }
 .tab-bar .current .item{
-  color: var(--main-color);
+  color: var(--main-font-color);
+  font-weight: 500;
 }
 .tab-bar .current .item::before{
   opacity: 1;
@@ -313,3 +313,7 @@ navigator button{
   color: #A1A1A1;
   margin-top:24rpx;
 }
+
+.scroll-view-dispatch{
+  height:100rpx;
+}

components/listView/index.js

@@ -0,0 +1,61 @@
+// components/listView/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    "bindrefresherrefresh":{
+      type:Function
+    },
+    "refresherTriggered":{
+      type:Boolean,
+      value:false
+    },
+    "height":{
+      type:Number
+    },
+    loadMoreText:{
+      type:String,
+      value:'已经到底了'
+    },
+    showLoadMore:{
+      type:Boolean,
+      value:true
+    },
+    loadAll:{
+      type:Boolean,
+      value:false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    defaultHeight:''
+  },
+  lifetimes:{
+    attached(){
+      const windowInfo = wx.getWindowInfo();
+      this.setData({
+        defaultHeight:`calc(100vh)`
+      })
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    refreshList(){
+      this.triggerEvent('refresh');
+    },
+    scrolling(event){
+      //scrollTop scrollHeight
+      const bottomHeight = event.detail.scrollHeight-event.detail.scrollTop-this.properties.height;
+      if(bottomHeight<100){
+        this.triggerEvent('loadMore');
+      }
+    }
+  }
+})

components/listView/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/listView/index.wxml

@@ -0,0 +1,7 @@
+<scroll-view scroll-y refresher-enabled="true" bindrefresherrefresh="refreshList" refresher-triggered="{{refresherTriggered}}" style="height:{{height*2}}rpx;" bindscroll="scrolling">
+  <slot/>
+  <view class="load-more" wx:if="{{showLoadMore}}">
+    <label class="text" wx:if="{{loadAll}}">{{loadMoreText}}</label>
+    <label class="text" wx:else>加载中...</label>
+  </view>
+</scroll-view>

components/listView/index.wxss

@@ -0,0 +1,21 @@
+.load-more{
+  padding:100rpx 0;
+  text-align: center;
+  color: #888888;
+  font-size:24rpx;
+  position: relative;
+  width:80%;
+  margin:0 auto;
+}
+.load-more .text{
+  background-color: var(--main-bgclolor);
+  padding:0 30rpx;
+}
+.load-more::before{
+  content: '';
+  position: absolute;
+  left:0;top:112rpx;
+  width:100%;height:1.5rpx;
+  background-color: rgba(136, 136, 136, 0.25);
+  z-index: -1;
+}

components/navbar/index.js

@@ -34,6 +34,7 @@ Component({
     attached(){
       console.log('1212121212');
       const windowInfo = wx.getWindowInfo();
+      
       this.setData({
         statusBarHeight:windowInfo.statusBarHeight
       })

pages/help/community/index.js

@@ -1,4 +1,5 @@
 import commonApi from '../../../api/common';
+const app = getApp();
 
 Page({
 
@@ -7,7 +8,12 @@ Page({
    */
   data: {
     currentCommunity:null,
-    communityList:[]
+    defaultCommunityId:null,
+    communityList:[],
+    scrollViewHeight:0,
+    lng:0,
+    lat:0,
+    pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTrigger:false}
   },
   onSelectItem(event){
     const pages = getCurrentPages();
@@ -22,22 +28,72 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    console.log(options);
+    const windowInfo = wx.getWindowInfo();
-    commonApi.community.list().then((data)=>{
+    this.setData({
+      scrollViewHeight:windowInfo.windowHeight,
+      defaultCommunityId:options.communityId
+    })
+    app.getLocation().then((res)=>{
+      this.setData({
+        lng:res.longitude,
+        lat:res.latitude
+      });
+      this.loadList();
+    }).catch(()=>{
+      this.loadList();
+    })
+  },
+  loadList(){
+    if(this.data.pager.loading||this.data.pager.loadAll){
+      return;
+    }
+    this.data.pager.loading = true;
+    this.setData({
+      pager:this.data.pager
+    });
+    const data = {
+      skip:this.data.pager.limit*this.data.pager.pageIndex,
+      limit:this.data.pager.limit
+    }
+    if(this.data.lng&&this.data.lat){
+      data.longitude = this.data.lng;
+      data.latitude = this.data.lat;
+    }
+    commonApi.community.list(data).then((data)=>{
       const communityList = data.items;
       let currentCommunity;
       data.items.map((item)=>{
-        if(item.id==options.communityId){
+        if(item.distance){
+          if(item.distance>=100){
+            item.distance = parseFloat(item.distance/1000).toFixed(1)+'km';
+          }else{
+            item.distance+='m';
+          }
+        }
+        if(item.id==this.data.defaultCommunityId){
           currentCommunity = item;
         }
       })
+
+      if(this.data.pager.pageIndex==0){
+        this.data.communityList = data.items;
+      }else{
+        this.data.communityList = this.data.communityList.concat(data.items);
+      }
+      this.data.pager.loading = false;
+      this.data.pager.pageIndex++;
+      this.data.pager.refreshTrigger = false;
+      if(data.items.length<this.data.pager.limit){
+        this.data.pager.loadAll = true;
+      }
+
       this.setData({
-        communityList,
+        communityList:this.data.communityList,
-        currentCommunity
+        currentCommunity,
+        pager:this.data.pager
       });
     });
   },
-
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/help/community/index.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "list-view":"/components/listView"
+  },
   "navigationBarTitleText": "开通小区"
 }

pages/help/community/index.wxml

@@ -1,4 +1,8 @@
-<view class="community-list">
+<list-view class="community-list" bind:refresh="refreshList" 
+    bind:loadMore="loadList" height="{{scrollViewHeight}}" 
+    refresher-triggered="{{pager.refreshTrigger}}" 
+    show-load-more="{{communityList.length!=0}}"
+    loading="{{pager.loading}}" load-all="{{pager.loadAll}}">
   <view class="item {{item.id==currentCommunity.id?'current':''}}" wx:for="{{communityList}}" wx:key="index" 
     bind:tap="onSelectItem" data-item="{{item}}">
     <view class="title">
@@ -10,4 +14,4 @@
       <label class="value">{{item.distance||''}}</label>
     </view>
   </view>
-</view>
+</list-view>

pages/help/community/index.wxss

@@ -32,4 +32,5 @@
   flex: 1;
 }
 .community-list .item .sub-title .value{
+  margin-left:10rpx;
 }

pages/help/index/index.js

@@ -48,7 +48,6 @@ Page({
     wx.getStorage({
       key:'pre-order',
       success:(res)=>{
-        console.log(res.data);
         const name = [];
         let count = 0;
         res.data.price_request.packages.map((item)=>{
@@ -61,6 +60,14 @@ Page({
             count:count
           }
         })
+      },
+      fail:(res)=>{
+        this.setData({
+          package:{
+            name:'',
+            count:0
+          }
+        })
       }
     });
     if(!this.data.manuallyChangedCommunity){
@@ -130,6 +137,9 @@ Page({
       success:(res)=>{
         res.data.addressid = this.data.currentAddress.id;
         userApi.order.real(res.data).then((data)=>{
+          this.setData({
+            isShowOrderConfirm:false
+          });
           wx.removeStorage({
             key: 'pre-order',
           });

pages/help/index/index.wxss

@@ -12,7 +12,6 @@
 .choose-community{
   padding:90rpx 40rpx 70rpx;
   position: relative;
-  color:#fff;
   font-size:0;
 }
 .choose-community .text{

pages/my/money/index.js

@@ -1,4 +1,5 @@
 import userApi from '../../../api/user';
+const app = getApp();
 
 Page({
 
@@ -6,7 +7,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    list:[]
+    list:[],
+    userInfo:{}
   },
 
   /**
@@ -15,7 +17,12 @@ Page({
   onLoad(options) {
     userApi.point.list().then((data)=>{
       this.setData({
-        list:data
+        list:data.items
+      })
+    });
+    app.getUserInfo().then((data)=>{
+      this.setData({
+        userInfo:data
       })
     })
   },

pages/my/money/index.json

@@ -1,4 +1,4 @@
 {
   "usingComponents": {},
-  "navigationBarTitleText": "消费金"
+  "navigationBarTitleText": "蜂蜜"
 }

pages/my/money/index.wxml

@@ -1,16 +1,16 @@
 <view class="consume">
   <view class="title">蜂蜜 (克)</view>
-  <view class="point">0</view>
+  <view class="point">{{userInfo.points}}</view>
   <view class="tips">取包裹自动抵扣</view>
 </view>
 
 <view class="money-list" wx:if="{{list.length>0}}">
   <view class="item" wx:for="{{list}}" wx:key="index">
     <view class="left">
-      <view class="name">跑腿订单返现</view>
+      <view class="name">{{item.description}}</view>
-      <view class="desc">2024.03.01 10:12:20</view>
+      <view class="desc">{{item.create_time}}</view>
     </view>
-    <view class="money money-yellow">3.3</view>
+    <view class="points">{{item.points}}</view>
   </view>
 </view>
 <view class="list-empty" wx:else>

pages/my/money/index.wxss

@@ -46,8 +46,10 @@
   color: #888888;
   margin-top:44rpx;
 }
-.money-list .item .money::before{
+.money-list .item .points{
-  content: '+';
+  font-size: 40rpx;
+  font-weight: 500;
+  color: var(--main-color);
 }
 .list-empty{
   padding-top:300rpx;

pages/order/index/index.js

@@ -7,6 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    scrollViewHeight:0,
     tabIndex:0,
     orderList:[],
     merchantOrderList:[],
@@ -19,6 +20,15 @@ Page({
 
     merchantOrderStatus:shopApi.merchantOrderStatus,
     merchantOrderStatusKV:shopApi.merchantOrderStatusKV,
+
+    refreshTriggered:{
+      tab1:false,tab2:false,tab3:false
+    },
+    pager:{
+      tab1:{limit:10,loading:false,loadAll:false,pageIndex:0},
+      tab2:{limit:10,loading:false,loadAll:false,pageIndex:0},
+      tab3:{limit:4,loading:false,loadAll:false,pageIndex:0}
+    }
   },
   changeTab(event){
     const tabIndex = event.currentTarget.dataset.index;
@@ -32,10 +42,9 @@ Page({
   },
   goToShopDetail(event){
     const item = event.currentTarget.dataset.item;
-    //缺少 shopid
+    wx.navigateTo({
-    // wx.navigateTo({
+      url: `/pages/shop/detail/index?id=${item.merchant_id}`,
-    //   url: `/pages/shop/detail/index?id=${item.id}`,
+    })
-    // })
   },
   goToCouponDetail(event){
     const id = event.currentTarget.dataset.id;
@@ -63,33 +72,144 @@ Page({
     this.loadOrderList();
     this.loadMerchantOrderList();
     this.loadMerchantPayOrderList();
+
+    const windowInfo = wx.getWindowInfo();
+    this.setData({
+      scrollViewHeight:windowInfo.windowHeight-windowInfo.statusBarHeight-44-57
+    })
+
+  },
+  refreshList(){
+    if(this.data.tabIndex==0){
+      this.data.pager.tab1.pageIndex = 0;
+      this.data.pager.tab1.loadAll = false;
+      this.setData({
+        pager:this.data.pager
+      });
+      this.loadOrderList();
+    }else if(this.data.tabIndex==1){
+      this.data.pager.tab2.pageIndex = 0;
+      this.data.pager.tab2.loadAll = false;
+      this.setData({
+        pager:this.data.pager
+      });
+      this.loadMerchantPayOrderList();
+    }else if(this.data.tabIndex==2){
+      this.data.pager.tab3.pageIndex = 0;
+      this.data.pager.tab3.loadAll = false;
+      this.setData({
+        pager:this.data.pager
+      });
+      this.loadMerchantOrderList();
+    }
+  },
+  loadMore(){
+    if(this.data.tabIndex==0){
+      this.loadOrderList()
+    }else if(this.data.tabIndex==1){
+      this.loadMerchantPayOrderList();
+    }else if(this.data.tabIndex==2){
+      this.loadMerchantOrderList();
+    }
   },
   loadOrderList(){
     //代取快递列表
-    userApi.order.list().then((data)=>{
+    if(this.data.pager.tab1.loading||this.data.pager.tab1.loadAll){
+      return;
+    }
+    this.data.pager.tab1.loading = true;
+    this.setData({
+      pager:this.data.pager
+    });
+    userApi.order.list({
+      skip:this.data.pager.tab1.pageIndex*this.data.pager.tab1.limit,
+      limit:this.data.pager.tab1.limit
+    }).then((data)=>{
+      if(this.data.pager.tab1.pageIndex==0){
+        this.data.orderList = data.items;
+      }else{
+        this.data.orderList = this.data.orderList.concat(data.items);
+      }
+      this.data.pager.tab1.loading = false;
+      this.data.pager.tab1.pageIndex++;
+      if(data.items.length<this.data.pager.tab1.limit){
+        this.data.pager.tab1.loadAll = true;
+      }
       this.setData({
-        orderList:data.items
+        orderList:this.data.orderList,
+        refreshTriggered:{
+          tab1:false
+        },
+        pager:this.data.pager
       })
     });
   },
   loadMerchantPayOrderList(){
     //消费买单列表
-    shopApi.orderList().then((data)=>{
+    if(this.data.pager.tab2.loading||this.data.pager.tab2.loadAll){
+      return;
+    }
+    this.data.pager.tab2.loading = true;
+    this.setData({
+      pager:this.data.pager
+    });
+    shopApi.orderList({
+      skip:this.data.pager.tab2.pageIndex*this.data.pager.tab2.limit,
+      limit:this.data.pager.tab2.limit
+    }).then((data)=>{
+      if(this.data.pager.tab2.pageIndex==0){
+        this.data.merchantOrderList = data.items;
+      }else{
+        this.data.merchantOrderList = this.data.merchantOrderList.concat(data.items);
+      }
+      this.data.pager.tab2.loading = false;
+      this.data.pager.tab2.pageIndex++;
+      if(data.items.length<this.data.pager.tab2.limit){
+        this.data.pager.tab2.loadAll = true;
+      }
       this.setData({
-        merchantOrderList:data.items
+        merchantOrderList:this.data.merchantOrderList,
+        refreshTriggered:{
+          tab2:false
+        },
+        pager:this.data.pager
       })
     })
   },
   loadMerchantOrderList(){
     //代金券列表
-    userApi.order.merchantList().then((data)=>{
+    if(this.data.pager.tab3.loading||this.data.pager.tab3.loadAll){
+      return;
+    }
+    this.data.pager.tab3.loading = true;
+    this.setData({
+      pager:this.data.pager
+    });
+    userApi.order.merchantList({
+      skip:this.data.pager.tab3.pageIndex*this.data.pager.tab3.limit,
+      limit:this.data.pager.tab3.limit
+    }).then((data)=>{
       data.map((item)=>{
         if(item.product_tags){
           item.product_tags = item.product_tags.split(',');
         }
-      })
+      });
+      if(this.data.pager.tab3.pageIndex==0){
+        this.data.couponList = data;
+      }else{
+        this.data.couponList = this.data.couponList.concat(data);
+      }
+      this.data.pager.tab3.loading = false;
+      this.data.pager.tab3.pageIndex++;
+      if(data.length<this.data.pager.tab3.limit){
+        this.data.pager.tab3.loadAll = true;
+      }
       this.setData({
-        couponList:data
+        couponList:this.data.couponList,
+        refreshTriggered:{
+          tab3:false
+        },
+        pager:this.data.pager
       })
     });
   },

pages/order/index/index.json

@@ -1,7 +1,8 @@
 {
   "usingComponents": {
     "nav-bar":"/components/navbar",
-    "merchant-order":"/components/merchantOrder"
+    "merchant-order":"/components/merchantOrder",
+    "list-view":"/components/listView"
   },
   "navigationStyle": "custom"
 }

pages/order/index/index.wxml

@@ -1,4 +1,5 @@
 <nav-bar class="nav-bar"/>
+
 <view class="tab-bar">
   <view class="item-container {{tabIndex==0?'current':''}}" bind:tap="changeTab" data-index="0">
     <view class="item">跑腿服务</view>
@@ -10,8 +11,11 @@
     <view class="item">代金券</view>
   </view>
 </view>
-
+<list-view class="order-list" wx:if="{{tabIndex==0}}" 
-<view class="order-list" wx:if="{{tabIndex==0}}">
+    bind:refresh="refreshList" bind:loadMore="loadMore" height="{{scrollViewHeight}}" 
+    refresher-triggered="{{refreshTriggered.tab1}}" 
+    load-more-text="仅展示最近一年的订单" show-load-more="{{orderList.length!=0}}"
+    loading="{{pager.tab1.loading}}" load-all="{{pager.tab1.loadAll}}">
   <view class="item" wx:for="{{orderList}}" wx:key="index" bind:tap="goToDetail" data-id="{{item.orderid}}">
     <view class="head">
       <view class="icon-con">
@@ -35,9 +39,20 @@
       </view>
     </view>
   </view>
-</view>
+
-<view class="bill-list" wx:if="{{tabIndex==1}}" wx:for="{{merchantOrderList}}" wx:key="index">
+
-  <view class="item">
+  <view class="list-empty" wx:if="{{orderList.length==0}}">
+    <image class="icon" src="/assets/icon/order/empty@2x.png"/>
+    <view class="text">暂无相关订单</view>
+  </view>
+</list-view>
+
+<list-view class="bill-list" wx:if="{{tabIndex==1}}" 
+    bind:refresh="refreshList" bind:loadMore="loadMore" height="{{scrollViewHeight}}" 
+    refresher-triggered="{{refreshTriggered.tab2}}" 
+    load-more-text="仅展示最近一年的订单" show-load-more="{{merchantOrderList.length!=0}}" 
+    loading="{{pager.tab2.loading}}" load-all="{{pager.tab2.loadAll}}">
+  <view class="item" wx:for="{{merchantOrderList}}" wx:key="index">
     <image class="image" src="{{item.merchant_image}}"/>
     <view class="name">{{item.merchant_name}}</view>
     <view class="amount">-{{item.amount}}</view>
@@ -66,8 +81,18 @@
       <view class="value">{{item.order_id}}</view>
     </view>
   </view>
-</view>
+
-<view class="group-list" wx:if="{{tabIndex==2}}">
+  <view class="list-empty" wx:if="{{merchantOrderList.length==0}}">
+    <image class="icon" src="/assets/icon/order/empty@2x.png"/>
+    <view class="text">暂无相关订单</view>
+  </view>
+</list-view>
+
+<list-view class="group-list" wx:if="{{tabIndex==2}}" 
+    bind:refresh="refreshList" bind:loadMore="loadMore" height="{{scrollViewHeight}}" 
+    refresher-triggered="{{refreshTriggered.tab3}}" 
+    load-more-text="仅展示最近一年的订单" show-load-more="{{couponList.length!=0}}" 
+    loading="{{pager.tab3.loading}}" load-all="{{pager.tab3.loadAll}}">
   <view class="item" wx:for="{{couponList}}" wx:key="index" bind:tap="goToCouponDetail" data-id="{{item.order_id}}">
     <view class="head">
       <view class="name" capture-catch:tap="goToShopDetail" data-item="{{item}}">
@@ -90,11 +115,11 @@
       <button class="button button2" plain size="mini" wx:if="{{item.status==merchantOrderStatus.unverified}}">查看券码</button>
     </view>
   </view>
-</view>
-<view class="list-empty" wx:if="{{false}}">
-  <image class="icon" src="/assets/icon/order/empty@2x.png"/>
-  <view class="text">暂无相关订单</view>
-</view>
 
+  <view class="list-empty" wx:if="{{couponList.length==0}}">
+    <image class="icon" src="/assets/icon/order/empty@2x.png"/>
+    <view class="text">暂无相关订单</view>
+  </view>
+</list-view>
 
 <merchant-order id="merchantOrderConfirm" bind:orderCreated="orderCreated"/>

pages/order/index/index.wxss

@@ -1,9 +1,6 @@
 .nav-bar{
   background-color: #fff;
 }
-
-
-.order-list{}
 .order-list .item{
   background-color: #fff;
   border-radius: 18rpx;
@@ -150,9 +147,6 @@
   margin-left: 20rpx;
 }
 
-.bill-list{
-
-}
 .bill-list .item{
   text-align: center;
   background-color: #fff;

pages/shop/detail/index.js

@@ -14,7 +14,9 @@ Page({
     productList:[],
     currentProduct:{},
     calculatedPrice:{},
-    calculating:false
+    calculating:false,
+    scrollViewHeight:0,
+    windowInfo:{}
   },
 
   showConfirm(event){
@@ -28,6 +30,13 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    const windowInfo = wx.getWindowInfo();
+    console.log(windowInfo);
+    this.setData({
+      windowInfo:windowInfo,
+      scrollViewHeight:windowInfo.screenHeight-251-windowInfo.statusBarHeight-53
+    })
+
     const shopId = options.id;
 
     app.getLocation().then((data)=>{
@@ -39,6 +48,7 @@ Page({
       data.items.map((item)=>{
         item.tags = item.tags.split(',')
       })
+      data.items = data.items;
       this.setData({
         productList:data.items
       });

pages/shop/detail/index.wxml

@@ -1,18 +1,3 @@
-<!-- <view class="swiper-container">
-  <swiper class="swiper" >
-    <swiper-item class="item">
-      <image class="image" src="/assets/imgs/for_test/1.jpg" mode="aspectFit"/>
-    </swiper-item>
-    <swiper-item class="item">
-      <image class="image" src="/assets/imgs/for_test/2.jpg" mode="aspectFit"/>
-    </swiper-item>
-  </swiper>
-  <view class="nav">
-    <image src="/assets/icon/shop/image@2x.png" class="icon"/>
-    <label class="text">1/2</label>
-    <image src="/assets/icon/shop/right-arrow@2x.png" class="right-arrow"/>
-  </view>
-</view> -->
 <nav-bar background="#fff" share back></nav-bar>
 <view class="page-container shop-info">
   <view class="head">
@@ -57,23 +42,26 @@
       </navigator>
     </view>
   </view>
-  <view class="page-container item ticket" wx:for="{{productList}}" wx:key="index">
+  <scroll-view style="height:{{scrollViewHeight*2}}rpx;" scroll-y class="scroll-view">
-    <view class="left">
+    <view class="page-container item ticket" wx:for="{{productList}}" wx:key="index">
-      <view class="promation">
+      <view class="left">
-        <image src="/assets/icon/shop/promation@2x.png" class="image"/>
+        <view class="promation">
-        <label>{{item.promotion_text}}</label>
+          <image src="/assets/icon/shop/promation@2x.png" class="image"/>
+          <label>{{item.promotion_text}}</label>
+        </view>
+        <view class="title">{{item.name}}</view>
+        <view class="bl-money">
+          <label class="money">{{item.sale_price}}</label>
+          <label class="money-disable">{{item.product_price}}</label>
+        </view>
       </view>
-      <view class="title">{{item.name}}</view>
+      <view class="right">
-      <view class="bl-money">
+        <button class="button" size="mini" type="primary" loading="{{item.loading}}"
-        <label class="money">{{item.sale_price}}</label>
+        bind:tap="showConfirm" data-item="{{item}}">抢购</button>
-        <label class="money-disable">{{item.product_price}}</label>
       </view>
     </view>
-    <view class="right">
+    <view class="scroll-view-dispatch"></view>
-      <button class="button" size="mini" type="primary" loading="{{item.loading}}"
+  </scroll-view>
-      bind:tap="showConfirm" data-item="{{item}}">抢购</button>
-    </view>
-  </view>
 </view>
 
 <merchant-order id="merchantOrderConfirm"/>

pages/shop/detail/index.wxss

@@ -187,4 +187,3 @@
   padding:18rpx 46rpx;
   margin-left:40rpx;
 }
-

pages/shop/index/index.js

@@ -14,16 +14,57 @@ Page({
     shopList:[],
     userInfo:{},
     lng:null,
-    lat:null
+    lat:null,
+    scrollViewHeight:0,
+    pager:{limit:10,loading:false,loadAll:false,pageIndex:0,refreshTrigger:false}
   },
   changeTab(event){
     const tabIndex = event.currentTarget.dataset.index;
     const cid = event.currentTarget.dataset.cid;
-    this.setData({tabIndex})
+    this.data.pager.pageIndex = 0;
-    this.loadList(cid);
+    this.data.pager.loadAll = false;
+    this.setData({tabIndex,pager:this.data.pager})
+    this.loadList();
   },
-  loadList(cid){
+  refreshList(){
-    shopApi.list(cid,this.data.lng,this.data.lat).then((data)=>{
+    this.data.pager.pageIndex = 0;
+    this.data.pager.loadAll = false;
+    this.setData({
+      pager:this.data.pager
+    });
+    this.loadList();
+  },
+  loadList(){
+    if(this.data.pager.loading||this.data.pager.loadAll){
+      return;
+    }
+    this.data.pager.loading = true;
+    this.setData({
+      pager:this.data.pager
+    });
+    const cid = this.data.categories.length>0?this.data.categories[this.data.tabIndex].id:0;
+    const params = {
+      longitude:this.data.lng,
+      latitude:this.data.lat,
+      skip:this.data.pager.pageIndex*this.data.pager.limit,
+      limit:this.data.pager.limit
+    }
+    if(cid){
+      params.category_id = cid;
+    }
+    shopApi.list(params).then((data)=>{
+      if(this.data.pager.pageIndex==0){
+        this.data.shopList = data.items;
+      }else{
+        this.data.shopList = this.data.shopList.concat(data.items);
+      }
+      this.data.pager.loading = false;
+      this.data.pager.pageIndex++;
+      this.data.pager.refreshTrigger = false;
+      if(data.items.length<this.data.pager.limit){
+        this.data.pager.loadAll = true;
+      }
+
       data.items.map((item)=>{
         if(item.distance){
           if(item.distance>=1000){
@@ -34,7 +75,8 @@ Page({
         }
       })
       this.setData({
-        shopList:data.items
+        shopList:this.data.shopList,
+        pager:this.data.pager
       })
     });
   },
@@ -42,6 +84,10 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    const windowInfo = wx.getWindowInfo();
+    this.setData({
+      scrollViewHeight:windowInfo.windowHeight-windowInfo.statusBarHeight-44-174
+    })
     app.getLocation().then((data)=>{
       this.setData({
         lng:data.longitude,

pages/shop/index/index.json

@@ -1,7 +1,8 @@
 {
   "usingComponents": {
     "nav-bar":"/components/navbar",
-    "shop-item":"/components/shopItem"
+    "shop-item":"/components/shopItem",
+    "list-view":"/components/listView"
   },
   "navigationStyle": "custom"
 }

pages/shop/index/index.wxml

@@ -12,13 +12,15 @@
     </button>
 </view>
 
-<view class="shop-list">
+<list-view class="shop-list" bind:refresh="refreshList" 
-  <block wx:if="{{shopList.length>0}}">
+    bind:loadMore="loadList" height="{{scrollViewHeight}}" 
-    <shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
+    refresher-triggered="{{pager.refreshTrigger}}" 
+    show-load-more="{{!(shopList.length==0&&pager.loadAll)}}"
+    loading="{{pager.loading}}" load-all="{{pager.loadAll}}">
+  <shop-item wx:for="{{shopList}}" shop="{{item}}" data-item="{{item}}" wx:key="index">
     
-    </shop-item>
+  </shop-item>
-  </block>
+  <view class="list-empty" wx:if="{{shopList.length==0&&pager.loadAll}}">
-  <view class="list-empty" wx:else>
     <view class="title">暂无该分类商铺</view>
   </view>
-</view>
+</list-view>