微信小程序实现容器图片流式布局功能,配合小程序原生框架使用。

news/2024/7/21 23:31:50/文章来源:https://blog.csdn.net/weixin_57177381/article/details/139105905

小程序实现容器图片流式布局功能,因为目前论坛上也有很多博主出过类似的文章,这里我就以一个小白角度去讲一下如何实现的吧。给作者一点点鼓励,先点个赞赞吧👍,蟹蟹!!

目标

 实现下方效果图

技术栈 

微信小程序原生框架,wxml+wxss+js,因为后端是云开发的,所以网络请求是官方的api,比如wx.cloud.database().collection("community") .get()

这样做的好处

能根据图片的高度自适应容器高度,整体美观,易读

实现逻辑

1.页面布局wxml,一个大容器(宽度撑满屏幕高度)中,包含两列容器,左边一列,右边一列。如图所示,有图清晰一点。

2.首先获取一个数组dataList,用于渲染到页面上的数据,这里就用闲置帖子为例。

3.准备两个变量,一个是整型leftheight,作为左边容器实时高度,另一个是整型rightheight,作为右边容器实时高度。

4.获取数组后将回调值res中的data赋值给list局部变量,并循环这个list数组,同时判断左边的容器高度和右边的容器哪个更低,将子元素(子元素为对象)设置一个index属性标记属于左边容器,还是右边容器,这里的例子是index == 0 时候是左边容器,index==1时候是右边容器。每一次循环渲染子元素的时候判断左右容器高低,左边容器低则index设置为0标记到左边容器中去,否则亦反。

注意:picheight为数据库中数据已有的字段属性,为图片的高度

var that = this
var list = res.data //res.data为获取数据库中返回的数据数组 ,list为临时存储变量
var dataList = that.data.dataList //dataList为最终渲染到页面的数组数据
var leftheight = that.data.leftheight // 获取全局变量保存的左边容器高度
var rightheight = that.data.rightheight // 获取全局变量保存的右边容器高度for (let i = 0; i < list.length; i++) {//这里的picheight为存储到数据库时候的高度if (leftheight <= rightheight) {leftheight = leftheight + list[i].picheight + 120list[i].index = 0} else {rightheight = rightheight + list[i].picheight + 120list[i].index = 1}dataList.push(list[i])
}that.setData({dataList: dataList,leftheight: leftheight,rightheight: rightheight})

5.在wxml通过for循环渲染出来

部分关键代码:

 <view class="shop-big-box flex-row-center-x"><!-- 左列表 --><view class='shop'><block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 0}}"><my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" /></block></view><!-- 右列表 --><view class='shop'><block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 1}}"><my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" /></block></view></view>

my-datalist组件

<view class="shop-detail" bindtap="godetail" data-id="{{item._id}}"><view class='imagecont' style="height:{{item.picheight}}rpx;"><block wx:if="{{item.pictures.length > 0}}"><image src="{{item.pictures[0]}}" data-index="{{index}}" class="prodimg" style="height:{{item.picheight}}rpx;z-index: 3;"  mode="aspectFill" /></block></view></view><view style="width: 100%;display: flex;flex-wrap: wrap;height: 120rpx;"><view class="shop-detail-text">{{item.text}}</view><view class="shop-detail-user flex-row-center"><image src="{{item.user.imagavatares}}" style="border-radius: 50%;width: 30rpx;height: 30rpx;margin: 0 10rpx;background-color: rgb(247, 247, 247);" /><text>{{item.user.username}}</text></view></view>
</view>

完整代码

index.wxml 

<view class="shop-big-box flex-row-center-x"><!-- 左列表 --><view class='shop'><block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 0}}"><my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" /></block></view><!-- 右列表 --><view class='shop'><block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 1}}"><my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" /></block></view></view>

 index.wxss

.shop-big-box{width: 100%;
}.shop{width: 340rpx;margin: 0 10rpx;
}
/* 盒子水平摆放并水平居中 */
.flex-row-center-x{display: flex;flex-direction: row;justify-content: center;
}

index.js

// pages/index/index.js
const app = getApp()
const db = wx.cloud.database()
const _ = db.command
Page({/*** 页面的初始数据*/data: {dataList: [],leftheight: 0,rightheight: 0,},/*** 生命周期函数--监听页面加载*/onLoad() {this.getList()},getList() {var that = thiswx.cloud.database().collection("community").orderBy('top', 'desc').orderBy('date', 'desc').get({success(res) {console.log("出来的数据", res.data);if (res.data.length > 0) {var list = res.datavar dataList = that.data.dataListvar leftheight = that.data.leftheightvar rightheight = that.data.rightheightfor (let i = 0; i < list.length; i++) {if (leftheight <= rightheight) {leftheight = leftheight + list[i].picheight + 120list[i].index = 0} else {rightheight = rightheight + list[i].picheight + 120list[i].index = 1}dataList.push(list[i])}that.setData({dataList: dataList,leftheight: leftheight,rightheight: rightheight,})} },fail(err) {wx.showToast({title: '网络出错啦!' + err,icon: 'none'})}})},})

