swiper高度自适应_小程序 swiper 图片高度自适应+预览图片

一、概述：

在开发小程序的项目中，经常会用到swiper这个轮播组件，但是使用的时候会有一个问题，swiper系统会默认一个高度而且是px为单位的，如下:

swiper {

display:block;

height:150px;

}

这些参数可以用其它样式覆盖，但是图片不可能固定高度。image的高度是无法用px固定单位，一般是宽固定 rpx，mode="widthFix" 高度自适应。下面就开始介绍如何用图片在swiper自适应高度，而不会被遮住。

实际效果图如下：

二、实现过程：

1、小程序布局页面wxml

2、小程序 js页面

Page({

/**

* 页面的初始数据

*/

data: {

currentNavtab: 0,//当前第几个swiper

bannerlist: ["http://i2.letvimg.com/lc10_yunzhuanma/201709/25/17/59/5820beca6a5f2d8ad7ebcc9754bbf536_v2_MTMyNjA4NDE2/thumb/2_640_480.jpg", "http://i1.letvimg.com/lc09_yunzhuanma/201711/23/13/13/240be0b0ec63013fd97f1062b16b6043_v2_MTMzMjI3NDUy/thumb/2_640_480.jpg", "http://i1.letvimg.com/lc10_yunzhu