微信小程序实现可以截断的瀑布流组件的示例代码

瀑布流是一种常见的布局方式,实现的方式有许多,比如直接分两列,然后控制在左右两列加入元素;还有一种方式就是通过绝对定位的方式来放置两边。本文所要介绍的瀑布流不同于常规的,因为瀑布流中间可能会被截断:

对于上面的布局,如果强制分成两列去做布局就不太适合了,因此我采用了绝对定位的方式来进行布局,由于瀑布流中的元素高度都不是固定的,因此我得想办法获取到每个元素的高度,然后判定元素到底是放一整行,还是左侧,亦或者右侧。

首先我们来看下模板部分的实现:

<view class="container" style="height:{{height}}px;">
    <view wx:for="{{list}}" wx:key="index" style="{{item.style}}" class="wrapper">
        <abstract item="{{item}}"/>
    </view>
</view>
<view wx:if="{{tmp}}" class="computed-zone">
    <view class="wrapper">
        <abstract item="{{tmp}}"/>
    </view>
</view>

模板比较简单,一个 container 容器,然后循环数组,平级渲染出一堆 wrapper 容器。

wrapper 容器是一个绝对定位的包裹元素,wrapper 容器里面需要放置需要实际渲染的组件,为了灵活性更高一点,我把这个渲染组件设置成了虚拟节点,在使用组件的时候可以指定实际渲染的自定义组件。

因为 wrapper 元素是绝对定位的,因此我们需要手动去维护整个 container 容器的高度。

这里有个问题是,我们怎么获取里面元素的高度呢?模板中的 computed-zone 就是来解决这个问题的,在将元素放置到数组之前,我们先把元素在 computed-zone 中进行渲染,然后通过 WXML api 来获取其中元素的实际渲染尺寸,这样我们就可以知道这个元素实际渲染的宽高度了。

有了每个元素的渲染尺寸信息之后,我们需要确认元素到底是占满整行,还是占半边:

  • 如果元素的渲染宽度跟容器一样,那么就可以判断这个元素沾满一整行,需要将包裹容器 wrapper 设置为一整行的宽度;
  • 如果不满足1条件,那么就需要基于左右元素的总高度,将 wrapper 放在左侧或者右侧。

分析下来,需要稍微写点儿逻辑的就是对 wrapper 计算偏移量,处理到底放左边还是放右边,亦或者占满整行,核心的代码实现如下:

{
    // 将 setData Promise 化,方便使用
    $setData(data) {
        return new Promise(resolve => {
            this.setData(data, () => {
                resolve();
            });
        });
    },
    // 获取元素的渲染尺寸
    getRect(item) {
        return this.$setData({
            tmp: item,
        }).then(() => {
            return new Promise((resolve, reject) => {
                const query = this.createSelectorQuery(); // 注意要使用 this,不要再使用 wx 前缀了
                query.select('.computed-zone .wrapper').boundingClientRect();
                query.exec(ret => {
                    if (ret[0]) {
                        resolve(ret[0]);
                    } else {
                        reject('not found dom!');
                    }
                });
            });
        });
    },
    // 添加元素,内部使用
    addItem(item) {
        let tick = this.tick;
        return this.getRect(item).then(rect => {
            if (tick !== this.tick) {
                return Promise.reject('tick');
            }
            const { margin } = this.data;
            let { height, width } = rect;
            const windowWidth = this.sysInfo.windowWidth;
            let [ leftTotal, rightTotal ] = this.height; // leftTotal 左侧栏高度,rightTotal 右侧栏高度,
            let marginPx = this.sysInfo.getPx(margin);
            let style = '';

            if (Math.abs(width - windowWidth) < 3) {
                // 占满屏幕宽度
                style = `left:0;top:${ Math.max(leftTotal, rightTotal) }px;width:100%;`;
                leftTotal = rightTotal = Math.max(leftTotal + height, rightTotal + height);
            } else if (rightTotal < leftTotal) {
                // 放入右边
                style = `right:${ marginPx }px;top:${ rightTotal }px;`;
                rightTotal += height;
            } else {
                // 放入左边
                style = `left:${ marginPx }px;top:${ leftTotal }px;`;
                leftTotal += height;
            }

            const { list = [] } = this.data;
            const targetKey = `list[${list.length}]`; // 利用直接操作数组下标的方式来触发数组修改,性能有很大提升
            this.height = [leftTotal, rightTotal]; // 记录最新的左右侧高度
            return this.$setData({
                [targetKey]: {
                    data: item,
                    style,
                },
                height: Math.max(leftTotal, rightTotal),
            });
        });
    },
    // 实际添加元素使用,自建Promise队列,保证顺序一致
    add(item) {
        let pending = this.pending || Promise.resolve();
        return this.pending = pending.then(() => {
            return this.addItem(item);
        }).catch(err => {
            console.error(err);
            this.pending = null;
            throw err;
        });
    },
    clear() {
        this.tick = tick++;
        this.height = [0, 0];
        this.pending = null;
        this.setData({
            list: [],
            height: 0,
        });
    },
}

