小程序踩坑记2md—图片轮播高度自适应组件

2018-09-12 本文已影响178人玲儿珑

需求背景：

实现图片轮播功能且高度要自适应。

技术实现思路：

使用小程序自带组件swiper。

关键点：

就是要计算出当前图片的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。

难点：

高度自适应失效

描述：切换页面返回由onhide—>onshow时，出现所有的高度
会保持在最后计算出的那个值，导致高度自适应效果失效。
原因：是由于此时imageLoad不再监听。
解决办法：watch图片列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。

前后台切换初始高度不符

描述：切换到后台再返回到前台时，初始高度会保持出现在第一张图片的高度，若切换时非第一张图片，就会导致给当前图片高度不正确，被遮挡或者有大片空白。
原因：给swiper赋值的是图片列表里第一张的高度。
解决办法：后台切回前台时，appdata是保持不变的，而当前图片排位已被保存变量，所以取当前图片的高度赋值给swiper高度。

同页面切换初始高度不符

描述：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前图片高度不符。
原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前图片变量取值了最后出现的那个页面的当前图片。
解决办法：每切换到一个页面时，在图片组件里，缓存以页面数:当前图片为键值的currents对象。返回到某个页面时，通过当前页面数取得当前图片，从而获得当前初始高度。

PS：

在设计和解决这些难点时，均遵循着组件的高内聚、低耦合原则，使得更具复用性、稳定性、无依赖。

具体实现：

模版template：

<template>
  <view class="com_imagesSwiper">
    <swiper class="com_img_auto_swiper" indicator-dots="true" autoplay="{{false}}" circular="true" bindchange="bindchange" style="height:{{swiperHeight}}px;">
      <block wx:for="{{imgUrls}}" wx:key="{{index}}">
        <swiper-item>
          <image src="{{item}}" class="com_swiper_image" mode="widthFix" data-id='{{index}}' bindload="imageLoad"/>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>

脚本script：

<script>
import wepy from 'wepy'
export default class ImgSwiper extends wepy.component{
  props = {
    imgUrls: Array
  }
  data = {
    // imgUrls : [
    //   // '/m/static/img/weixin/act_hongbao.png'
    // ],
    imgheights: [], //所有图片的高度  （必须）
    imgwidth: 750,  //图片宽度 兼容
    current: 0, //默认  （必须）
    swiperHeight: 150,
    currentPage: 1
  };
  watch = {
    imgUrls(newValue, oldValue) {
      if (newValue) {
        for (let i = 0; i < newValue.length; i++) {
          newValue[i] = newValue[i] + '?' + new Date().getTime()
        }
      }
    }, 
    currentPage(newValue, oldValue) {
      this.current = JSON.parse(wepy.getStorageSync('currents'))[this.getCurrentPages().length] - 0
      this.$apply()
    },
    current(newValue, oldValue) {
      let key = this.getCurrentPages().length+''
      let obj = JSON.parse(wepy.getStorageSync('currents'))
      obj[key] = this.current
      wepy.setStorageSync('currents', JSON.stringify(obj))
    }
  };
  methods = {
    imageLoad: function (e) {//获取图片真实宽度  
      this.currentPage = this.getCurrentPages().length
      let imgwidth = e.detail.width,
          imgheight = e.detail.height,
          ratio = imgwidth / imgheight;
      let viewHeight = this.imgwidth / ratio;
      this.imgheights[e.target.dataset.id] = viewHeight;
      this.swiperHeight = this.imgheights[this.current]
      this.$apply()
    },
    bindchange: function (e) {
      this.current = e.detail.current
      this.swiperHeight = this.imgheights[e.detail.current]
      this.$apply()
    }
  }
  onLoad() {
    this.imgwidth = wx.getSystemInfoSync().screenWidth
    this.$apply()
    if (!wepy.getStorageSync('currents')) {
      wepy.setStorageSync('currents', JSON.stringify({1 : 0}))
    } else {
      let obj = JSON.parse(wepy.getStorageSync('currents'))
      obj[this.getCurrentPages().length] = 0
      wepy.setStorageSync('currents', JSON.stringify(obj))
    }
  }
}
</script>

样式style：

<style lang="less">
//高度自适应图片轮播组件
.com_imagesSwiper { 
  .com_img_auto_swiper { 
    transition: height 0.5s ease;
    .com_swiper_image {
      width: 100%;
      height: 100%;
    }
    .wx-swiper-dot {
      width: 20rpx;
      display: inline-flex;
      height: 2rpx;
      justify-content: space-between;
    }
    .wx-swiper-dot::before {
      content: '';
      flex-grow: 1;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 8rpx
    }
    .wx-swiper-dot-active::before {
      background: rgba(255, 255, 255, 1);
    }
  }
}
</style>

Notes:

很多时候开始发现是未解的，待解决之后发现原来并没什么，😄，希望我们在发现问题解决问题的路上结伴而行孜孜不倦～有写的不到之处望能不吝赐教，欢迎随时交流，共勉～ 😊