小程序Scroll-view上拉滚动刷新数据

<scroll-view class='scroll' scroll-y="{{true}}" bindscrolltolower="scrolltolower">
 <view class="tabs">
 <block wx:for="{{ tabs }}" wx:key='{{ index }}'>
 <view bind:tap="changeTab" data-index='{{ index }}' class="tab {{ tabindex === index ? 'active' : '' }}">{{ item }}</view>
 </block>
 </view>
 <view style="height: 80rpx"></view>
 <view>
 <block wx:for="{{ goods }}" wx:key="{{ index }}">
 <view class="content">
 <view class="conbg">
  <view class="con-top">
  <view class="shopname iconfont icon-right ellipsis">{{ item.shopName }}</view>
  <view class="good-status" wx:if="{{item.goodStatus==0}}">卖家未发货</view>
  <view class="good-status" wx:if="{{item.goodStatus==1}}">卖家已发货</view>
  </view>
  <view class="goodinfo">
  <!-- 商品图 -->
  <image class="goodimg" src="{{ item.goodImg }}" mode="scaleToFill"></image>
  <!-- 商品信息 -->
  <view class="good-info">
  <view class="good-title ellipsis2">{{ item.goodName }}</view>
  <view class="good-desc ellipsis2">{{ item.goodDesc }}</view>
  <view class="shop-server">
  <text wx:for="{{ item.shopServers }}" wx:key="{{ index }}">{{ item }}</text>
  </view>
  </view>
  <view class="good-price">
  <view class="price">￥ {{ item.goodPrice }}</view>
  <!-- 购买商品个数 -->
  <view class="num">x {{ item.goodNum }}</view>
  </view>
  </view>
  <!-- 商品总计 -->
  <view class="total">
  <!-- <text>共{{ goodNum }}件商品</text> -->
  <text>合计: ￥{{ item.goodTotalPrice }}</text>
  </view>
  <view class="operate">
  <view class="check-delivery">查看物流</view>
  <view>
  <view class="comfirm-delivery">确认收货</view>
  </view>

  </view>
 </view>
 </view>
 </block>
 <block wx:if="{{goods==''}}">
 <view class='goodsmsg'>
 <image class='tab1Img' src="../images/order.png"></image>
 <text>你暂时还没有商品~</text>
 <text class='buyMore'>去逛逛~</text>
 </view>
 </block>
 </view>
 <view class="no-more" wx:if='{{ hasMore}}'>加载中...</view>
 <view class="no-more" wx:else>已经到底了...</view>
</scroll-view>

.tabs {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 width: 100%;
 height: 80rpx;
 top: 0;
 left: 0;
 background: #f2f2f2;
}
.tabs .tab {
 padding: 0 32rpx;
 font-size: 28rpx;
 height: 76rpx;
 line-height: 76rpx;
 color: #666;
 border-bottom: 4rpx solid transparent;
}
.tabs .tab.active {
 border-bottom-color: #e94a01;
 color: #e94a01;
}
.content {
 padding: 20rpx;
 box-sizing: border-box;
}
.content .conbg {
 background-color: #fff;
 box-sizing: border-box;
 border-radius: 20rpx;
 padding: 0 20rpx 20rpx;
}
.con-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 24rpx;
 height: 76rpx;
 line-height: 76rpx;
}
.shopname {
 font-size: 24rpx;
}
.shopname:after {
 color: #666;
 margin-left: 10rpx;
}
.good-status {
 flex-shrink: 0;
 margin-left: 20rpx;
 color: #e94a01;
}
.goodinfo {
 display: flex;
}
.goodinfo .goodimg {
 width: 188rpx;
 height: 188rpx;
 border-radius: 10rpx;
 flex-shrink: 0;
 margin-right: 20rpx;
}
.goodinfo .good-info {
 font-size: 28rpx;
}
.goodinfo .good-info .good-title {
 font-weight: bold;
}
.goodinfo .good-info .good-desc {
 color: #666;
}
.goodinfo .good-info .shop-server {
 display: flex;
 margin-top: 10rpx;
 flex-wrap: wrap;
}
.goodinfo .good-info .shop-server text {
 padding: 6rpx;
 margin-right: 10rpx;
 background-color: rgba(211, 94, 36, 0.2);
 color: #cc602f;
 font-size: 20rpx;
 margin-bottom: 10rpx;
 border-radius: 6rpx;
}
.goodinfo .good-price {
 flex-shrink: 0;
 font-size: 24rpx;
 display: flex;
 flex-direction: column;
}
.goodinfo .good-price .price {
 font-weight: bold;
 font-size: 28rpx;
}
.goodinfo .good-price .num {
 text-align: right;
 font-size: 28rpx;
 color: #666;
}
.total {
 display: flex;
 justify-content: flex-end;
 height: 80rpx;
 line-height: 80rpx;
 margin-top: 30rpx;
 font-size: 28rpx;
 font-weight: bold;
}
.total text {
 margin-left: 20rpx;
}
.operate {
 display: flex;
 justify-content: flex-end;
 font-size: 28rpx;
}
.operate > view {
 height: 60rpx;
 line-height: 60rpx;
 padding: 0 24rpx;
 border: 1px solid #666;
 margin: 0 10rpx;
 border-radius: 30rpx;
}
.operate > view.comfirm-delivery {
 color: #d64904;
 border-color: #d64904;
}
.no-more {
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 24rpx;
}
.goodsmsg{
 width: 100%;
 height: 300rpx;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 flex-direction: column;

}

