<scroll-view class="product-list"  bindscrolltolower="lower" scroll-y="true" style="height:100%" scroll-into-view="{{toView}}"
upper-threshold="10">
<view class="product-group">
    <view class="product" wx:for="{{products}}" wx:for-item="product" data-goods-id="{{product.id}}" bindtap="navigateToProduct">  
      <view><image mode="scaleToFill" src="{{product.covers_image}}"></image></view>
      <view class="product-content product-name"><text>{{product.goods_name}}</text></view>
      <view class="product-content product-price"><text>¥ {{product.goods_price}}</text>
      <text class="product-market">¥ {{product.market_price}}</text>
      </view>
    </view>
  </view>
</scroll-view>

.product-list{
    background-color: white;
    box-sizing: border-box;
    padding: 2rpx;
}
.product-group{
    margin: 5rpx;
    padding:2rpx;
    display: block;
    overflow: hidden;
}
.product{
    width:350rpx;
    border: 1px solid #e2e2e2;
    float: left;
    margin: 6rpx;
}
.product image {
    height: 300rpx;
    width: 100%;
}
.product-name {
    height: 60rpx;
    padding-bottom: 5rpx;
    border-bottom: 1px solid #efefef;
    font-size: 25rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product-content  {
    margin: 15rpx;
    overflow: hidden;
}
.product-price {
    margin-top: 15rpx;
    color: red;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    font-weight: 1rpx;
}
.product-market {
    margin:10rpx;
    color: darkgray;
    font-size: 24rpx;
    font-weight: 1rpx;
    text-decoration:line-through;
}

import request from "../../lib/request";
const app = getApp();
import serviceData from '../../data/config';

Page({
    data : {
        products:[],
        currentPage:1,
        perPage : 5
    },
    onLoad(option){
        var categoryId = option.id;
        var pageData = new Object();
        pageData.page = this.data.currentPage;
        pageData.per_page = this.data.perPage;
        //request({path:'/categories/' + categoryId + '/products', data: pageData})
        //.then(({data:products}) => this.setData({products}));
        this.setData({products: serviceData.categoryData});
        /*wx.setNavigationBarTitle({
          title: option.title,
          success: function(res) {
            // success
          }
        })*/
    },
    navigateToProduct(event) {
        var productId = event.currentTarget.dataset.goodsId;
        wx.navigateTo({
        url: '../products/products?id=' + productId
        });
    },
    lower : function(option){
        var categoryId = option.id;
        console.log('lower more products data');
        wx.showNavigationBarLoading();
        var that = this;
        setTimeout(()=>{
            wx.hideNavigationBarLoading();
            var nextPageData = new Object();
            nextPageData.per_page = this.data.perPage;
            nextPageData.page = this.data.currentPage +1;
            var products = serviceData.categoryData;
            this.setData({currentPage:++this.data.currentPage});
            this.setData({products:this.data.products.concat(products)});//concat 拼接在一起

      }, 1000);
  },
});