微信小程序 《新闻列表》 案例

今天带着练习一个小程序的基础练习
《新闻列表》
内容如图：

如要求：
1.主页头部的轮播图
2.中间内容上的信息案列排版。
3.上拉加载内容。
4.在信息加载完成后，给用户提示

一，步骤。

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

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

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

注意文档内的属性内容

我们会看到这么一个案例。

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

<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>

这步操作，就是我们正常的for遍历数据的方式。
微信独特的写法：wx:for=“”

要求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>

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

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

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

1.在微信小程序中，你用到wx:for 时。一定要绑定key 的值。

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

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

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

3.文档第一位

内容就这么些，后续待小作者努力。。。。