小程序--解决Swiper 图片高度自适应

 <swiper bindchange="bindchange" style="height:{{imgheights[current]}}rpx;" indicator-dots="{{indicatorDots}}"  autoplay="false" circular ='true' interval="5000" duration="1000">
                    <block wx:for="{{item.images}}" wx:for-item="itemName" wx:key='itemName'>
                      <swiper-item>
                        <image bindload="imageLoad"  data-id='{{index}}' src="{{itemName}}" class="slide-image"  mode="widthFix" style='width:100%'   />
                      </swiper-item>
                    </block>
</swiper>
复制代码
Page({
   data:{
     imgheights: [],//所有图片的高度  
     current:0
   } ,
  imageLoad(e){
//当图片载入完毕时
var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) // 计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一张图片的对应的高度记录到数组里 imgheights[e.target.dataset.id] = imgheight; console.log('图片的高度:'+imgheights) this.setData({ imgheights: imgheights }) }, bindchange: function (e) {// current 改变时会触发 change 事件
this.setData({ current: e.detail.current })
  },

})
复制代码

 

posted @   梦蝶庄周  阅读(3413)  评论(0编辑  收藏  举报
编辑推荐:
· .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语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示