微信小程序之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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
javascript操作表格排序实例分析
May 06 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
webpack4.0 入门实践教程
Oct 08 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
react实现同页面三级跳转路由布局
Sep 26 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
javascript面向对象编程代码
2011/12/19 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Python模拟用户登录验证
2017/09/11 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python挖矿算力测试程序详解
2019/07/03 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
中文系师范生自荐信
2013/10/01 职场文书
销售文员岗位职责
2013/11/29 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
退休感言
2014/01/28 职场文书
中文专业求职信
2014/06/20 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
初中学生操行评语
2014/12/26 职场文书
公司慰问信范文
2015/03/23 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书