微信小程序学习：（五）swiper塌陷问题解决

向右看齐 2021-11-13 21:52 801阅读 0赞

# 微信小程序学习：（五）swiper塌陷问题解决 #

## github地址： [https://github.com/leoricding/-][https_github.com_leoricding_-] ##

## (一)问题分析 ##

#### 需求：实现tab切换，内容切换；内容切换，tab也切换。 ####

#### 困难：实现的过程中，发现swiper-item无法撑开swiper ####

#### 原因分析：小程序中，swiper-item是脱离文档流的，而swiper是固定高度，所以会出现无法撑开的问题。 ####

### 解决方案：js动态计算swiper的高度。在swiper-item中填充srcoll-view，而srcoll-view是可以上下滚动的。所以，swiper高度=小程序可用高度-swiper意外其他元素的高度。 ###

![\[外链图片转存失败(img-KifX0pRV-1564622218322)(C:\\Users\\leoric\\Pictures\\计算swiper高度.PNG)\]][img-KifX0pRV-1564622218322_C_Users_leoric_Pictures_swiper_.PNG]

## （二）不罗嗦直接上代码 ##

<import src="/pages/template/teacher/teacher.wxml" />
    
    <view class="container">
      
      <view class="lession-img-container"><image class="lession-img" src="{ {listData[index].carousel}}"></image></view>
      
      
      <view class="tab-nav-container">
        <block wx:for="{ {tabNavName}}" wx:key="{ {index}}">
          <view class="tab-nav { {currentSelected==index?'selected':''}}" bindtap="selectTab" data-index="{ {index}}">
            <text>{
       {item}}</text>
          </view>
        </block>
      </view>
    
      
      <view class="tab-content-container">
        <swiper style="height: { { clientHeight?clientHeight+'px':'auto'}}" class="swiper" current="{ {currentSelected}}" bindchange="changeTab" >
          <swiper-item class="swiper-item">
            <scroll-view scroll-y="{ {true}}" style="height: { { clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">
              <view class="swiper-item-content-container">
                <view class="lession-name">
                    <text class="lession-name-text">{
       {listData[index].lessionName}}</text>
                    <view>
                      <text class="lession-name-detail">免费 订阅123 最近在学213 好评98%</text>
                    </view>
                </view>
                
                <view class="teacher-introduce">
                  <text>老师介绍</text>
                  <template is="teacher" data="{ {...listData[index]}}" />
                </view>
                
                <view class="lession-detail">
                  <text>课程介绍</text>
                  <view>
                    <text>{
       {listData[index].lessionDescription}}</text>
                  </view>
                  
                </view>
              </view>
            
            </scroll-view>
             <view class="lession-buy-container">
                <view class="lession-buy">
                  <text>￥{
       {listData[index].lessionPrice}}购买</text>
                </view>
              </view>
          </swiper-item>
          <swiper-item>
            <text>这是课程目录</text>
          </swiper-item>
          <swiper-item>
            <text>这是相关课程</text>
          </swiper-item>
        </swiper>
      </view>
    </view>

/* pages/lessionDetail/lessionDetail.wxss */
    /* 引入模板样式 */
    @import "/pages/template/teacher/teacher.wxss" .container{ 
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    /* 最上层课程图片 */
    .lession-img-container{ 
      height: 400rpx;
      width: 100%;
    }
    .lession-img{ 
      height: 400rpx;
      width: 100%;
    }
    
    /* tab切换 */
    .tab-nav-container{ 
      width:100%;
      height: 60rpx;
      
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .tab-nav{ 
      width: 33.3%;
      height: 100%;
      border-bottom: grey solid 1rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-content: center;
      line-height: 60rpx;
    
    }
    /* tab被选中时的样式 */
    .tab-nav-container .selected{ 
      color:cyan;
      border-bottom:cyan solid 2rpx;
    }
    /* 这是tab切换对应的内容容器 */
    .tab-content-container{ 
      width: 100%;
    }
    
    /* 单个滑块容器 */
    .swiper-item-content-container{ 
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    /* 课堂名称栏 */
    .lession-name{ 
      width: 100%;
      border-bottom: grey solid 1rpx;
      padding:20rpx;
      box-sizing: border-box;
    }
    .lession-name-text{ 
      font-size: 1.2rem;
    }
    .lession-name-detail{ 
      font-size: 0.6rem;
      color: grey;
    }
    /* 老师介绍栏 */
    .teacher-introduce{ 
      height: 100%;
      padding: 20rpx;
      border-bottom: grey solid 1rpx;
    }
    
    /* 课程介绍 */
    .lession-detail{ 
      padding: 20rpx;
      /* border-bottom: grey solid 1rpx; */
    }
    
    /* 底部购买课程 */
    .lession-buy-container{ 
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      border-top: grey solid 1rpx;
      background-color: white;
      z-index: 2;
    }
    .lession-buy{ 
      background-color: blue;
      line-height: 100%;
      font-size: 2rem;
    }

## （三）核心js代码 ##

// pages/lessionDetail/lessionDetail.js
    const app = getApp();
    Page({ 
    
      /** * 组件的初始数据 */
      data: { 
        listData:{ },
        index:null,
        tabNavName:['详情',"目录","相关课程"],
        currentSelected:0,
      },
    
      onLoad:function(option){ 
       
          
        // 解决swiper塌陷问题
        // 思路：swiper高度=通过可用屏幕高度-课程图高度-tab栏高度
        let that=this;
        //测试获取指定元素属性（课程图的高度）
        wx.createSelectorQuery().selectAll('.lession-img-container').boundingClientRect(function (rect) { 
          console.log(rect[0].height)
          //课程图高度imgHeight
          let imgHeight = rect[0].height
    
          //获取tab栏的高度
          wx.createSelectorQuery().selectAll('.tab-nav-container').boundingClientRect(function (rect) { 
            //tab栏高度rect[0].height
            console.log(rect[0].height)
    
            //获取屏幕的可用高度
            wx.getSystemInfo({ 
              success: res => { 
                // 解决swiper高度无法自适应的问题
                that.setData({ 
                  //swiper高度clientHeight
                  clientHeight: res.windowHeight - imgHeight - rect[0].height,
                });
              }
            })
            
          }).exec()  
          
        }).exec()
       
      }
    })

## （四）划重点 ##

### （1）获取元素高度 ###

小程序api接口**wx.createSelectorQuery()** 创建查询节点，

**.selectAll(’.lession-img-container’)** 查询所有\*\*.lession-img-container\*\* 样式的元素

**boundingClientRect(function (rect) \{rect\[0\].height \})** 回调函数，rect\[0\].height 就是我们所要的元素高度。

wx.createSelectorQuery().selectAll('.lession-img-container')
     .boundingClientRect(function (rect) {  
     	rect[0].height
     }).exec()

### （2）获取可用屏幕高度 ###

小程序api接口 **wx.getSystemInfo** 回调函数，获取系统信息。

**res.windowHeight** 就是屏幕的可用高度。

//获取屏幕的可用高度
            wx.getSystemInfo({
              success: res => {
                 res.windowHeight
                });
              }
            })

[https_github.com_leoricding_-]: https://github.com/leoricding/-
[img-KifX0pRV-1564622218322_C_Users_leoric_Pictures_swiper_.PNG]: /images/20211113/698531562a6446de84aee57e01b5221e.png