文章目录
- 1. 涉及到的知识点
- 2. 功能描述
- 3. 通用属性
- 3. 代码实现过程
- 4. 报错问题，解决方法
- 5. 运行效果图
1. 涉及到的知识点
- grid-view的使用
- 官方文档指南：https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html
2. 功能描述
Skyline 下网格布局容器 和 瀑布流布局容器。基础库版本 2.30.4 起提供 WebView 兼容实现
- 仅支持作为
<scroll-view type="custom">模式的直接子节点 - 按需渲染节点，比 WebView 兼容实现具备更好的性能。
3. 通用属性
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| type | string | aligned | 是 | 布局方式 |
| aligned | 每行高度由同一行中最大高度子节点决定 | |||
masonry | 瀑布流，根据子元素高度自动布局 | |||
| cross-axis-count | number | 2 | 否 | 交叉轴元素数量 |
| max-cross-axis-extent | number | 0 | 否 | 交叉轴元素最大范围 |
| main-axis-gap | number | 0 | 否 | 主轴方向间隔 |
| cross-axis-gap | number | 0 | 否 | 交叉轴方向间隔 |
| padding | Array | [0, 0, 0, 0] | 否 | 长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
3. 代码实现过程
- index.wxml布局文件
<view class="toolbar">瀑布流布局</view>
<scroll-view scroll-y style="width: 100%; height: 100%;" type="custom"><grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10" main-axis-gap="10"><block wx:for="{{gridList}}" wx:key="{{item.id}}"><view class="grid-container"><image style="width: 100%; height: {{100 * item.height}}px" src="https://picsum.photos/200/{{100 *item.height}}?random={{item.id}}" mode="aspectFill"></image><text class="title">这里的风景好美～</text><view class="grid-bottom-container"><view class="bottom-left-container"><image src="https://res.wx.qq.com/op_res/lS41C5Xp6y6mfUbelCW8PArEcMwWRuhSohPO46vAiELbhAf56_CwONEDgM2vIVxOlT5KDcSxCkV8xIJ6cg3x2Q" mode="" style="width:38rpx;height:38rpx; border-radius: 50%" /><span>binnie</span></view><view class="bottom-right-container"><image src="../assets/img_dz.png" mode="" style="width:30rpx;height:30rpx;" /><span>6666</span></view></view></view></block></grid-view>
</scroll-view>瀑布流的实现原理，就是动态设置图片的高度，在代码中可以看到Image的的高度是动态的：
<image style="width: 100%; height: {{100 * item.height}}px" src="https://picsum.photos/200/{{100 *item.height}}?random={{item.id}}" mode="aspectFill"></image>
温馨提示： 仅支持作为
<scroll-view type="custom">模式的直接子节点
- index.wxss样式文件
.toolbar{line-height: 200rpx;text-align: center;
}.title{margin-top: 20rpx;color: #333333;
}.grid-bottom-container{display: flex;flex-direction: row;margin-top: 10rpx;padding-left: 10rpx;padding-right: 10rpx;justify-content: space-between;}.bottom-left-container{display: flex;flex-direction: row;align-items: center;
}.bottom-right-container{display: flex;flex-direction: row;align-items: center;
}
.bottom-right-container span{color: #999999;
}- index.js文件
Page({/*** 页面的初始数据*/data: {gridList: [],},/*** 产生一个随机数。用来随机生成不同的图片高度，达到瀑布流效果*/getRandomInt(max) {return Math.floor(Math.random() * max)},/*** 模拟一些数据的方法*/generateGridList(childCount, columns) {const ans = []for (let i = 0; i < childCount; i++) {ans.push({id: i,height: this.getRandomInt(columns) + 1,})}this.setData({gridList: ans})},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.generateGridList(10, 3)},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})4. 报错问题，解决方法
错误信息如下：
[ grid-demo-3/index.json 文件内容错误] grid-demo-3/index.json: You need to set the value of the “componentFramework” field to “glass-easel” in the %, as the “renderer” field is set to skyline。More detail: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/glass-easel/migration.html(env: Windows,mp,1.06.2409140; lib: 3.6.4)
解决方案：这个报错在控制台提示的很明显了，需要在.json文件中设置"componentFramework": "glass-easel" 即可 ，如下图所示
5. 运行效果图
