微信小程序之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 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
javascript中数组方法汇总
Jul 07 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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实现小型站点广告管理(修正版)
2006/10/09 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php获取错误信息的方法
2015/07/17 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
什么是数组名
2012/05/10 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
重阳节标语大全
2014/10/07 职场文书
刘胡兰观后感
2015/06/16 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
python中的sys模块和os模块
2022/03/20 Python
Python中re模块的元字符使用小结
2022/04/07 Python
如何Python使用re模块实现okenizer
2022/04/30 Python