一，步骤。

要求1：主页头部的轮播图

我们看一下这个关于轮播图的相关文档。

注意文档内的属性内容 我们会看到这么一个案例。

当然我们这个要求没有这么细节，只需要上边的轮播图即可。 所以我们摘取并修改后，看下面代码

<swiper class="Lun" circular="true" indicator-dots="true" autoplay="true" interval="1000" duration="500">
        <block wx:for="{
          
   {Lun}}" wx:key="key">
          <swiper-item class="Lun_1" >
              <image src="{
          
   {item.imgUrl}}" catchtap="tiao" data-id="{
          
   {item.id}}"></image>
          </swiper-item>
        </block>
  </swiper>

在小程序中，轮播图是 swiper 人家官方封装好的。

在swiper中写你的要求 block 中是你要遍历在轮播图的图片内容。 image 就是我们看到的视图位置，我们要将遍历的图片所放的位置。

简单说一下，我们这个轮播图所用到文档中的几个属性. 当然要熟悉小程序的话，还得是多看文档。

属性1： circular boolean false 否 是否采用衔接滑动 1.0.0 属性2： indicator-dots boolean false 否 是否显示面板指示点 1.0.0 属性3： autoplay boolean false 否 是否自动切换 1.0.0 属性4： interval number 5000 否 自动切换时间间隔 1.0.0 属性5： duration number 500 否 滑动动画时长 1.0.0

data: {
    Lun:[],
    list:[],
    p:2,
    noMore:true
  },
 * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.request({
          
   
      url: http://localhost:8989/getData,
      success:(data)=>{
        this.setData({
          
   
          Lun:data.data.data,
          list:data.data.data
          
        })
      }
    })
  },

上代码，是我们在小程序中请求数据，并给原数据提交。 此时，轮播图可以拿到数据，并做上渲染。

此接口只是案例。

要求2：中间内容上的信息案列排版。

渲染中间主体内容。

<view class="Wu_w" wx:for="{
          
   {list}}" wx:key="key">
      <view class="Yang" catchtap="tiao" data-id="{
          
   {item.id}}">
        <view class="Yang_1"><image src="{
          
   {item.imgUrl}}"></image></view>
        <view class="from">
          <view>事件：{
         
  {item.title}}</view>
          <view>时间：{
         
  {item.newTime}}</view>
          <view class="from_1">来自：{
         
  {item.from}}</view>
        </view>
       
      </view>
    </view>

要求3：上拉加载内容。

onReachBottom() 页面上拉触底事件的处理函数

我们看代码：

onReachBottom() {
    let p=this.data.p++
      wx.request({
          
   
        url: http://localhost:8989/getData?p=+p,
        success:(res)=>{
          
          this.setData({
          
   
            list:this.data.list.concat(res.data.data)
          })
        }
      }) 
  },

如图，我们在给data：{}中的p 定义初始值为2 的情况下。

为什么p 定义初始值为2？

我们下年在修改data中的数据时，使用this.setData，concat拼接数据。 它会将我们第一次请求出来的第一页内容，重复渲染两边。导致内容重复。

我们这里的方法很笨拙。若有简便方法，按简便方法来。

要求4：在信息加载完成后，给用户提示

onReachBottom() {
      let p=this.data.p++
        wx.request({
          
   
          url: http://localhost:8989/getData?p=+p,
          success:(res)=>{
            
            this.setData({
          
   
              list:this.data.list.concat(res.data.data)
            })
          }
        })
新增
？？？
        if(this.data.list.length>=23){
          this.setData({
          
   
            noMore:true
          })
        }
？？？
        
    },

上面的新增，是我们做的一个简单的判断条件。若我们请求的数据，达到我们知道的总数据的情况下。我们将data中的noMore值改为true,

<view wx:if="{
          
   {noMore}}" style="text-align: center;">已经到底了...</view>

来达到此文字的显示效果。很简单也有点简陋。若有优化的空间，和想法。按各位大佬你们的思路和想法。

二，过程中要注意的几点。

我们总结一下，在编写中可能遇到的一些问题。

2.我们在后端请求成功的时候。

success:(res)=>{
            
            this.setData({
          
   
              list:this.data.list.concat(res.data.data)
            })
          }

要按照这个箭头函数的格式来书写，否则，函数内部的this定义就错了。会找不到。

3.文档第一位