index.json

{"usingComponents": {"my-datalist": "../../components/datalist/datalist"},"navigationStyle": "custom","enablePullDownRefresh": true
}

 components/datalist.js

const app = getApp()
const db = wx.cloud.database()
const _ =db.command
Component({properties: {item: JSON,index:String,},methods: {godetail(e) {wx.navigateTo({url: '/pages/Filecommunity/detail/detail?id=' + e.currentTarget.dataset.id,})},getimage() {this.triggerEvent('getimage');},},
});

 components/datalist.json

{"component": true,"usingComponents": {}
}

 components/datalist.wxml

<view class="shop-detail" bindtap="godetail" data-id="{{item._id}}"><view class='imagecont' style="height:{{item.picheight}}rpx;"><block wx:if="{{item.pictures.length > 0}}"><image src="{{item.pictures[0]}}" data-index="{{index}}" class="prodimg" style="height:{{item.picheight}}rpx;z-index: 3;" mode="aspectFill" /></block></view><view style="width: 100%;display: flex;flex-wrap: wrap;height: 120rpx;"><view class="shop-detail-text">{{item.text}}</view><view class="shop-detail-user flex-row-center"><image src="{{item.user.imagavatares}}" style="border-radius: 50%;width: 30rpx;height: 30rpx;margin: 0 10rpx;background-color: rgb(247, 247, 247);" /><text>{{item.user.username}}</text></view></view>
</view>

 components/datalist.wxss


.shop-detail{border-radius: 10rpx;width: 340rpx;background: #fff;display: inline-block;font-size: 28rpx;margin: 10rpx 0;
}.shop-detail-text{font-size: 28rpx;width: 100%;margin: 10rpx 0;overflow:hidden;white-space:nowrap;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;
}
.shop-detail-user{display: flex;flex-direction: row;align-items: center;overflow:hidden;white-space:nowrap;font-size: 24rpx;height: 26rpx;margin: 10rpx 0 10rpx 0;text-overflow: ellipsis;width: 100%;
}.imagecont{width: 100%;font-size: 0;position: relative;
}
.prodimg {width: 100% !important;vertical-align: middle !important;border-radius: 10rpx !important;position: absolute !important;font-size:0 !important;}
/* 盒子水平摆放并垂直居中 */
.flex-row-center{display: flex;flex-direction: row;align-items: center;
}

这篇对您有所帮助的话,来个点赞或关注吧❀❀~,另外要预览效果的可以搜索邑学宝微信小程序呦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1052935.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Sql Server】随机查询一条表记录,并重重温回顾下自定义函数的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…

英语语法早操练-(上)

说起语法宝宝感觉心里苦。那么多语法注意点&#xff0c;哪个都放不到心里&#xff0c;句子表达还是错。这种情况是浪费了80%的时间做了达不到20%效果的事情。 要想写出没有语法错误的句子&#xff0c;那至少得知道词性和句子成分。 词性就是名词、动词、形容词、介词等 句子成分…

wordpress教程视频 wordpress教程网盘 wordpress教程推荐wordpress教程网

WordPress&#xff0c;作为一款强大且灵活的开源内容管理系统&#xff0c;已成为许多网站开发者与运营者的首选。其强大的功能、丰富的插件以及易于上手的特点&#xff0c;使得无论是初学者还是专业开发者都能轻松构建出个性化的网站。然而&#xff0c;对于初学者来说&#xff…

免费,Python蓝桥杯等级考试真题--第15级(含答案解析和代码)

Python蓝桥杯等级考试真题–第15级 一、 选择题 答案&#xff1a;B 答案&#xff1a;D 解析&#xff1a;集合的并集运算有两种方式&#xff0c;一种是使用“|”运算符进行操作&#xff0c;另一种是使用union()方法来实现&#xff0c;故答案为D。 答案&#xff1a;A 解析&…

XS2185一款八通道以太网供电控制器

XS2185是一款八通道以太网供电控制器。 XS2185通过侦测各通道的DET管脚输入电压 来判断是否有合格的负载/PD接入系统&#xff0c;以决定 是否开启MOS供电开关。 当通道已经处于供电状态时&#xff0c;XS2185通过侦 测SENSE管脚的输入电压&#xff0c;以判断供电是否发生 …

字符串压缩

题目链接 字符串压缩 题目描述 注意点 字符串长度在[0, 50000]范围内若“压缩”后的字符串没有变短&#xff0c;则返回原先的字符串字符串中只包含小写英文字母&#xff08;a至z&#xff09; 解答思路 模拟思路&#xff0c;使用pre存储当前位置的前一个字符&#xff0c;使…

使用BigDecimal定义的实体类字段返回给前台的是字符串类型,如何返回数字类型

目录 前言&#xff1a; 问题现象&#xff1a; 解决方法&#xff1a; 效果&#xff1a; 前言&#xff1a; 做项目的时候数据字段通常定义为bigdecimal类型&#xff0c;方便进行运算&#xff0c;但是发现接口调用后返回给前台的是字符串&#xff0c;这篇博文讲的是如何将定义…

