## 方法一： 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; } ~~~ 方法二： ~~~ ~~~