在一个父控件下面加了swiper和view两个控件,父控件添加
position: relative;
子view控件添加
position: absolute;
并布局, 在模拟器上显示正常,可真机调试,却不显示子控件view
需要滑动一下swiper , view才会冒出来 测试机ios
你好,基础库是最新的,好像和他的情况还不太一样,我贴下代码吧
wxml
<!–pages/comment/comment.wxml–>
<block wx:if="{{isShow}}">
<scroll-view scroll-y=“true” bindscrolltolower=“scrollDid” class=‘scrollView’ bindscroll=“scrollDidScroll” >
<view class=‘titleView’>你在学校做过哪些使你一战名、全校皆知的事?</view>
<view class=‘commentContentView’ wx:for="{{imgUrls}}" wx:key="">
<swiper class=‘swiperView’ indicator-dots="{{indicatorDots}}" bindchange=“swiperChange” data-index=’{{index}}’>
<block wx:for="{{imgUrls}}" wx:key="">
<swiper-item>
<image src="{{item}}" class=“slide-image”/>
</swiper-item>
</block>
</swiper>
<view class=‘audioIconView’ bindtap=‘audioClick’ data-id=’{{index}}’>
<image src=’…/images/bg_bubble_nor.png’ class=‘bgImage’></image>
<view class=‘durationView’>10"</view>
<image class=‘playerImage’ src=’{{playerIndex == index ? “…/images/voice_-animation.gif” : “…/images/voice_pic.gif”}}’></image>
</view>
</view>
<view class=‘loadingView’ hidden=’{{!isShowLoaDing}}’>Loading</view>
</scroll-view>
</block>
<view class=‘bottomView’>
<view class=‘moreView bottomBtn’>浏览更多问答</view>
<view class=‘respondView bottomBtn’>回答</view>
</view>
wxss
/* pages/comment/comment.wxss */
.content {
}
.titleView {
margin: 20rpx 30rpx 40rpx 30rpx;
font-size: 48rpx;
}
.scrollView {
/* position: fixed; */
height: 1117rpx;
}
.scrollView::-webkit-scrollbar{
display:none;
}
.commentContentView {
margin-bottom: 30rpx;
position: relative;
}
.swiperView {
height: 686rpx;
width: 100%;
}
.slide-image {
padding: 0rpx 32rpx;
width: 686rpx;
height: 686rpx;
}
.pageView {
position: absolute;
top: 20rpx;
right: 61rpx;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 30rpx;
width: 94rpx;
height: 48rpx;
text-align: center;
font-size: 28rpx;
color: #fff;
line-height: 48rpx;
}
.bottomView {
position: fixed;
bottom: 0;
display: flex;
width: 100%;
z-index: 10000;
}
.moreView {
background-color: #F5A623;
}
.respondView {
background-color: #D0021B;
}
.bottomBtn {
height: 98rpx;
width: 50%;
text-align: center;
font-size: 30rpx;
line-height: 98rpx;
color: #fff;
z-index: 10000;
}
.audioIconView {
position: absolute;
display: flex;
align-self: center;
height: 70rpx;
width: 314rpx;
bottom: 21rpx;
left: 62rpx;
}
.bgImage {
width: 314rpx;
height: 70rpx;
position: absolute;
z-index: 0;
}
.durationView {
font-size: 28rpx;
color: #403B37;
position: absolute;
margin-top: 17rpx;
margin-left: 21rpx;
}
.playerImage {
position: absolute;
width: 28rpx;
height: 35rpx;
margin-top: 19rpx;
right: 35rpx;
}
.loadingView {
font-size: 24rpx;
text-align: center;
height: 68rpx;
line-height: 68rpx;
background-color: #000;
color: #fff;
}
js
// pages/comment/comment.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg’,
‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg’,
‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg’,
],
indicatorDots: false,
isShow:false,
currentIndex:1,
indexArr:[
],
playerIndex:“9999”,
isShowLoaDing:false,
solveBug:false,
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
var arr = this.data.indexArr;
this.setData({
indexArr: arr,
isShow: true
})
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
onShareAppMessage: function () {
return {
title: ‘欢喜约麦详情页’,
path: “pages/comment/comment”
}
},
swiperChange: function (event) {
var arrIndex = event.currentTarget.dataset.index;
var arrPage = event.detail.current;
arrPage++;
var arr = this.data.indexArr;
arr[arrIndex] = arrPage;
this.setData({
indexArr: arr
});
},
audioClick: function(event) {
var id = event.currentTarget.dataset.id;
var playerIndex = this.data.playerIndex;
if(playerIndex == id) {
this.setData({
playerIndex:“9999”,
})
} else {
this.setData({
playerIndex: id,
})
}
},
scrollDid: function () {
this.setData({
isShowLoaDing:true
})
},
scrollDidScroll: function () {
this.setData({
})
},
})