微信小程序的swiper高度超出页面的高度不显示

gpedit250715312 2017-11-28 11:01:14
微信小程序中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>
</view>
</swiper-item>
<swiper-item>
11111111111111111111111111111111111111111111111111111
</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'
}
},



/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

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

},

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

},

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

},

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

},

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

},

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

}
})
...全文
579 2 点赞 打赏 收藏 举报
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
陆剑客 2019-03-08
两年过去了,你这问题解决没,咋解决的
  • 打赏
  • 举报
回复
gpedit250715312 2017-11-28
大神们,来几个大神啊。。。在线等。。
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2017-11-28 11:01
社区公告
暂无公告