深圳网站建设 工作室,长春seo公司,无锡有名的设计公司,域名注册商怎么查起因#xff1a;uniapp中swiper组件swiper 标签存在默认高度是 height: 150px #xff1b;高度无法实现由内容撑开#xff0c;在默认情况下#xff0c;swiper盒子高度显示总是 150px 解决办法思路#xff1a; 动态设置swiper盒子的高度#xff0c;故需要获取swiper-item盒…起因uniapp中swiper组件swiper 标签存在默认高度是 height: 150px 高度无法实现由内容撑开在默认情况下swiper盒子高度显示总是 150px 解决办法思路 动态设置swiper盒子的高度故需要获取swiper-item盒子中内容的高度然后动态的将此盒子的高度赋值给swiper盒子的高度
方法
template中的内容
view classtabBoxview classtabScrollscroll-view classscroll-view_H scroll-xtrue scrollscrollview classscroll-view-item_H v-for(tab,index) in tabBars :keytab.id :idtab.id:classnavIndexindex ? activite : clickcheckIndex(index){{tab.cat_name}}/view/scroll-view/view!-- 切换区域 :style{ height: swiperHeight px } 此是动态设置swiper的代码 --swiper :style{ height: swiperHeight px } :indicator-dotsfalse :autoplayfalse classswiper :currentnavIndex refswiper changetabChangeblock v-for(item,index) in tabBars :keyindexswiper-itemscroll-view scroll-xtrue classswiper-scroll !-- view classswiper-item{{itemA.name}}/view --view classswiper-item swiperAAAAA view classboxTab v-for(itemA,indexA) in item.son_list :keyindexA clickgoToSort(itemA.cat_name, itemA.cat_fid, itemA.cat_id, 0)!-- 图片盒子 --view classtabImgimage :srcitemA.image alt/image/view!-- 文字 --view classtabText{{itemA.cat_name}}/view/view/view/scroll-view/swiper-item/block/swiper/viewdata中的数据
script
export default{data(){return{navIndex: 0,// tab切换区域的高度swiperHeight:0,// tab切换数组tabBars:[{cat_name:服装,id:1,son_list:[{image:./static/search.png,cat_name:内衣},{image:./static/search.png,cat_name:内裤},{image:./static/search.png,cat_name:袜子},{image:./static/search.png,cat_name:大一},{image:./static/search.png,cat_name:居家服},{image:./static/search.png,cat_name:衬衫},{image:./static/search.png,cat_name:外套},{image:./static/search.png,cat_name:全部分类},]},{cat_name:饮食,id:2,son_list:[{image:./static/search.png,cat_name:内衣},{image:./static/search.png,cat_name:内裤},{image:./static/search.png,cat_name:袜子},{image:./static/search.png,cat_name:大一},]},{cat_name:家电,id:3},{cat_name:居家,id:4},{cat_name:洗护,id:5},{cat_name:婴童,id:6},{cat_name:餐厨,id:7},{cat_name:餐厨1,id:8},{cat_name:餐厨2,id:9},{cat_name:餐厨3,id:10},],}}
}
/scriptthis.$nextTick(() {// tab切换中swiper高度自适应内容高度uni.createSelectorQuery().select(此次为想获取的元素的id名#xxx或者类名(.xxx)).boundingClientRect(rect{console.log(打印该盒子的元素,rect.height);// console.log(打印swiperHeight的数值,this.swiperHeight);}).exec()});以上代码则为获取元素内容高度的方法(直接拿下用即可) 最后结果
此时swiper的高度已经被重新更改为102px (此数值为动态可变数值取决于内容高度)
到此为止则swiper高度自适应问题就解决了 目标不是都能达到的但它可以作为瞄准点。。
