[图片] const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const MAX_LIMIT = 100 //.doc(this.data.id_) exports.main = async(event, context) => {   const wxContext = cloud.getWXContext()     return await db.collection("userlist").where({     _id: wxContext.OPENID   }).orderBy('time', 'desc').get({     success: function(res) {       // return res     }   });   return {     //  data,     event,     openid: wxContext.OPENID,     appid: wxContext.APPID,     unionid: wxContext.UNIONID,   } }

微信小程序中使用swiper组件可以实现图片轮播效果，但是默认swiper高度是固定的150px，如果项目中图片大于固定高度就会被隐藏，所以本篇文章要实现轮播图片的高度自适应。 效果图： [图片] wxml代码： [代码]<[代码][代码]swiper[代码] [代码]class[代码][代码]=[代码][代码]"t-swiper"[代码] [代码]indicator-dots[代码][代码]=[代码][代码]"{{indicatordots}}"[代码] [代码]indicator-active-color[代码][代码]=[代码][代码]"{{color}}"[代码] [代码]autoplay[代码][代码]=[代码][代码]"{{autoplay}}"[代码] [代码]interval[代码][代码]=[代码][代码]"{{interval}}"[代码] [代码]duration[代码][代码]=[代码][代码]"{{duration}}"[代码] [代码]style[代码][代码]=[代码][代码]"height:{{height}}"[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]block[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{img}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]""[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]swiper-item[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]image[代码] [代码]src[代码][代码]=[代码][代码]"{{item}}"[代码] [代码]mode[代码][代码]=[代码][代码]"widthFix"[代码] [代码]bindload[代码][代码]=[代码][代码]'goheight'[代码] [代码]/>[代码][代码]    [代码][代码]</[代码][代码]swiper-item[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]block[代码][代码]>[代码][代码]</[代码][代码]swiper[代码][代码]>[代码]wxss代码： [代码].t-swiper image {[代码][代码]  [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码]js代码： [代码]Page({[代码][代码]  [代码][代码]data: {[代码][代码]    [代码][代码]img: [[代码][代码]      [代码][代码]'img/1.jpg'[代码][代码],[代码][代码]      [代码][代码]'img/2.jpg'[代码][代码],[代码][代码]      [代码][代码]'img/3.jpg'[代码][代码]    [代码][代码]],[代码][代码]    [代码][代码]indicatordots: [代码][代码]true[代码][代码],[代码][代码]    [代码][代码]//是否显示面板指示点[代码][代码]    [代码][代码]autoplay: [代码][代码]true[代码][代码],[代码][代码]    [代码][代码]//是否自动切换[代码][代码]    [代码][代码]interval: 5000,[代码][代码]    [代码][代码]//自动切换时间间隔[代码][代码]    [代码][代码]duration: 500,[代码][代码]    [代码][代码]//滑动动画时长[代码][代码]    [代码][代码]color: [代码][代码]'#ffffff'[代码][代码],[代码][代码]    [代码][代码]//当前选中的指示点颜色[代码][代码]    [代码][代码]height: [代码][代码]''[代码][代码]    [代码][代码]//swiper高度[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]goheight: [代码][代码]function[代码] [代码](e) {[代码][代码]    [代码][代码]var[代码] [代码]width = wx.getSystemInfoSync().windowWidth[代码][代码]    [代码][代码]//获取可使用窗口宽度[代码][代码]    [代码][代码]var[代码] [代码]imgheight = e.detail.height[代码][代码]    [代码][代码]//获取图片实际高度[代码][代码]    [代码][代码]var[代码] [代码]imgwidth = e.detail.width[代码][代码]    [代码][代码]//获取图片实际宽度[代码][代码]    [代码][代码]var[代码] [代码]height = width * imgheight / imgwidth + [代码][代码]"px"[代码][代码]    [代码][代码]//计算等比swiper高度[代码][代码]    [代码][代码]this[代码][代码].setData({[代码][代码]      [代码][代码]height: height[代码][代码]    [代码][代码]})[代码][代码]  [代码][代码]}[代码][代码]})[代码]