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

最新推荐文章于 2024-01-30 13:50:11 发布

原创

最新推荐文章于 2024-01-30 13:50:11 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #swiper塌陷 #swiper无法撑开

本文探讨了微信小程序中遇到的swiper塌陷问题，分析了由于swiper-item脱离文档流导致的无法撑开原因。解决方案是通过js动态计算swiper的高度，使用scroll-view填充swiper-item，并详细介绍了获取元素高度和屏幕可用高度的API使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

github地址： 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)]$

（二）不罗嗦直接上代码

<!--pages/lessionDetail/lessionDetail.wxml-->
<!-- 引用模板 -->
<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>
  
  <!-- tab切换标签 -->
  <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>

  <!-- tab内容容器 -->
  <view class="tab-content-container">
    <swiper  style="height: {
      
      {
      
      clientHeight?clientHeight+'px':'auto'}}"                 class="swiper"