今天带着练习一个小程序的基础练习
《新闻列表》
内容如图：
如要求：
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定义就错了。会找不到。文章来源：https://www.toymoban.com/news/detail-721296.html
3.文档第一位
内容就这么些，后续待小作者努力。。。。文章来源地址https://www.toymoban.com/news/detail-721296.html
到了这里，关于微信小程序 《新闻列表》 案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
