微信小程序swiper高度自适应方法

小程序swiper高度自适应

 data: {//图片hdimg: [],//是否采用衔接滑动circular: true,//是否显示画板指示点indicatorDots: false,//选中点的颜色indicatorcolor: "#000",//是否竖直vertical: false,//是否自动切换autoplay: false,//滑动动画时长毫秒duration: 100,//所有图片的高度imgheights: [],//图片宽度imgwidth: 750,//默认current:0},

imageLoad: function (e) {//获取图片真实宽度var imgwidth = e.detail.width,imgheight = e.detail.height,//宽高比ratio = imgwidth / imgheight;console.log(imgwidth, imgheight)//计算的高度值var viewHeight = 750 / ratio;var imgheight = viewHeightvar imgheights = this.data.imgheights//把每一张图片的高度记录到数组里imgheights.push(imgheight)this.setData({imgheights: imgheights,})},bindchange: function (e) {console.log(e.detail.current)this.setData({ current: e.detail.current})}

<view><swiper class="swiper" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" bindchange="bindchange"  circular="{{circular}}" style="height:{{imgheights[current]}}rpx;"><block wx:for="{{hdimg}}" wx:key="{{index}}"><swiper-item ><image src="{{item}}" mode="aspectFit" bindload="imageLoad"       class=".itemimage" style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"/></swiper-item></block></swiper>
</view>

.swiper {width: 100%;
}

微信小程序swiper高度自适应方法相关推荐

swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
微信小程序swiper图片尺寸_微信小程序 - swiper 高度自适应
我这边开发用的是 wepy,代码风格跟小程序原生的不太一样,下面代码是依照小程序的代码风格整理之后的,可能有不同或遗漏的地方,但这都不重要,注意领会精神! 原理: 获取设备宽度获取 swiper 内 ...
解决微信小程序scroll-view高度自适应问题的方法
第一种情况,scroll-view占据整屏 html scroll-view {height: 100vh;} 第二种情况,scroll-view自适应页面剩余高度 wxml <view cla ...
小程序swiper高度自适应
方法学习来自:https://blog.csdn.net/qq_31604363/article/details/73715944 1.wxml部分 <block wx:for="{{ ...
微信小程序图片高度自适应问题
//加上mode="widthFix"即可 <image src="../../images/de1.png" mode="widthFix&q ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
小程序setdata优化_微信小程序 setData的使用方法详解
微信小程序 setData的使用方法详解微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...
小程序图片高度自适应等问题
小程序图片高度自适应这里踩了很多遍的坑,花了很多时间,以为像以前以前给他上级的盒子不给高度就行了,oh,no,这是一个坑,关键在于image标签的一个属性:mode="widthFix&q ...

微信小程序swiper高度自适应方法

微信小程序swiper高度自适应方法相关推荐

最新文章

热门文章