网页前端设计

一、概述：

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

swiper {
    display:block;
    height:150px;
}

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

实际效果图如下：

二、实现过程：

1、小程序布局页面wxml

<view class="container">
  <swiper bindchange="swiperChange"  indicator-dots="{{indicatorDots}}" indicator-active-color="#ff0000" indicator-color="#fff" autoplay="{{autoplay}}"  current="{{swiperCurrent}}" interval="{{interval}}" duration="{{duration}}" style='height:{{imgheights[currentNavtab]}}px'>
    <block wx:for="{{bannerlist}}" wx:key="id">
      <swiper-item>
        <image src="{{item}}" data-src="{{item}}" bindload="imageLoad" style="height:{{imgheights[index]}}px;width:100%;" bindtap="previewImage" />
      </swiper-item>
    </block>
  </swiper>
</view>

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_yunzhuanma/201711/23/14/02/c3faf8192281dd307c74957259cf6de3_v2_MTMzMjI3OTEw/thumb/2_640_480.jpg"],//图片切换数组
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 500,
    scrollWidth: 0,
    imgheights: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx.getSystemInfo({
      success: function (res) {
      	//获取屏幕的宽度并保存
        that.setData({
          scrollWidth: res.windowWidth
        });
      }
    });
  },
  /*** 预览图片****/
  previewImage: function (e) {
    var current = e.currentTarget.dataset.src;
    wx.previewImage({
      current: current,// 当前显示图片的http链接 
      urls: this.data.bannerlist // 需要预览的图片http链接列表  
    })
  },
  //等比缩放图片并保存
  imageLoad: function (e) {
    //获取图片真实宽度  
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比  
      ratio = imgwidth / imgheight;
    //console.log(imgwidth, imgheight);
    //计算的高度值  
	
    var viewHeight = parseInt(this.data.scrollWidth) / ratio;
    var imgheight = viewHeight.toFixed(0);
    var imgheightarray = this.data.imgheights;
    //把每一张图片的高度记录到数组里
    imgheightarray.push(imgheight);

    this.setData({
      imgheights: imgheightarray,
    });
  },  
  swiperChange: function (e) {
    //console.log(e.detail.current);    
    this.setData({
      currentNavtab: e.detail.current
    })
  }
})

三、结语：

小程序使用起来还是比较麻烦需要去获取图片的真实高度，然后等比缩放，在swiperChange的时候去动态改变高度。

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)