## 方法一： index.js ~~~ //index.js //獲取應用實例 const app = getApp() Page({ data:{ //設置數組用來 接收 取到的數據 頁面的渲染取得也是這個數據 list:[] }, onLoad(){ var self=this; //發送請求取數據 wx.request({ // url: 'https://www.easy-mock.com/mock/5bac6e450132334db716717d/test/test', url: 'https://douban.uieee.com/v2/movie/top250', header: { 'Content-Type': 'json' }, success: function(res) { var data=res.data.subjects; //創建數組用來裝所有取到的數據 var list=[]; //循環取數據 for(let key in data){ //創建一個對象用來裝每一項 var temp={}; // console.log(data[key]); temp.title=data[key].title; temp.images=data[key].images.small; temp.average=data[key].rating.average; //將整合的每一項裝到數組中 list.push(temp); } console.log(list) //請求到的數據 與外面的數據同步 self.setData({ list, //頁面加載時取消加載圖標 show:true }); } }); }, //頁面刷新到底部加載的函數 onReachBottom: function () { // 到底部下拉加載時最上方顯示加載圖標 wx.showNavigationBarLoading(); console.log(this.data.list); // 當加載完畢時取消頂部加載圖標 wx.hideNavigationBarLoading(); } }) ~~~ index.wxml ~~~ <!-- loading組件 還沒取到數據是用加載圖標顯示--> <loading hidden="{{show}}"></loading> <view class="cont"> <block wx:for="{{list}}" wx:key="index"> <view> <!-- <view>{{item.images.small}}</view> --> <image src="{{item.images}}" /> <view class="pf">{{item.title}}</view> <text>評分：{{item.average}}</text> </view> </block> </view> ~~~ ~~~ /**index.wxss**/ .cont image{ width: 200rpx; height: 280rpx; } .cont{ display: flex; flex-wrap: wrap; justify-content:space-around; } .pf{ //文本超出部分隱藏用省略號代替 font-size: 30rpx; width: 200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .cont text{ font-size: 27rpx; opacity: .7; } .cont view{ text-align: center; } .content{ margin-bottom: 25rpx; } ~~~ 方法二： ~~~ ~~~