在使用该组件的时候我们就不能直接通过赋值数组的方式来渲染元素了,而是得通过组件实例方法add(item) 的方式,因为我实现了队列,因此可以直接循环 add 就行。如果关心状态就判断最后一个元素的 add 操作是否完成即可。

通过这种方式来实现的瀑布流灵活性相对较高,但是性能消耗也是不低的,需要挨个获取元素的实际渲染尺寸,如果要支持窗口的resize的话,那消耗是恐怖。

对于需要看代码细节的同学,我将实际的demo放到了 Github微信代码片段,有需要的同学可以试一试。

基于上面的模型,其实也可以优化成只渲染可视区范围内的元素,可以大大提升瀑布流的性能

到此这篇关于微信小程序实现可以截断的瀑布流组件的示例代码的文章就介绍到这了,更多相关小程序截断的瀑布流组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序通过js实现瀑布流布局详解

    前言 瀑布流 - 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接.如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版.但column-count: 2是左右两列排版,如果碰巧出现左边累计高度过多大于右边累计高度的话,右边会出现大片空白区域.点击前往 js(推荐): 判断左右两边的累计高度,那边的高度小,便往那边添加(需要动态获取节点元素的高度进行计算).下面用的就是此种方法: 准备工作 我们需要用到 a

  • 小程序瀑布流组件实现翻页与图片懒加载

    电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框架抽象成组件,瀑布流的内容由业务确定.这样即可实现组件化和自定义的最大平衡,微信小程序组件源码. 首先,我们来看一下瀑布流组件在实际项目中的实际效果. 1 实际效果 瀑布流组件实际效果如下图所示,左侧为用户交互效果,右侧为图片懒加载实际效果. 2 什么是瀑布流? 瀑布流,又称瀑布流式布局.是比较流行

  • uniapp小程序实现瀑布流布局的思路与代码

    一.前言 现在写瀑布流算不算是炒冷饭啊? 我不管, 我就要写,谁也别想拦我. 瀑布流应该算是很常见的一种布局方法了,大致的思路也很好理解, 但是在小程序里面确有另外需要考虑的几个问题. 问题1:uniapp是基于Vue的,所以不好直接操作DOM. 问题2:uniapp基于Vue,但也做了一些修改,所以不好拿ref来操作 二.先说思路 为了保证文章的长度,以及有些小伙伴对瀑布流的基本思路不是很了解,所以先讲讲瀑布流的思路,先看下图. 可以看到,商品的图片高度是不一致的,再加上商品标题的行数不一致,

  • 微信小程序实现瀑布流分页滚动加载

    本文实例为大家分享了微信小程序实现瀑布流分页滚动加载的具体代码,供大家参考,具体内容如下 两种分页方式 普通的分页效果会在页面底部提供点击下一页和上一页的按钮,在点击了按钮之后才会触发调取数据的接口,这种方式的用户体验一般 另一种分页效果不需要用户点击按钮,只要浏览到当前页面的后几条数据时,系统会自动发送请求获取后一页的数据,并展示到页面上,这样就可以实现类似无限滚动的效果 以csdn为例,当滚动条到达这个地方时,会自动调用请求下一页数据的接口,然后累加到加载完成的数据列表中 实现思路 滚动分页

  • web页面和微信小程序页面实现瀑布流效果

    小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的高度: 4).重新对图片进行定位 1.web页面瀑布流效果,先看效果图(瀑布流+无限滚动加载): 页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

  • 微信小程序实现瀑布流布局与无限加载的方法详解

    前言 瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插件,轻松做出这样的布局形式.在微信小程序中,我们也可以做出这样的效果,不过由于小程序框架的一些特性,在实现思路上还是有一些差别的. 今天我们就来看一下如何在小程序中去实现这种瀑布流布局: 小程序瀑布流布局 我们要实现的是一个固定2列的布局,然后将图片数据动态加载进这两列中(而加载进来的图片,会

  • 小程序简单两栏瀑布流效果的实现

    瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.视觉表现为参差不齐的多栏布局,即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次放入到高度最低的那一栏. 先上代码:https://developers.weixin.qq.com/s/Fgm5s1mz7Wdm 所谓简单,是指只考虑图片,图片之外的其他元素高度固定,不在考虑范围内. 说一下基本的实现思路: 1.加载列表数据 2.在一个隐藏的view中加载图片,通过image组件的bin

  • 微信小程序实现可以截断的瀑布流组件的示例代码

    瀑布流是一种常见的布局方式,实现的方式有许多,比如直接分两列,然后控制在左右两列加入元素:还有一种方式就是通过绝对定位的方式来放置两边.本文所要介绍的瀑布流不同于常规的,因为瀑布流中间可能会被截断: 对于上面的布局,如果强制分成两列去做布局就不太适合了,因此我采用了绝对定位的方式来进行布局,由于瀑布流中的元素高度都不是固定的,因此我得想办法获取到每个元素的高度,然后判定元素到底是放一整行,还是左侧,亦或者右侧. 首先我们来看下模板部分的实现: <view class="container&

  • 微信小程序自定义select下拉选项框组件的实现代码

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

  • 微信小程序连续签到7天积分获得功能的示例代码

    每周每天签到获得积分的案例 功能设计:计算每天签到得1分,显示得到的签到积分,连续签到3天[周一二三]即得+多3分,连续签到7天[周一二三四五六日]+多7分,没有连续即不显示多余的3分或7分的提示- wxml结构: <!--pages/signIn2/signIn2.wxml--> <view class='sign-new'> <view class='in'> <view class='new-head'> <view class='sig-tl'

  • 微信小程序实现定位及到指定位置导航的示例代码

    一:实现定位及到指定位置导航所需组件及API 1:组件:map(地图组件) 2:API:wx.getLocation(Object object)(获取当前的地理位置.速度),wx.openLocation(Object object)(使用微信内置地图查看位置) 二:代码实现 1:wxml <view> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}"

  • 微信小程序中实现一对多发消息详解及实例代码

    微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

  • 微信小程序使用form表单获取输入框数据的实例代码

    本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng

  • 微信小程序局部刷新触发整页刷新效果的实现代码

    效果图 如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,选项栏又无法固定,所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onPageScroll(e) { this.scrollTop = e.scrollTop }, 2信息栏监听下拉状态的改变而改变自己的状态 :class="scrollTop>0?'head-title-fixed':'head-title

  • 微信小程序之批量上传并压缩图片的实例代码

    具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取 这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da

  • 微信小程序使用websocket通讯的demo,含前后端代码,亲测可用

    0.概述websocket (1) 个人总结:后台设置了websocket地址,服务器开启后等待有人去连接它. 一个客户端一打开就去连接websocket地址,同时传递某些识别参数.这样一来后台和客户端连接成功了,然后后台就可以发消息给客户端了,(客户端也可以再回话给后台). (2) socket叫套接字,应用程序用socket向网络发出请求或者应答网络请求. (3) 官方解释的socket 建立连接四步骤: 服务器端开启socket,然后accep方法处于监听状态,等待客户端的连接. 客户端开

  • 微信小程序判断页面是否从其他页面返回的实例代码

    微信小程序判断页面是否从其他页面返回,具体内容如下所示: 在 data 中自定义一个标记变量,在onLoad里 Page({ data: { isNewOpen: true, //判断当前页面是新打开还是从其他页面返回 list: [], page: 0 }, onLoad: function() { this.getList() }, getList () { // ... }, goDetail (e) { this.setData({ isNewOpen: false }) wx.navi

随机推荐