uni-app自定义幻灯组件swiper自适应高度
用Uni-app做的swiper幻灯片组件，图片在APP端正常情况下无法自适应高度。
手动写高度也非常鸡肋。
那么如何让它自适应高度呢？
现提供一个简单自定义幻灯模板组件
<template>
<view>
<swiper class="swiper flex flex-center" :style="{'height':Dheight+'px'}"
:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item,index) in slidelist" :key="index">
<view class="swiper-item flex flex-center">
<image class="swiperimg text-center" :style="{'width':imgwidth}" @load="setHeight" :mode="imgmode" @click="onClick(item)" lazy-load="true" :src="item.src"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
Dheight:100,
Dindex:0
}
},
props: {
indicatorDots: {
type: [Boolean],
default: true
},
autoplay: {
type: [Boolean],
default: true
},
interval: {
type: [Number],
default: 2000
},
duration: {
type: [Number],
default: 500
},
imgwidth: {
type: String,
default: '100%'
},
imgmode:{
type:[String],
default:'widthFix'
},
slidelist:{
type:Array,
value:[]
}
},
computed: {
},
methods: {
onClick(item) {
this.$emit('click',item)
},
setHeight(){
var that=this;
const query = uni.createSelectorQuery().in(that);
query.select('.swiperimg').boundingClientRect(data => {
if(JSON.stringify(data)){
that.Dheight=data.height;
}
}).exec(function(res){});
}
}
}
</script>
/*
uni-swiper .uni-swiper-dots-horizontal 指示器主题
uni-swiper .uni-swiper-dot-active 选中状态
uni-swiper .uni-swiper-dot 未选中状态
*/
<style>
</style>
引用：
<slides :slidelist="hdlist" @click="sildeclick"></slides>
import slides from '../../components/slide/slide.vue'
export default {
components: {
faicons,
slides
},
data() {
return {
hdlist:[
{id:1,src:'../../static/index/i_1.jpg'},
{id:2,src:'../../static/index/i_1.jpg'}
]
}
},
onLoad() {
var that=this;
console.log(this.$comjs.weburl)
},
onReady(){
},
methods: {
sildeclick(data){
console.log('标题：' + JSON.stringify(data))
}
}
}
原理很简单，当图片@load后，重置swiper高度即可。
下面提供一个APK源码，喜欢看小说的朋友们也可以学习一下：
用uniapp做的一个免费搜小说的app，仅支持安卓，如不能下载可在此留言。
扫码在手机浏览器里下载，微信里无法下载哦，非自带浏览器点击：普通下载。即可。
如下载到电脑上，用zip压缩包解压，即可看到源代码。