Creating parameterized straight waveguide in INTERCONNECT 创建参数化的器件

Creating parameterized straight waveguide in INTERCONNECT 创建参数化的器件 引言正文引言 之前,我们在 INTERCONNECT 中使用库中器件制作一个损耗为 3 dB /m 的直波导 一文中介绍了如何使用 Library 中的直波导来进行仿真,这里我们简单介绍如何在 INTERCONNECT 中创建属…

ArcgisPro3.1.5安装手册

ArcgisPro3.1.5安装手册 一、目录介绍: 二、安装教程&#xff1a; (1)安装顺序&#xff1a;最先安装运行环境&#xff08;runtime6.0.5&#xff09;,接着安装install里面的文件&#xff0c;最后复制path里面的文件替换到软件bin文件夹下即可。 (2)具体安装步骤&#xff…

用这8种方法在海外媒体推广发稿平台上获得突破-华媒舍

在今天的数字时代&#xff0c;海外媒体推广发稿平台已经成为了许多机构和个人宣传和推广的有效途径。如何在这些平台上获得突破并吸引更多的关注是一个关键问题。本文将介绍8种方法&#xff0c;帮助您在海外媒体推广发稿平台上实现突破。 1. 确定目标受众 在开始使用海外媒体推…

疑惑点:动作监听时this的含义:可以理解为接口的多态

全部代码&#xff1a; package test;import javax.swing.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Random;public class test3 extends JFrame implements ActionListener {JButton jb1 new JButton("你点我啊&am…

鸿蒙ArkUI-X跨平台开发:【bility开发说明(iOS端)】

通过Stage模型开发iOS端应用指南 简介 本文介绍将ArkUI框架扩展到iOS平台所需要的必要类及其使用说明&#xff0c;开发者基于OpenHarmony&#xff0c;可复用大部分的应用代码&#xff08;生命周期等&#xff09;并可以部署到iOS平台&#xff0c;降低跨平台应用开发成本。 Ar…

c++——模板初始识

1.函数模板 我们经常用到Swap函数交换两个值。由于需要交换的数据的类型不同&#xff0c;我们就需要写不同参数类型的同名函数&#xff0c;也就是函数重载&#xff1a; 然而这三个函数的逻辑是一样的&#xff0c;写这么多有些多此一举&#xff0c;通过函数模版可以写一个通用…

SAP后续借记、后续贷记、贷方凭证的应用介绍

SAP-MM模块中发票校验MIRO,对于做采购或财务相关的用户都应该非常熟悉,可能每天都需要进行这业务操作处理,但是在发票校验的系统界面中,有三个使用不是很频繁的功能(如下图红色框)。 对于这三业务功能曾听有些用户抱怨SAP怎么那么麻烦啊,不就是补偿或扣供应商的钱嘛,我…

配置环境变量

配置环境变量$(xxxx)&#xff0c;代表宏 32位操作系统&#xff0c;请自觉将文中路径中所有的x64换成x86。 %符号表示引用系统环境变量或用户自定义的环境变量 如果你想将某个文件夹添加到Visual Studio的路径中&#xff0c;你可以在环境变量中添加%FolderName%&#xff0c;其…

经验分享:JMeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就…

17- PHP 开发-个人博客项目TP 框架路由访问安全写法历史漏 洞

常见的php框架&#xff1a;laravel和thinkphp和yii 这里以thinkphp为例 thinkphp目录访问设置 这里只找到了这个3.多的源代码&#xff0c;没找点5.的&#xff0c;凑合一下 链接&#xff1a;GitHub - top-think/thinkphp: ThinkPHP3.2 ——基于PHP5的简单快速的面向对象的PHP…

RPC 框架

RPC 全称 Remote Procedure Call——远程过程调用。 RPC技术简单说就是为了解决远程调用服务的一种技术&#xff0c;使得调用者像调用本地服务一样方便透明。RPC是一种通过网络从远程计算机程序上请求服务&#xff0c;不需要了解底层网络技术的协议。 集群和分布式 集群&…

GIGE 协议摘录

系列文章目录 GIGE 学习笔记 GIGE 协议摘录 文章目录 系列文章目录引言第 1 章 设备发现1.1 链路选择1.1.1 单链路配置1.1.2 多链路配置1.1.3 链路聚合组配置 LAG 1.2 IP配置1.2.1 协议选择1.2.2 静态IP1.2.3 DHCP1.2.4 链接本地地址 LLA 1.3 设备枚举1.3.1 GVCP设备发现 引言 …

832. 翻转图像 - 力扣

1. 题目 给定一个 n x n 的二进制矩阵 image &#xff0c;先 水平 翻转图像&#xff0c;然后 反转 图像并返回 结果 。 水平翻转图片就是将图片的每一行都进行翻转&#xff0c;即逆序。 例如&#xff0c;水平翻转 [1,1,0] 的结果是 [0,1,1]。 反转图片的意思是图片中的 0 全部被…