微信小程序之swiper轮播图中的图片自适应高度的方法


Posted in Javascript onApril 23, 2018

小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏。辣么,怎样让图片自适应不同分辨率捏。

我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度。

1.结构

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>
   <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>  //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦,还有就是设置这个image 100%宽度哟
    </swiper-item>
   </block>
</swiper>

swiper的各个属性在官方文档中都有,这里就不说明了。最主要的是: style='height:{{Height}}' //动态设置swiper的高度

2.在page里面:

data: {
  imgUrls: [          
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png',
    '../img/goodsDetail/goods.png'
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 5000,
  duration: 1300,
  bg: '#C79C77',
  Height:""     //这是swiper要动态设置的高度属性
 },
imgHeight:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
  var imgh=e.detail.height;//图片高度
  var imgw=e.detail.width;//图片宽度
  var swiperH=winWid*imgh/imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
  this.setData({
    Height:swiperH//设置高度
  })
},

总结:获取当前屏幕宽度: wx.getSystemInfoSync().windowWidth

在小程序里动态设置属性,只有通过setData({ })来设置,和js中直接操作css样式有一点类似

注意:image如果外层有个容器装,然后image设置width为100%之后,距离装它的容器底部有一点距离,那是因为image是默认设置的display:inline-block属性,这个属性会产生间隙。如果要撑满容器,设置为display:block就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
React简单介绍
May 24 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
vue.js中实现登录控制的方法示例
Apr 23 #Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 #Javascript
Vue前端开发规范整理(推荐)
Apr 23 #Javascript
Vue 中mixin 的用法详解
Apr 23 #Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 #Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 #Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 #Javascript
You might like
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
详解参数传递四种形式
2015/07/21 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
js实现右键菜单功能
2016/11/28 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
高中毕业自我鉴定
2013/12/19 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
事业单位辞职信范文
2014/01/19 职场文书
旷课检讨书大全
2014/01/21 职场文书
社团招新策划书
2014/02/04 职场文书
初中生自我鉴定
2014/02/04 职场文书
出纳员岗位职责
2014/03/13 职场文书
经销商年会策划方案
2014/05/29 职场文书
主题团日活动总结
2014/06/25 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
幼师求职自荐信
2015/03/26 职场文书
考勤制度通知
2015/04/25 职场文书
党支部考察意见范文
2015/06/02 职场文书
五年级作文之想象作文
2019/10/30 职场文书