微信小程式swiper高度自適應，swiper的子元素高度不固定

清風白水發表於2018-08-09
微信小程式

小程式 swiper 元件預設高度150px，並且如果子元素過高，swiper不會自適應高度

解決方案一： （總體來說不夠完美，適合滿屏滑動）

如果不是滿屏的狀態，用scroll-view IOS滑動相容性不好，在IOS會有無法滑動的情況

<swiper class="content"
 style="height:{{height}}px"
 bindchange="change"
 current-item-id="{{docid}}"
 duration="100"
 >  
  <swiper-item data-key="{{item.id}}"
  wx:for="{{title}}"
  wx:key="index"
   item-id="{{item.id}}"
 >
    <scroll-view 
    data-id="{{item.id}}"
    style='height:100%;' 
    scroll-y 
    bindscrolltolower="scrolltolower" 
    data-left="51"
    scroll-top="{{top}}"
    bindscroll="scroll"
    >
      <!--單條新聞start  -->
      <navigator url="/pages/detail/detail?id={{item.docid}}" class="item" wx:for="{{item.id==docid?news:''}}" wx:key="index">
		
      </navigator>
      <!--單條新聞end  -->
       <view class='loading'>載入中...</view> 
    </scroll-view>
  </swiper-item>
</swiper>
複製程式碼

適應場景：

微信小程式swiper高度自適應，swiper的子元素高度不固定

適合這種滿屏滑動的，巢狀 **scroll-view **

注意： 需要有條件，寫固定的高，縱向滑動scroll-y

​ 橫向滑動 scroll-x white-space:nowrap;

解決方案二： （適應子元素高度也不一致）

微信小程式swiper高度自適應，swiper的子元素高度不固定

然後在上滑過程中，導航欄還需要吸頂，然後滑動下方tab欄的內容

其實如果不是基於小程式，我們可以很直接用swiper外掛，操作起來簡直方便，小程式由於 swiper 高的限制，真是走了不少彎路，如果下面的列表高度一樣，我們便可以算出一個的高度，然後乘以個數即可，但是這樣只能求出每一個個數

  • index .wxml
<swiper current="{{current}}" bindchange="change" duration="300" style="height:{{swiper_height + 80}}px;min-height:50%vh;">
    <swiper-item class="swiper-item" wx:for="{{channel_list}}" wx:key="{{item.id}}">
        <!-- navigator 的類名很重要，雖然一個迴圈用統一樣式，但是我們基於不同的tab 取了不用的類名  ，因為小程式無法操作DOM元素，雖然封裝的API 可以獲取，但是隻能獲取第一個和所有，我們每個tab的內容個數不一樣，所以需要基於每個tab欄求，item.channelId  是圖2標註吸頂效果的channelId, -->
        <navigator class="column-list column-list{{item.channelId}}" url="" wx:for="{{item.viewLessonList}}" wx:for-item="lesson" wx:key="{{index}}" wx:key-item="lesson-item">
            這裡面便是一個一個不同高度的列表
        </navigator>
        <!-- 這下面就是weui的一個載入樣式，基於分頁載入做的不同樣式 -->
        <view class="weui-loadmore" hidden="{{is_loadmore}}">
            <view class="weui-loading"></view>
            <view class="weui-loadmore__tips">正在載入</view>
        </view>
        <view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
            <text class="weui-loadmore__tips">左右滑動，檢視更多</text>
        </view>
    </swiper-item>
</swiper>
複製程式碼

微信小程式swiper高度自適應，swiper的子元素高度不固定

  • index.js
// 獲取wxml的節點資訊
function get_wxml(className, callback) {
    wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec()
} 
onReady: function() {
    let column_all = that.data.column_list[that.data.current].viewLessonList, // 這個是基於java端返回的tab欄的介面，大致樣式如上圖，也就是每個列表，
        channel_id = that.data.column_list[that.data.current].channelId // 我們這個就是求出目前的channelId，好區分不同的類名

    that.setData({
        swiper_length: column_all.length // 算出當前tab欄有多少個列表
    })
    get_wxml(`.column-list${channel_id}`, (rects) => {
        let sum_heigth = 0
	
        for (let i = 0; i < that.data.swiper_length; i++) {
            sum_heigth += rects[i].height
        }
        that.setData({
            swiper_height: sum_heigth
        })
        // 就是迴圈相加每個列表的高度，然後賦值給swiper_height,便可以求出當前tab欄的高度，賦值給swiper 便可以swiper高度自適應
    })
}
複製程式碼

相關文章