微信小程序中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 () {
}
})
这是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 () {
}
})
在scroll-view 标签加一个scroll-y就可以往下滑了。
我给swiper-item加了:height:100%;还是不行。
是这里代码style="height:{{winHeight?winHeight+'px':'auto'}};"
控制了swiper的高度,是这里的问题。但如果我把height设置成100%就没有内容显示了
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;
}你自己先摸索,不懂的问,我看到会及时回你的。自己学到的不容易忘,加油,小伙伴!