前两天写商品详情页功能时,遇到这个问题,在最上面的swiper轮播图设置固定高度,没有问题,下面遇到图文详情,规格参数等需要用到swiper时不能完全展示数据,只能显示swiper默认高度的数据,因为是动态加载数据,所以也不能将高度写死。于是想到了动态计算高度的方法。
展示我要做的页面:
下面展示代码:
<scroll-view class="detail" scroll-y bindscroll="onScrollChane" scroll-top="{{topNum}}">
<!-- 轮播图 -->
...
<!-- 介绍 -->
...
<!-- 评价 -->
...
<!-- 详情专区 -->
<view class="LocationTitle" id="detailImgs" />
<w-tab-control titles="{{detailTitles}}" bind:tabclick="tabClick" />
<swiper style="height:{{swiperItemH}}px" current="{{detailTab}}">
<!-- 商品介绍 -->
<swiper-item>
<block wx:for="{{detailImgsList}}" wx:key="index">
<image class="detailPicter" wx:if='{{item}}' src="{{item}}" bindload="onImageLoad" mode="widthFix" />
</block>
</swiper-item>
<!-- 规格参数 -->
<swiper-item>
<w-spe-param id="w-spe-param" speParam="{{speParam}}" />
</swiper-item>
<!-- 商品咨询 -->
<swiper-item>
<w-consult id="w-consult" consultData="{{consultData}}" haveData="{{consultData.length>0?true:false}}" />
</swiper-item>
</swiper>
<!-- 分享按钮 -->
...
<!-- 头部标题 -->
...
</scroll-view>
<!-- 底部按钮 -->
...
主要计算高度js代码
//加载完图片,将图片同比例缩放后计算高度
onImageLoad(e) { //计算图文详情高度
let winWid = wx.getSystemInfoSync().windowWidth;
let imgW = e.detail.width;
let imgH = e.detail.height;
let swiperHight = winWid * imgH / imgW;
let oldH = this.data.swiperH;
this.setData({
swiperH: oldH + swiperHight,
swiperItemH: oldH + swiperHight
})
},
tabClick(e) { //切换图文详情tab事件
var itemH = 0;
//创建节点选择器,获取此view的高度
var query = wx.createSelectorQuery();
var that = this;
switch (e.detail.index) {
case 0://图文详情高度
itemH = that.data.swiperH;
that.setData({
swiperItemH: itemH
})
break;
case 1://规格参数高度
query.select('#w-spe-param').boundingClientRect()
query.exec(function(res) {
itemH = res[0].height;
that.setData({
swiperItemH: itemH
})
})
break;
case 2://商品咨询高度
query.select('#w-consult').boundingClientRect()
query.exec(function(res) {
itemH = res[0].height;
that.setData({
swiperItemH: itemH
})
})
break;
}
this.setData({
detailTab: e.detail.index
})
},
因为我也是新手学习,可能办法不是很好,欢迎各路高手指教。
网友评论