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

微信小程序长图片自适应

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

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

/*wxml中的代码*/
<view class="image-container" wx:for="{{imgUrls}}" wx:key="index"><image src="{{item}}" mode="widthFix" style="width:750rpx"/>
</view>
/*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',]},
http://www.lryc.cn/news/364747.html

相关文章:

  • elasticsearch hanlp 插件安装操作
  • 为什么进程和线程 ID 总是 4 的倍数?
  • LabVIEW版本控制
  • 不输Kimi的AI插件——Elmo Chat (免费,无需注册)
  • 使用cesiumLab使shp转为3dtlies
  • 中科数安 | 透明加密防泄密系统!如何有效防止企业内部核心数据资料外泄?
  • go的反射和断言
  • 打造新引擎,迈向数智金融新未来
  • 广东智慧物流2024年端午节放假安排
  • Facebook的隐私保护挑战:用户数据安全的新时代
  • Gradio.NET:一个快速制作演示demo网页的利器
  • 001 IOC与DI(有点杂)
  • Python语言自学:深入探索四个基础、五个进阶、六个实战及七个挑战
  • 运维开发介绍
  • Mac版的Typora的安装和激活(亲测可用哦~~~)
  • 【Python系列】Python 方法变量参数详解
  • 生命在于学习——Python人工智能原理(3.2)
  • JAVA面试八股文----Mybatis
  • [论文笔记]MemGPT: Towards LLMs as Operating Systems
  • Sentinel1.8.6更改配置同步到nacos(项目是Gateway)
  • 材料科学领域科技查新点提炼方法!---附案例
  • 深入理解HTTP与TCP:应用层与传输层的区分
  • Unity3D Delaunay德罗内三角算法详解
  • JAVA小案例-输出100-150中能被3整除的数,每5个换行
  • 论程序员的职业素养
  • 前端canvas绘图,利用canvas在图片上面绘制标记以及给canvas添加点击事件。
  • 38、Flink 的 WindowAssigner 之 GlobalWindows 示例
  • 同事仅靠着自己写的npm包跳槽去了大厂,羡慕了一整天
  • Yocto - bitbake任务中clean和cleanall的区别
  • Spring 中如何控制 Bean 的加载顺序?