小程序中使用swiper輪播圖時(shí)默認(rèn)高度為150px敞斋。

設(shè)置自定義高度時(shí)我們需要盒子的高度隨著內(nèi)容的增加而增加所以高度就不能寫死 我試了將外層的盒子高度設(shè)置為100%但是好像沒有生效 swiper會(huì)默認(rèn)將多余150px的內(nèi)容的截去掉渺尘。

所以寫了一個(gè)監(jiān)控內(nèi)容高度設(shè)置swiper盒子的高度的方法提供參考

<view class="tuijian_box pl30 pr30">
 <view class="tuijian_tit c-tuijian_tit">今日推薦</view>
 <swiper current="{{currentTab}}" duration="1000" bindchange="swiperTabView" bindchange="changeswiper"       style="height:{{height}}" >        
<swiper-item>
     <view class="list">
     <view class="fl c-tuijian_item" wx:if="{{recommendList}}" wx:for="{{recommendList}}" wx:key="{{index}}">               
             <image src="{{item.imgBase64}}"></image>
             <view class="shadow">1{{item.mnm}}</view>  </view>   
      <view style="clear: both;"></view>
 </view>      
  </swiper-item>      
  <swiper-item>
     <view class="list">
         <view class="fl c-tuijian_item" wx:if="{{recommendList}}" wx:for="{{recommendList}}" wx:key="{{index}}">               
             <image src="{{item.imgBase64}}"></image>
             <view class="shadow">2{{item.mnm}}</view>
         </view>   
     <view style="clear: both;"></view>
   </view>      
</swiper-item>   
 <swiper-item>
 <view class="list">
         <view class="fl c-tuijian_item" wx:if="{{recommendList}}" wx:for="{{recommendList}}" wx:key="{{index}}">                 
                <image src="{{item.imgBase64}}"></image>
                <view class="shadow">2{{item.mnm}}</view>
         </view>   
         <view style="clear: both;"></view>
 </view>        
</swiper-item>   
 </swiper>
 </view>

js的部分

Page({ 
    data:{
        currentTab: 0, //滑動(dòng)切換數(shù)據(jù) 
        height:'', //設(shè)置滑動(dòng)切換的swiper高度
        heights:[] 
    },
 onLoad: function () {
 var _this = this;
 setTimeout(function () {//異步 //設(shè)置滑動(dòng)切換今日推薦的高度
     var query = wx.createSelectorQuery();
     query.selectAll('.list').boundingClientRect()
     query.exec((res) => {
             var listHeight = res[0][0].height
             _this.setData({
                     heights: res[0],
                     height: listHeight + 'px'
                 })
             })
            }, 800)
 },
changeswiper:function(e){ //設(shè)置滑動(dòng)切換今日推薦的高度
   console.log(e.detail.current)
     var _this = this;
     setTimeout(function () {//異步
     var query = wx.createSelectorQuery();//模仿dom獲取組件的高度
     query.selectAll('.list').boundingClientRect()
     query.exec((res) => {
         var listHeight = res[0][e.detail.current].height
         console.log(res[0][e.detail.current].height)
         _this.setData({height: listHeight + 20 + 'px' })
         }) 
      }, 800)
 },
 //滑動(dòng)切換
 swiperTabView: function (e) {
         this.setData({
                 currentTab: e.detail.current
             });
 },