需求背景：
實(shí)現(xiàn)圖片輪播功能且高度要自適應(yīng)。
技術(shù)實(shí)現(xiàn)思路：
使用小程序自帶組件swiper。
關(guān)鍵點(diǎn)：
就是要計(jì)算出當(dāng)前圖片的高度并賦值給swiper高度。需要計(jì)算是由于swiper必須指定高度不能像div一樣自動(dòng)撐開。
難點(diǎn)：
- 高度自適應(yīng)失效
- 描述：切換頁面返回 由
onhide—>onshow時(shí)，出現(xiàn)所有的高度
會(huì)保持在最后計(jì)算出的那個(gè)值，導(dǎo)致高度自適應(yīng)效果失效。 - 原因：是由于此時(shí)
imageLoad不再監(jiān)聽。 - 解決辦法：
watch圖片列表，給url加參數(shù)（時(shí)間戳），使其每次都重新加載，使imageLoad監(jiān)聽。
- 前后臺(tái)切換初始高度不符
- 描述：切換到后臺(tái)再返回到前臺(tái)時(shí)，初始高度會(huì)保持出現(xiàn)在第一張圖片的高度，若切換時(shí)非第一張圖片，就會(huì)導(dǎo)致給當(dāng)前圖片高度不正確，被遮擋或者有大片空白。
- 原因：給
swiper賦值的是 圖片列表里第一張的高度。 - 解決辦法：后臺(tái)切回前臺(tái)時(shí)，
appdata是保持不變的，而當(dāng)前圖片排位已被保存變量，所以取當(dāng)前圖片的高度賦值給swiper高度。
- 同頁面切換初始高度不符
- 描述：此組件所在頁面，下面有跳轉(zhuǎn)到當(dāng)前頁的業(yè)務(wù)需要，只是渲染數(shù)據(jù)不同。當(dāng)返回前一個(gè)頁面時(shí)，初始高度還保留著返回前最后一次的高度，與當(dāng)前頁當(dāng)前圖片高度不符。
- 原因：同頁面切換時(shí)，
appdata沒有重新賦值的話就不會(huì)變化，最后當(dāng)前圖片變量取值了最后出現(xiàn)的那個(gè)頁面的當(dāng)前圖片。 - 解決辦法：每切換到一個(gè)頁面時(shí)，在圖片組件里，緩存以頁面數(shù):當(dāng)前圖片為鍵值的
currents對(duì)象。返回到某個(gè)頁面時(shí)，通過當(dāng)前頁面數(shù)取得當(dāng)前圖片，從而獲得當(dāng)前初始高度。
PS：
在設(shè)計(jì)和解決這些難點(diǎn)時(shí)，均遵循著組件的高內(nèi)聚、低耦合原則，使得更具復(fù)用性、穩(wěn)定性、無依賴。
具體實(shí)現(xiàn)：
模版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, //默認(rèn) （必須）
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) {//獲取圖片真實(shí)寬度
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">
//高度自適應(yīng)圖片輪播組件
.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:
很多時(shí)候開始發(fā)現(xiàn)是未解的，待解決之后發(fā)現(xiàn)原來并沒什么，??，希望我們在發(fā)現(xiàn)問題解決問題的路上結(jié)伴而行孜孜不倦～ 有寫的不到之處望能不吝賜教，歡迎隨時(shí)交流，共勉～ ??
