微信小程序-第四天

如何实现瀑布流？

wxml代码：分成左右两个盒子

<view class="box">
<view class="left" >
<image wx:for="{{leftList}}" bindtap="toChatDetail" data-id="{{item.postsId}}"
mode="widthFix" src="{{item.coverImgUrl}}"></image>
</view>
<view class="right" >
<image wx:for="{{rightList}}" bindtap="toChatDetail" data-id="{{item.postsId}}" mode="widthFix" src="{{item.coverImgUrl}}"></image>
</view>
</view>

wxss代码：样式

.van-button--normal{
width: 100%;
padding: 0!important;
}
.myImg{
margin:10px 0;
width: 70px;
height: 70px;
border-radius: 50%;
}
.txtBox{
display: flex;
padding: 5px 10px;
border-bottom: 1px solid #f0f0f0;
}
.myInfoIitle{
width: 20%;
}
.txt{
margin-left: 40px;
font-size: 14px;
color: gray;
}

js代码：切割数组，使用递归方法拼接

 data: {
leftList:[],
rightList:[],
leftHeight:0,
rightHeight:0,
// 整体数据是否完成
finish:false,
isEnd:false,
flag:true
},
pageNum:1,
pageSize:10,
initList(list){
this.data.finish=false
if(list.length==0){
this.data.finish=true
return
}
let item = list.shift()
wx.getImageInfo({
src: item.coverImgUrl,
success:(res)=>{
if(this.data.leftHeight<=this.data.rightHeight){
// 放到左边列表
this.data.leftList.push(item)
// 记录高度变化
this.data.leftHeight += res.height/res.width
}else{
// 放到右边列表
this.data.rightList.push(item)
// 记录高度变化
this.data.rightHeight += res.height/res.width
}
// 更改视图
this.setData({
leftList:this.data.leftList,
rightList:this.data.rightList,
})
},
complete:()=>{
this.initList(list)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 请求论坛列表接口
getPostsList(this.pageNum,this.pageSize).then(res=>{
console.log(res.data.rows);
// 处理数据
this.initList(res.data.rows)
})
},

用户上拉刷新和触底刷新

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.data.isEnd = false
if(this.data.finish){
this.setData({
leftList:[],
rightList:[],
leftHeight:0,
rightHeight:0
})
getPostsList().then(res=>{
// 处理数据
this.initList(res.data.rows)
})
}else{
return
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log("触底了");
this.data.flag=true
if(this.data.finish){
if(!this.data.isEnd){
this.pageNum++
getPostsList(this.pageNum, this.pageSize).then(res => {
// 如果加载到最后一页
if (this.pageNum*this.pageSize >= res.data.total) {
console.log("最后一页");
// 处理数据
this.initList(res.data.rows)
this.setData({
isEnd: true,
flag:false
})
} else {
// 处理数据
this.initList(res.data.rows)
}
})
}
}
},

最后

以上就是美丽早晨为你收集整理的微信小程序-第四天的全部内容，希望文章能够帮你解决微信小程序-第四天所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。