微信小程序中swiper的高度太高导致页面无法完全显示内容，只是显示了部分内容，why?

[gpedit250715312]

微信小程序中swiper的高度太高导致页面无法完全显示内容，只是显示了部分内容，就像是用了overflow:hidden属性一样把内容给截断了。请高手进来看看是什么原因导致的。这是页面的显示效果：红色边框里的内容是 我说的只显示了一部分效果的样子。


这是WXML代码：

<view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">酒店印象</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">房型展示</view>
  </view>
  <!-- <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight?winHeight+'px':'auto'}};" bindchange="bindChange"> -->
  <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:1900rpx;" bindchange="bindChange">
    <swiper-item>
      <view class='hotel-yx'>
        <image class='title-bg' src='/images/adv/title_bg.jpg'></image>
        <text class='hotel-title'>酒店介绍</text>
        <view class="conn-top">
          <image class="logo" src='/images/adv/logo.jpg'></image>
          <text>7天连锁酒店（7 days Inn）创立于2005年，2009年11月20日在美国纽约证券交易所上市。作为第一家登陆纽交所的中国酒店企业，秉承让顾客“天天睡好觉”的愿景，以直销低价模式，快乐自主的服务理念，满足客户的核心住宿需求。</text>
          <br />
          <text>截至2013年11月30日，7天连锁酒店已拥有分店超2000家，覆盖全国超过300个主要城市，业已建成经济型连锁酒店全国网络体系。</text>
        </view>
        <view style="clear:both;"></view>
        <image class='title-bg' src='/images/adv/title_bg.jpg'></image>
        <text class='hotel-title'>环境展示</text>
        <view class='conn-btm'>
          <image src="/images/adv/hotel_01.jpg"></image>
          <image src="/images/adv/hotel_02.jpg"></image>
          <image src="/images/adv/hotel_03.jpg"></image>
          <image src="/images/adv/hotel_04.jpg"></image>
          <image src="/images/adv/hotel_05.jpg"></image>
          <image src="/images/adv/hotel_06.jpg"></image>


        </view>
        <image class='title-bg' src='/images/adv/title_bg.jpg'></image>
        <text class='hotel-title'>联系我们</text>
      </view>
    </swiper-item>
    <swiper-item>
11111111111111111111111
</swiper-item>
  </swiper>

这是WXSS代码：

.container{
  display: flex;
  flex-direction: column;
}
.header_bg{
  width:100%;
}

.swiper-tab{    
    width: 100%;    
    border-bottom: 2rpx solid #777777;    
    text-align: center;    
    line-height: 80rpx; 
    font-weight: bold;
    }    
.swiper-tab-list{  
    font-size: 30rpx;    
    display: inline-block;    
    width: 50%;    
    color: #777777;    
}    
.on{ 
    color: #00bde4;    
    border-bottom: 5rpx solid #00bde4;
}    
 .swiper-box{
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}     
.swiper-box view{    
    text-align: left;    
}
.hotel-yx{
  margin:20rpx;
  height: 100%;
}
.title-bg{
  width:16rpx;
  height: 16rpx;
  margin-right:20rpx;
  
}

