当前位置: 首页 > news >正文

uniapp使用多列布局显示图片,一行两列

完整代码:

<script setup>const src = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
</script><template><view class="content"><view class="img-list"><image :src="src" /><image :src="src" /><image :src="src" /><image :src="src" /><image :src="src" /><image :src="src" /><image :src="src" /></view></view>
</template><style scoped>.content {margin: auto;display: flex;flex-direction: column;align-items: center;justify-content: center;}.img-list {padding: 10rpx;column-count: 2;column-gap: 10rpx;}
</style>

渲染效果:
在这里插入图片描述

http://www.lryc.cn/news/399917.html

相关文章:

  • 近期几首小诗汇总-生活~卷
  • 超时导致SparkContext构造失败的问题探究
  • 【人工智能】Transformers之Pipeline(一):音频分类(audio-classification)
  • Nginx 负载均衡详解
  • Unity3D开发之传送带实现
  • 【学习笔记】无人机(UAV)在3GPP系统中的增强支持(二)-支持高分辨率视频直播应用
  • python的私有属性和数据封装
  • 一文学会鉴别“套壳”ChatGPT模型
  • Docker基本管理1
  • python-28-零基础自学python-json存数据、读数据,及程序合并
  • Excel第30享:基于辅助列的条件求和
  • Java查看RSA密钥的ASN1结构
  • 友思特方案 | 低延迟GigE Vision解决方案:用于红外设备、医疗和工业级探测面板
  • 网络安全策略:优先防护而非溯源的重要性
  • ES6 Iterator 与 for...of 循环(五)
  • typora删除多余图片
  • 【ceph】ceph-mon重新选举的情况
  • PopClip(Mac 划词增强工具)值得购买吗?
  • Python | Leetcode Python题解之第227题基本计算器II
  • redis源码分析之底层数据结构(一)-动态字符串sds
  • 路由协议的优先级,以及管理距离 AD 和 metric 的区别
  • 力扣 24两两交换链表中节点
  • C# + halcon 联合编程示例
  • 【Git基本操作】添加文件 | 修改文件 | 及其各场景下.git目录树的变化
  • Aop切面编程(2)--代理模式
  • Spring Boot(八十):Tesseract实现图片文字自动识别
  • QT 图片处理
  • Linux C++ 053-设计模式之模板方法模式
  • 【Python 项目】类鸟群:仿真鸟群
  • 基于信号处理的PPG信号滤波降噪方法(MATLAB)