微信小程序长图片自适应

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',
    ]

  },
相关推荐
低代码布道师4 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
程序员陆通8 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发8 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩8 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师8 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_916008898 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921438 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
—Qeyser12 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_9160088912 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
Dark_programmer12 小时前
钉钉小程序 - - - - - 小程序内打开OA文档链接
小程序·钉钉