微信小程序調用接口 並把數據解構賦值 下拉刷新新增數據

wxml:調用接口數據

wxss一起寫了:
/*scroll-view 高度設爲100% 並且page的高度 也要100% 纔有效! */
page{
  height: 100%;
}
.item{
  display: inline-block;
  width: 335rpx;
  margin: 10rpx 20rpx;
  text-align: center;
  vertical-align: top;
}
.item image{
  width: 100%;
  height: 550rpx; 
  box-shadow: 0 0 10px #ccc;
}
.item text{
  font:12px/1.5 "微軟雅黑";
}
.loading{
  text-align: center;
}
.loading image{
  width: 80rpx;
}
////////////////////

<!-- 下拉刷新 scroll-view 高度設爲100% 並且page的高度 也要100% 纔有效 -->
<scroll-view 
style="height:100%"
 scroll-y="{{true}}"
  lower-threshold="200"
  bindscrolltolower="loadmore">
  <view class='item' wx:for="{{list}}" wx:key="{{index}}">
    <image src="{{item.cover}}"></image>
    <!--{{}}裏面進行數據拼接-->
    <text>{{item.title +"/"+ item.rate}}</text> <!-- item.xxx 看後臺返回的數據-->
  </view>
  <!-- loading圖標 -->
  <view class='loading' wx:if="{{loading}}">
    <image mode='widthFix' src='/assets/loading/loading-bars.svg'></image>
  </view>
</scroll-view>

wx.js 請求數據

//獲取應用實例
const app = getApp()
Page({
  data: {
  list: [],//先定義一個數組
  start:0, //第幾頁數據
  loading: false,
  },
  onLoad: function () {
   this.loadData() //頁面初始化加載數據
  },
  // 加載更多
  loadmore() {
    if (!this.data.loading) {
      this.loadData()
    }
  },
  //加載
  loadData(){
    //提取JSON數據、解構賦值對提取JSON對象中的數據,尤其有用。
    let { list,start,loading, } = this.data; //解構賦值
    wx.showLoading({
      title: '正在拼命加載加載中...',
      mask:true
    })
    this.setData({
      loading:true
    })
    wx.request({
      url: `https://www.koocv.com/h5-view/v/movie/list?page_start=${start}`,//超級字符串
      header: {
        'content-type': 'application/json'
      },
      //請求成功後
      success: (res) => {
        console.log(res.data.subjects);
       // list = res.data.subjects //基本寫法
        let { subjects } = res.data;//解構賦值寫法
        start += 20;
        list.push(...res.data.subjects) //... 把subjects打散變成爲一個一個單獨的參數傳過去
        this.setData({
          list: list,
          start:start,
          loading:false
        })
        wx.hideLoading();
      }
    })
  }
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章