微信小程序swiper高度自适应
<!--滚动图片--> <view class='swiper'> <swiper current="{{img.current}}" indicator-dots="true" indicator-color="#fff" indicator-active-color="#f23030" vertical="{{img.vertical}}" autoplay="{{img.autoplay}}" duration="{{img.duration}}" interval='{{img.interval}}' bindchange="bindchange" circular="{{img.circular}}" style="height:{{img.imgheights[img.current]}}rpx;"> <block wx:for='{{img.imgList}}' wx:key="{{index}}"> <swiper-item> <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" /> </swiper-item> </block> </swiper> </view> <!--//滚动图片-->
data: { img: { //图片地址 imgList: [ 'http://192.168.1.9:809/content/images/thumbs/000/0000117.png', 'http://192.168.1.9:809/content/images/thumbs/000/0000121.png', 'http://192.168.1.9:809/content/images/thumbs/000/0000116.png' ], //是否采用衔接滑动 circular: true, //是否竖直 vertical: false, //是否自动切换 autoplay: true, //自动切换的间隔 interval: 3000, //滑动动画时长毫秒 duration: 100, //所有图片的高度 imgheights: [], //图片宽度 imgwidth: 750, //默认 current: 0 } }, //滚动图自适应高度 imageLoad: function(e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; //计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var img = this.data.img; var imgheights = this.data.img.imgheights; //把每一张图片的对应的高度记录到数组里 img.imgheights[e.target.dataset.id] = imgheight; this.setData({ img: img }) }, bindchange: function(e) { var img = this.data.img; img.current = e.detail.current; this.setData({ img: img }) },
分类:
微信小程序
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构