找到了更好的新闻界面

1.像往常一样，先写js

使用request请求接口url。当请求成功时，在控制台上打印返回的res.data数据，您可以看到接口数据打印在控制台上。请求成功后，使用setData接收数据，并在数据中声明一个用于接收数据的变量。

Page({ data: {//3:)，应该在数据中声明一个用于接收数据的变量。list: [] }，onLoad:函数(选项){ wx . request({ URL : ' https://www . a piopen . top/Journalismpi '，header : { ' content-type ' : ' application/JSON ' }，success3360res={//1:在控制台上打印返回的res.data数据console.log(res.data) //2:用setData接收数据this.setData({ //第一个数据是固定用法，第二个数据是json中的datalist : RES . data . data })} }，})我写在this.setData，list3360res.data.data，第一个数据是固定用法，第二个数据是json中的数据，因为新闻列表中所有的json数据都放在数据中。

2.关于2:css我就不多说了。项目{ width : 100%；height: 186rpx相对位置：display: flexmargin: 10rpx 10rpxborder-bottom: 1px纯色rgb(197，199，199)；}.项目。数字包装器{ height : 100%；flex : 1；display: flexflex-direction:柱；}.项目。img { width: 150rpx高度： 150 rpx；padding: 20rpx}.数字包装器。名称{ margin : 10 rpx 40 rpx 20 rpx 10 rpx；font-size : 35 rpx；飞越：隐藏；}.count { font-size : 34 rpx；}3:然后最重要的是数据渲染

在wxml中操作，首先是循环列表，所以需要编写一个wx:for进行列表渲染，然后取出你想要的数据，在你想要取出图片、标题、时间的地方，根据json的数据结构进行分析。

view wx : for=' { { list . auto } } ' wx : key=' index ' view class=' item ' image class=' img ' src=' http : { { item . picinfo[0]。URL } } ' mode=' scaleToFill '/image view class=' number-wrapper ' text class=' name ' { item . title } }/text view class=' count-wrapper ' text class=' count ' { item . ptime } }/text/view/view/view/view中最重要的是图像解析。完成后，您可以看到接口数据已经呈现在前端接口上。此时，小程序调用新闻列表实现列表流转的要求已经完成。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。