微信小程序长图片自适应

css 复制代码
/*wxss中的代码*/
.image-container {  
  display:flex;
  width:  100%; /* 或其他需要的宽度 */  
  /* margin-bottom: 10px; //图片之间的间距   */
  height: auto;
}  

核心:要真正自适应,就要在wxml中加入固定宽度style="width:750rpx"

xml 复制代码
/*wxml中的代码*/
<view class="image-container" wx:for="{{imgUrls}}" wx:key="index">
  <image src="{{item}}" mode="widthFix" style="width:750rpx"/>
</view>
javascript 复制代码
/*js中的代码*/
data: {
    imgUrls: [
      'http://xxx.com/media/image/yzpl1.jpg',
      'http://xxx.com/media/image/yzpl2.jpg',
      'http://xxx.com/media/image/yzpl3.jpg',
      'http://xxx.com/media/image/yzpl4.jpg',
      'http://xxx.com/media/image/yzpl5.jpg',
      'http://xxx.com/media/image/yzpl6.jpg',
      'http://xxx.com/media/image/yzpl7.jpg',
      'http://xxx.com/media/image/yzpl8.jpg',
      'http://xxx.com/media/image/yzpl9.jpg',
      'http://xxx.com/media/image/yzpl10.jpg',
      'http://xxx.com/media/image/yzpl11.jpg',
    ]

  },
相关推荐
学习星球16 小时前
AI Agent 成本工程实战:从 OpenAI Codex 的 8 个“烧 Token“Bug 学起
人工智能·设计模式·微信小程序
律宏阔19 小时前
微信小程序使用 Orval + OpenAPI 自动生成接口:Axios 兼容踩坑记录
前端·微信小程序
律宏阔19 小时前
微信小程序集成 TDesign 完整记录:解决 NPM packages not found
前端·微信小程序
律宏阔20 小时前
微信小程序 ECharts 瘦身实战:分包异步化 + componentPlaceholder 避开主包 2MB 限制
前端·微信小程序
lhldsg1 天前
AI零售系统实战指南:从架构设计到落地部署全解析
java·人工智能·小程序·uni-app·零售
2601_949950632 天前
没有现成习题,试试AI再写出题
人工智能·小程序·刷题·练习·小程序推荐
andrsted2 天前
作业发布、课堂检测和错题讲评,用一个小程序完成
学习·微信小程序·小程序·学习方法
汤姆yu2 天前
基于微信小程序的家电维修预约系统
微信小程序·小程序·家电维修
软件聚导航2 天前
「聚小软 AI 助手」技术升级:从数据库检索到 RAG 知识库问答
前端·数据库·mysql·微信小程序·小程序·ai编程·rag