// pages/home/order/order.js
var tool = require("../../../utils/util.js")
Page({

 /**
 * 页面的初始数据
 */
 data: {
 idx: 0, //默认选中第一项
 hasMore: true,
 indexNum: 0,
 tabs: ['全部', '待付款', '待发货', '已付款', '待评价'], // tab栏标题
 tabindex: 0, // 控制tab栏切换
 msgPage: 1, //分页
 washcar: [{
 id: 0,
 tips: "洗车"
 },
 {
 id: 1,
 tips: "违章查询"
 },
 {
 id: 2,
 tips: "商城订单"
 },
 {
 id: 3,
 tips: "会员"
 },
 ],
 selecttab: [{
 id: 0,
 tips: "处理中"
 },
 {
 id: 1,
 tips: "已成功"
 },
 {
 id: 2,
 tips: "已撤销"
 },
 {
 id: 3,
 tips: "全部"
 },

 ],
 

 goods: [
 {
 shopName: '商铺名称', // 商铺名称
 goodStatus: '卖家已发货', // 商品状态
 goodImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg', // 商品图片
 goodName: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称', // 商品名称
 goodDesc: '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', // 商品描述
 shopServers: ['商铺服务', '商铺服务', '商铺服务'], // 商铺服务
 goodPrice: '111.00', // 商品价格
 goodNum: '2', // 购买的商品数量
 goodTotalPrice: '111.00', // 商品总价格
 status: 0, // 订单的状态， 0表示还未收货， 1表示已收货还未评价， 2表示已经评价
 }, 
 ],
 },
 //点击切换
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },
 //滑动切换
 changeswpier(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },
 //查询违章选项卡
 checkviolation(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
 idx: index,
 })

 },
 changeTab(e) {
 var page = this.data.mgsPage
 const index = e.currentTarget.dataset.index
 this.setData({
 tabindex: index
 })
 tool.post('/order_list', {
 status: index - 1,
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
 goods: res.data.goods
 })
 })

 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum: id
 })
 var page = this.data.mgsPage
 tool.post('/order_list', {
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
 goods: res.data.goods
 })
 })
 },
 //下拉刷新数据
 scrolltolower() {
 if (this.lock) {
 wx.showToast({
 title: '已经到底了！',
 icon: 'none'
 })
 return
 }
 this.data.msgPage++
 wx.showLoading({
 title: '正在加载中...',
 })
 tool.post('/order_list', {
 page: this.data.msgPage
 })
 .then((res) => {
 var goodsList = this.data.goods;
 const newGoods = res.data.goods
 if (newGoods.length <= 0) {
 this.lock = true
 wx.hideLoading()
 wx.showToast({
 title: '已经到底了！',
 icon: 'none'
 })
 this.setData({
 hasMore: false
 })
 return
 }
 wx.hideLoading()
 goodsList = [...goodsList, ...newGoods] //取数组里的每一个值，然后再赋值到一个新数组里
 this.setData({
 goods: goodsList
 })
 })
 },
})