.logo{
  width:320rpx;
  height: 250rpx;
  float:left;
  margin:8rpx 10rpx;
}
.hotel-title{
  line-height: 45rpx;
  height: 45rpx;
  vertical-align: middle;
}
.conn-top{
  width:100%;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  font-size:30rpx;
  color: #000;
  background:#fff;
}
.conn-top text{
  line-height: 50rpx;
  display: block;
  text-indent:60rpx;
}
.conn-btm{
  width:100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  -webkit-flex-wrap:wrap;
}
.conn-btm image{
  width:310rpx;
  height:170rpx;
  padding:10rpx;
  background:#fff;
  margin-bottom: 10rpx;
}
.dateConn{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

这是JS代码：

// pages/hotel/hotel.js
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    winWidth:0,
    winHeight:0,
    currentTab:0,
    // text:"这是一个页面"  
    // picker1Value: 0,
    // picker1Range: ['北京', '上海', '广州', '深圳'],
   // timeValue: '',
    dateValue1: '',
    dateValue2: '',
    pageNum:1,//设置加载的第几次，默认是第一次
    isFirstLoad:true,//用于判断List数组是不是空数组，默认true,空的数组
    hasMore:false,//加载更多
  },
  onPullDownRefresh: function () {
    // 显示导航栏loading  
    wx.showNavigationBarLoading();
    // 调用接口加载数据  
    this.loadData();
    // 隐藏导航栏loading  
    wx.hideNavigationBarLoading();
    // 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新  
    wx.stopPullDownRefresh();
  },
  // 上拉加载  
  onReachBottom(e) {
    let that = this;
    if (that.data.hasMore) {
      that.setData({
        pageNum: that.data.pageNum + 1,  // 每次触发上拉事件，把pageNum+1  
        isFirstLoad: false                // 触发到上拉事件，把isFirstLoad设为为false  
      });

      that.loadData();
    }
  },  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var that = this;
      wx.getSystemInfo({
        success: function(res) {
          console.log(res.windowHeight);
          that.setData({  
            winWidth:res.windowWidth,
            winHeight:res.windowHeight
          });
        }
      });

  },
  /*
    滑动切换tab
  */
  bindChange:function(e){
    var that = this;
    that.setData({currentTab:e.detail.current});
  },

  /*
    点击切换tab
  */
  swichNav:function(e){
    var that = this;
    if(this.data.currentTab===e.target.dataset.current){
      return false;
    }else{
      that.setData({
        currentTab:e.target.dataset.current
      })
    }
  },

  /*
    点击分享 
    
  */
  onShareAppMessage:function(){
    return {
      title:'分享给好友们吧',
      path:'/page/user?id=123'
    }
  },
  // normalPickerBindchange: function (e) {
  //   this.setData({
  //     picker1Value: e.detail.value
  //   })
  // },
  // timePickerBindchange: function (e) {
  //   this.setData({
  //     timeValue: e.detail.value
  //   })
  // },
  datePickerBindchange1: function (e) {
    this.setData({
      dateValue1: e.detail.value
    })
  },  
  datePickerBindchange2: function (e) {
    this.setData({
      dateValue2: e.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

[前端-珊珊]

你写的是想要可以往下滑，内容全部显示出来吧？那你可以在swiper-item给百分比，占满屏幕的宽高，然后在里面给个scroll-view 在scroll-view 标签加一个scroll-y就可以往下滑了。

[gpedit250715312]

引用 3 楼 qq_34672907 的回复:

想粘贴我代码的，但无奈太多了，所以发给链接你参考一下看看 http://www.jianshu.com/p/31a3d7af7e2d

是我想要的内容，但里面没有源代码啊。。。把你做好的有源代码的发给我看看

[前端-珊珊]

我给你的；链接里面有制作的方法，源码他也已经给出来了，你要做的最多是样式的布局而已啦。 布局我给你个参考。swiper部分我的class名字就是swiper，scroll-view的class就是scrollers。

page {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: "微软雅黑";
    overflow: hidden;
}

/* 展示滑动模块 */

.swiper {
    width: 100%;
    height: 100%;
    background: #b2b2b2;
    overflow-x: hidden;
}

/* 滑动区域 */

.scrollers, .scrollView {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

你自己先摸索，不懂的问，我看到会及时回你的。自己学到的不容易忘，加油，小伙伴！

[gpedit250715312]

引用 1 楼 qq_34672907 的回复:

你写的是想要可以往下滑，内容全部显示出来吧？那你可以在swiper-item给百分比，占满屏幕的宽高，然后在里面给个scroll-view 在scroll-view 标签加一个scroll-y就可以往下滑了。

我给swiper-item加了:height:100%;还是不行。 是这里代码style="height:{{winHeight?winHeight+'px':'auto'}};" 控制了swiper的高度，是这里的问题。但如果我把height设置成100%就没有内容显示了。。。

[前端-珊珊]

想粘贴我代码的，但无奈太多了，所以发给链接你参考一下看看 http://www.jianshu.com/p/31a3d7af7e2d