小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在一个父控件下面加了swiper和view两个控件,父控件添加
position: relative;
子view控件添加
position: absolute;
并布局, 在模拟器上显示正常,可真机调试,却不显示子控件view
需要滑动一下swiper , view才会冒出来 测试机ios
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
感谢反馈。应该是iOS下的一个绘制bug,原因与上面链接里面的问题一致。我们尝试修复一下。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
感谢反馈,初步判断和这个问题类似:https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=e6d6d0060fce53f6a27b88ac8fbbcbee&token=1334173493&lang=zh_CN
麻烦确定一下:
是不是仅iOS出现这个问题?
基础库版本低于1.5.3吗?
你好,谢谢,听到你说是一个bug我就放心了,因为现在搞的我自己都怀疑自己了
你好,基础库是最新的,好像和他的情况还不太一样,我贴下代码吧
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 class='loadingView' hidden='{{!isShowLoaDing}}'>Loading</view>
</scroll-view>
<view class='bottomView'>
<view class='moreView bottomBtn'>浏览更多问答</view>
<view class='respondView bottomBtn'>回答</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;
.swiperView {
height: 686rpx;
width: 100%;
.slide-image {
padding: 0rpx 32rpx;
width: 686rpx;
.pageView {
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;
z-index: 10000;
.moreView {
background-color: #F5A623;
.respondView {
background-color: #D0021B;
.bottomBtn {
height: 98rpx;
width: 50%;
font-size: 30rpx;
line-height: 98rpx;
.audioIconView {
align-self: center;
height: 70rpx;
width: 314rpx;
bottom: 21rpx;
left: 62rpx;
.bgImage {
z-index: 0;
.durationView {
color: #403B37;
margin-top: 17rpx;
margin-left: 21rpx;
.playerImage {
width: 28rpx;
height: 35rpx;
margin-top: 19rpx;
right: 35rpx;
.loadingView {
font-size: 24rpx;
height: 68rpx;
line-height: 68rpx;
background-color: #000;
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',
],
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 () {
return {
title: '欢喜约麦详情页',
path: "pages/comment/comment"
swiperChange: function (event) {
var arrIndex = event.currentTarget.dataset.index;
var arrPage = event.detail.current;
arrPage++;
arr[arrIndex] = arrPage;
indexArr: arr
});
audioClick: function(event) {
var id = event.currentTarget.dataset.id;
var playerIndex = this.data.playerIndex;
if(playerIndex == id) {
} else {
playerIndex: id,
scrollDid: function () {
isShowLoaDing:true
scrollDidScroll: function () {
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
感谢反馈。应该是iOS下的一个绘制bug,原因与上面链接里面的问题一致。我们尝试修复一下。
感谢反馈,初步判断和这个问题类似:
https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=e6d6d0060fce53f6a27b88ac8fbbcbee&token=1334173493&lang=zh_CN
麻烦确定一下:
是不是仅iOS出现这个问题?
基础库版本低于1.5.3吗?
你好,谢谢,听到你说是一个bug我就放心了,因为现在搞的我自己都怀疑自己了
你好,基础库是最新的,好像和他的情况还不太一样,我贴下代码吧
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({
})
},
})