如何实现瀑布流?
wxml代码:分成左右两个盒子
复制代码
1
2
3
4
5
6
7
8
9<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代码:样式
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.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代码:切割数组,使用递归方法拼接
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55data: { 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) }) },
用户上拉刷新和触底刷新
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47/** * 页面相关事件处理函数--监听用户下拉动作 */ 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) } }) } } },
最后
以上就是美丽早晨最近收集整理的关于微信小程序-第四天的全部内容,更多相关微信小程序-第四天内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复