【uniapp】轮播图图片适配

需求：轮播图需要根据图片的大小进行适配，下面的文字跟随轮播图大小进行适配移动

逻辑：

①在swiper里的图片加载完成的时候，@load方法去获取图片的宽高，又因为图片的宽高需要适配手机的屏幕，所以需要用uni.getSystemInfoSync()获取可使用窗口的宽度，根据比例计算出图片的高度和swiper的高度
②又因为@load方法无法精准识别下载的图片的顺序，所以第一张图片的适配会出现问题，这个时候，就由后端去识别判断数组里面第一张图片的宽高，再传给前端，然后再进行赋值适配
③@load方法中，将处理过的高度还有对应的index push进一个全新的数组当中，根据数组中的index和对应的index高度去调节swiper的高度

 <swiper class="swiper":indicator-dots="indicatorDots" :current='current':interval="interval" :style="{height:swiperHeight}"@change='changeImg'><swiper-item v-for="(item,index) in itemData.data" :key="index" @click="gotoPages(item)" ><image :src="item.imgUrl" :data-index='index' mode="widthFix" @click="previewImage(index)" @load='handleImg' lazy-load='true' :style="{height:imgList[current]}"></image></swiper-item></swiper>

 data(){return{indicatorDots: true,autoplay: false,duration: 500,interval: 2000,indicatorActiveColor:'#ffffff',customBarH:'',swiperHeight:'',imgList:[] /*图片的高度列表*/,current:0}},props:['itemData','height'],mounted(){this.showImg()},methods:{/*跳转页面*/gotoPages(e){this.gotoPage(e.linkUrl);},showImg(){this.$nextTick(()=>{this.imgList[0]=this.itemData.heightthis.swiperHeight=this.imgList[0]})},handleImg(e){let winWid = uni.getSystemInfoSync().windowWidth;              let imgh = e.detail.height;　　　　　　　　　　　　　　　　let imgw = e.detail.width;let index=e.currentTarget.dataset.indexlet swiperH = winWid * imgh / imgw +'px'this.imgList[index]=swiperH// this.swiperHeight=swiperH},changeImg(e){this.current=e.detail.currentthis.swiperHeight=this.imgList[this.current]},}

【uniapp】轮播图图片适配相关推荐

JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正  <text>pages/swiper/swiper.wxml< ...
uni-app 轮播图视频+图片视频图片全屏预览两种方法
项目场景: 在做商城项目的时候,商品详情的轮播图需要同时显示视频和图片,并且能够全局预览解决方案: 如果项目里有uview这个组件库,可以通过swiper轮播图的指定类型进行解决,点击这里进行跳转 ...
uniapp——轮播图（官方）、卡片轮播图
一.轮播图(官方) 代码: <template><view class="content"><!-- <cu-custom bgColor=&q ...
小程序轮播图高度适配
小程序轮播图适配在开发小程序轮播图时,我遇到一下问题:小程序轮播图的导航栏总是不能放在正确的位置上,思考再三,我发现问题的原因是:当我们设置image的mode="widthFix&quo ...
uniapp轮播图（swiper）
属性名类型默认值说明平台差异说明 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(0, 0, 0, .3) ...
【Web前端】【疑难杂症】轮播图图片自适应显示问题（bootstrap3轮播图）
关键代码 html <div id="header" class="carousel slide"><! ...
Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...

【uniapp】轮播图图片适配

【uniapp】轮播图图片适配相关推荐

最新文章

热门文章