微信小程序swiper高度自适应方法
来源:互联网 发布:百家cms微商城v2.7 编辑:程序博客网 时间:2024/06/14 04:04
小程序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 = viewHeight var 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%;}
阅读全文
13 0
- 微信小程序swiper高度自适应方法
- 微信小程序幻灯的swiper标签宽和高度自适应
- 微信小程序swiper组件实现图片宽度自适应
- 微信小程序swiper组件实现图片宽度自适应
- swift 高度自适应方法
- UITableViewCell自适应高度方法
- 微信小程序 swiper 应用
- 微信小程序 swiper scroll-view height设置自适应 tab选项卡
- FF下高度自适应方法
- iframe 自适应高度问题解决方法
- FF下高度自适应方法
- DIV高度自适应方法汇总
- iframe自适应高度的方法
- iframe自适应高度方法小结
- DIV 高度自适应的方法
- iOS tableviewcell 高度自适应方法
- UILable 高度自适应方法汇总
- 微信小程序图片实现宽度100%,高度自适应
- Node.js + express + socket 实现在线实时多人聊天室
- log4j提供的日志级别
- .net发送邮件
- Prim 算法
- javaBean_EL
- 微信小程序swiper高度自适应方法
- 生产者与消费者模型
- Bootstrap学习笔记(二)
- 在windows上搭建redis集群(redis-cluster)
- 算法---动态规划
- LeetCode (Best Time to Buy and Sell Stock II)
- 42. OP-TEE中secure stroage------安全文件的创建
- AS install APk发生Error:Execution failed for task ':app:mergeDebugResources'. > Error: java.io.FileNo
- 尺取法练习3