首页 > 其他分享 >uniapp项目实践总结(十八)自定义多列瀑布流组件

uniapp项目实践总结(十八)自定义多列瀑布流组件

时间:2023-09-19 20:34:51浏览次数:39  
标签:uniapp 自定义 image pic jpg waterfall static 多列 图片

导语:有时候展示图片等内容,会遇到图片高度不一致的情况,这时候就不能使用等高双列或多列展示了,这时候会用到瀑布流的页面布局,下面就一起探讨一下瀑布流的实现方法。

目录

  • 准备工作
  • 原理分析
  • 实战演练
  • 案例展示

准备工作

  • pages/index文件夹下面新建一个waterfall.vue的组件;
  • 按照前面文章所说的页面结构,编写好预定的瀑布流案例页面;
  • 在网上找几张免费的图片素材;

原理分析

主要是根据图片的高度自动比较每列的总高度,根据uni.getImageInfo获取到图片高度,然后哪列低,就给哪列补充图片,直至图片列表循环完毕。

实战演练

模板使用

下面就是循环列和图片。

<view class="waterfall-page">
  <view
    class="waterfall-page-column"
    v-for="(item, index) in waterfall.columnList"
    :key="index"
    ref="column"
  >
    <view
      class="waterfall-page-item"
      v-for="(pItem, pIndex) in item"
      :key="pIndex"
    >
      <image class="waterfall-page-img" :src="pItem" mode="widthFix"></image>
    </view>
  </view>
</view>

样式编写

.waterfall-page {
  display: flex;
  align-items: flex-start;
  .waterfall-page-column {
    box-sizing: border-box;
    flex: 1;
    padding: 0 10rpx;
    width: 0;
    .waterfall-page-item {
      margin-bottom: 10rpx;
      .waterfall-page-img {
        display: inline-block;
        width: 100%;
      }
    }
  }
}

脚本使用

  • 定义数据
// 瀑布流信息
const waterfall = reactive({
  // 图片列表
  imgList: [
    "/static/image/waterfall/pic-01.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-03.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-05.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-01.jpg",
    "/static/image/waterfall/pic-03.jpg",
    "/static/image/waterfall/pic-07.jpg",
  ],
  columnList: [], // 每列图片
  columnHeight: [], // 每列图片高度
  columnCount: 2, // 总列数
});
  • 初始化数据
// 初始化数据
function initData() {
  for (var i = 0; i < waterfall.columnCount; i++) {
    waterfall.columnList.push([]);
    waterfall.columnHeight.push(0);
  }
}
  • 计算方法
// 设置瀑布流布局
async function setWaterfallLayout() {
  for (var i = 0; i < waterfall.imgList.length; i++) {
    let item = waterfall.imgList[i];
    try {
      let imgInfo = await uni.getImageInfo({
          src: item,
        }),
        h = imgInfo.height;
      for (let j = 0; j < waterfall.columnCount - 1; j++) {
        let prevIndex = j,
          nextIndex = j + 1;
        if (
          waterfall.columnHeight[prevIndex] <= waterfall.columnHeight[nextIndex]
        ) {
          waterfall.columnList[prevIndex].push(item);
          waterfall.columnHeight[prevIndex] += h;
        } else {
          waterfall.columnList[nextIndex].push(item);
          waterfall.columnHeight[nextIndex] += h;
        }
      }
    } catch (error) {
      console.log(error);
    }
  }
}

案例展示

  • h5 端效果
    image
    image

  • 小程序端效果
    image
    image

  • APP 端效果
    image
    image

最后

以上就是自定义多列瀑布流组件的主要内容,有不足之处,请多多指正。

标签:uniapp,自定义,image,pic,jpg,waterfall,static,多列,图片
From: https://www.cnblogs.com/guanqiweb/p/17715727.html

相关文章

  • 在C#中如何自定义配置上周和本周起始日来查询业务数据?
    作者:西瓜程序猿主页传送门:https://blog.51cto.com/kimiliucn前言在做某个报表管理功能时,有一个需求:需要根据自定义配置的[周起始日]来统计上周、本周的订单数据。在C#中并没有封装的方法根据我们需要来直接获取上一周某天到某天、本周某天到某天,所以需要我们自己封装方法来实现(我们......
  • 在C#中如何自定义配置上周和本周起始日来查询业务数据?
    作者:西瓜程序猿主页传送门:https://www.cnblogs.com/kimiliucn前言在做某个报表管理功能时,有一个需求:需要根据自定义配置的[周起始日]来统计上周、本周的订单数据。在C#中并没有封装的方法根据我们需要来直接获取上一周某天到某天、本周某天到某天,所以需要我们自己封装方法......
  • arcgis for js4.x自定义Graphic数组创建FeatureLayer添加标注
    varpoint=[{ "geometry":{ "x":116.820688, "y":33.974053, "spatialReference":{ "wkid":4326 } }, "......
  • 自定义Feign日志打印
    说明想要自定义feign日志打印只需要继承feign.Logger抽象类,在自定义类中一般会重写三个方法logRequest这个方法入参分别是StringconfigKey,Logger.LevellogLevel,RequestrequestconfigKey:feign调用的所在接口名+方法名logLevel:日志层级NONE,BASIC,HEADERS,FULLre......
  • 微信小程序转换成uniapp项目
    1.把微信小程序转换成uniapp项目1.1 安装miniprogram-to-uniapp插件打开cmd,运行【npminstallminiprogram-to-uniapp-g】进行安装,因为这个包是工具,要求全局都能使用,所以需要-g进行全局安装。npminstallminiprogram-to-uniapp-g如果运行npm报错,请先安装Node.js,下载地......
  • 支持SpEL表达式的自定义日志注解@SysLog介绍
    目录序言预期思路过程结果序言之前封装过一个日志注解,打印方法执行信息,功能较为单一不够灵活,近来兴趣来了,想重构下,使其支持表达式语法,以应对灵活的日志打印需求。该注解是方法层面的日志打印,如需更细的粒度,还请手撸log.xxx()。预期通过自定义注解,灵活的语法表达式,拦......
  • 自定义全局反序列化器
    以处理LocalDateTime格式的全局反序列化器为例,全局序列化器类似1、全局反序列化器代码importcom.fasterxml.jackson.annotation.JsonFormat;importcom.fasterxml.jackson.core.JsonParser;importcom.fasterxml.jackson.core.JsonProcessingException;importcom.fasterxml......
  • 自定义异常类处理
    在编程过程中,异常是不避免的,为了是我们的代码更加可靠,我们需要学会如何处理异常。一下是自定义异常以及异常处理的一个小案例:#一.自定义异常类MyException类,测试当用户输入的数字大于90,raise主动抛出并处理该异常classMyException(Exception):def__init__(self,msg):......
  • vue3版的uniapp在路由这块有好的方案吗?
    在Vue3版本的uni-app中,你可以使用VueRouter进行路由管理。VueRouter是Vue.js官方提供的路由解决方案,可以方便地实现单页面应用的路由功能。以下是一些在Vue3版的uni-app中使用VueRouter的好的方案:安装VueRouter:首先,在你的uni-app项目中安装VueRouter。可以使用npm或yarn来安......
  • Vue学习七:自定义创建项目和vuex
    一、自定义创建项目默认的项目有很多包不全,需要的时候还要导包搭架子,因此我们可以自定义创建项目。选择的项目按照自己需要的设置,可参考如下参数设置。(eslink是一种代码规范)二、vuex1、vuex概述vuex是一个vue的状态管理工具,状态就是数据。大白话:vuex是一个插件,可以帮我们......