微信小程序+网页--证件照换底色前端页面实现修改总结

基本的ui设计是由另一个同学进行，我负责帮忙进行小部分UI的修改，部分页面实现以及解决排版和页面实现时出现的问题。

微信小程序

首页界面

swiper

swiper中的部分属性如下图，根据自己所需要的属性进行添加和选择

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}

下图中的swiper组件加入显示面板指示点的属性，设置了自动切换并且设置了滑动动画时长。
swiper中可包含多个swiper-item，可用多次添加的方法或者使用wx:for循环来添加swiper-item，每个swiper-item代表一个滑动界面，包含一张图片。

<swiper indicator-dots="true" autoplay="true" duration="1000"
style='height:{
  {imgheights[current]}}rpx;width:100%'bindchange="bindchange">

========================
实现了图片按照不同手机比例进行缩放，以呈现完整的图片效果。
设置swiper和swiper-item的width为100%，保证能够横向铺满屏幕。
如何高度自适应？↓
swiper-item中图片加载成功时触发时imageLoad函数，对当前图片所需呈现的高度进行计算，并计入数组以便调用，具体计算过程如下：
获取图片的真实高度
计算长宽比
图片在swiper中展示的默认高度为750rpx，根据该默认高度/长宽比，得到当前手机呈现完整效果所需要的图片高度
将当前图片高度加入数组，以便后续调用
wxml中获取计算出的图片高度，以显示图片

imageLoad: function (e) {
   
    //获取图片真实宽度
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //宽高比
      ratio = imgwidth / imgheight;
    console.log(imgwidth, imgheight)
    //计算的高度值
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight
    var imgheights = this.data.imgheights
    //把每一张图片的高度记录到数组里
    imgheights.push(imgheight)
    this