专栏首页sauiSAUI-瀑布流改版(grid)
原创

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
      }
    }

使用方法也是很简单的一件事,引入组件,传入数据。查看效果,或源码展示可扫以下两个小程序码

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序- SaUi 之左右选择器(城市选择,汽车品牌)

    这次的更新,主要是基于城市选择来扩展的。主要是上一次有人问过我,如果数据过大的话 我这个东西 还能用么~所以才有了这一次的更新,也欢迎大家,对我所做的东西 进行...

    ss-lgh
  • SAUI-关于input滚动问题

    2 去掉父级的overscroll,scroll-view。貌似所有的问题都不见了。经ios+andriod各一台手机测试

    ss-lgh
  • React Native之prop-types进行属性确认

    React Native已经升级到0.51.0了,版本升级很快,但是对老项目也会有一些问题,常见的就是属性找不到的问题。例如: ? 主要原因是随着R...

    xiangzhihong
  • Mysql :(一)

    最最最重要的就是搞清楚sql语句的执行顺序!!!数据就像沙子, 语句就是筛子, 沙子按照顺序经过给定的筛子,留下来的就是你要的!!!并不是写在前面的就先执行!!...

    宋先生
  • 【Flutter 专题】61 图解基本 Button 按钮小结 (一)

    Button 在日常中是必不可少的,和尚尝试过不同类型的 Button,也根据需求自定义过,今天和尚系统的学习一下最基本的 Button;

    阿策
  • 基于React与Redux的留言墙的实现

    由于某事业群需要留言墙用于年会,同时需要调用大象公众号服务器接口,所以在今年年初开发了留言墙用于活动现场交流。

    黄Java
  • 基础篇章:关于 React Native 之 Modal 组件的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) Modal是模态视图,它的作用是可以用来覆盖...

    非著名程序员
  • [Cocos Creator] 围绕物体旋转

    在游戏开发过程中,可能会有让一个物体围绕另一个物体旋转的需求,就比如月球围绕着地球旋转,同时地球也在围绕着太阳旋转。

    陈皮皮
  • call,apply,bind详解

    我们知道bind,call,apply的作用都是用来改变this指向的,那为什么要改变this指向呢?请看下面的例子:

    IT人一直在路上
  • 备战2018双十一,电商平台需要什么“黑科技”?

    网络营销的普及让许多商家尝到了互联网的甜头。领取优惠券、赠送礼品等手段为商家带来了更多用户和更高营收,但同时也催生了营销场景下的网络黑产。曾有业内人士大致测算,...

    腾讯云安全

扫码关注云+社区

领取腾讯云代金券