SAUI-瀑布流改版(grid)
时间:2022-07-22
本文章向大家介绍SAUI-瀑布流改版(grid),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
哈哈 我又来了~~~~
在上一版结束之后,还是不满意。又折腾了几天,今天终于推上来了。
这一次的瀑布流,是真的瀑布流形式,上一版只是看起来像而已。
通过css的grid与js配合,就可以快速形成瀑布流的形式了。不过呢,有点小问题,就是间距(grid-gap),有点小偏差,但是整体不影响。还有一点要注意的grid层最好不要有padding或box-sizing: border-box等
//css部分
.demo-list{
width: 100%;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 12px 12px;
grid-auto-flow: row dense;
justify-items: start;
align-items: start;
--vsb: hidden;
}
.demo-list-item{
width: 100%;
visibility: var(--vsb); //这个属性的有一点的重要性,可以在渲染时让item先占位
}
//组件部分
lifetimes: {
attached: function() { //节点树完成,可以用setData渲染节点,但无法操作节点
let properties = this.properties
this.$$id = properties.dataSource.$$id || 'waterfall'
let list = {
data: adpater(properties.dataSource.data),
footer: {
title: '数据正在加载,请稍后...',
itemClass: 'waterfall-load-tips'
},
header: {
title: {
title: ' ',
itemClass: 'icon-loading'
},
itemClass: 'water-loading-page'
},
listClass: 'demo-list',
itemClass: 'demo-list-item',
}
this.setData({
scrollCfg: properties.dataSource.scrollCfg,
$list: list
})
this.orginData = properties.dataSource.data
this.loadedStatus = false //判断是否已经显示了加载完成的状态
},
ready: function() {
let query = wx.createSelectorQuery().in(this)
const that = this
this.hooks.once('compute-items-rect', function() {
setTimeout(() => {
query.selectAll('.wrap-list >>> .demo-list-item').boundingClientRect(ret=>{
if (ret.length) {
let styleStr = '';
ret.forEach((ele, ii) => {
let height = ele.height
let span = parseInt((height + 12) / 12)
styleStr += `--item-row-span-${ii}: auto / span ${span};`
})
styleStr += `--vsb: visible ;`
that.setData({ '$list.listStyle': styleStr, '$list.header': {title: ' ', itemClass: ' '}})
}
}).exec()
}, 1000)
})
this.hooks.emit('compute-items-rect')
}
}
//业务部分
//wxml
//js
const data = [
{
img: 'http://www.agzgz.com/imgs/appstorecover-1.jpg',
title: '带你体验猪一样的幸福生活, 寻味佛山顺德两天一夜的...',
},
{
img: 'http://www.agzgz.com/imgs/fruit.jpg',
title: '3网易严选多功能私享头',
}
...
]
data: {
list: {
$$id: 'waterfallx', //实例id
scrollCfg: { //scroll配置
'scroll-y': true,
'lower-threshold': 100,
bindscrolltolower: 'bindscrolltolower',
'enable-back-to-top': true
},
listClass: 'demo-list',
itemClass: 'demo-list-item',
data: data
}
}
使用方法也是很简单的一件事,引入组件,传入数据。查看效果,或源码展示可扫以下两个小程序码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【从零开始用Swift开发一个iOS应用(仿微博)】开篇-1. demo上手体验
- 数据结构与算法-二维数组中的查找
- 卷积神经网络之 - GoogLeNet / Inception-v1
- 卷积神经网络之 - Alexnet
- Linux系列之学会使用Top命令进行系统监控
- 一简单线程同步笔试题分享,欢迎纠错分享更多思路
- 卷积神经网络之-NiN 网络(Network In Network)
- 【注意力机制】空间注意力机制之Spatial Transformer Network
- 【小技巧】用Python给你的视频添加字幕
- 震惊!我三步就搞定了 Tomcat 源码环境搭建!
- 【小技巧】深度学习中的那些效率提升利器(附资源)
- 多个线程为了同个资源打起架来了,操作系统是如何让他们安分的?
- 学习链表,这些题你值得一刷!
- Gophish钓鱼测试
- 【位运算】只出现一次的数字 II,数电的知识终于用上了!