小程序
小游戏
企业微信
微信支付
扫描小程序码分享
想请教下，我对progress进行定位后，z-index也设置了，为啥progress进度条会没有显示在最上层，但数字就显示出来了
补充：
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
能给出一个最简单的 demo 吗？
我这里给 progress 设置 absolute + z-index ，进度条可以正常显示出来
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
可以的，麻烦看下了，以下是代码（如果觉得复制麻烦，我也可以发您邮箱）：
<
view
class
=
"container"
>
bindtap
"back"
"title"
image
src
"../../images/back.png"
></
text
>上传身份证</
</
"discription"
>根据证监部门规定，为确保安全，需上传有效期内二代身份证正反面照片</
"positiveidcard"
"getPic"
"{{flag===0?'init_idcard':'hide'}}"
"../../images/idcard.png"
"idcard"
"add_idcard"
"idcard_name"
>身份证正面图片</
"{{flag===0?'hide':'add_idcardImg'}}"
"{{url}}"
progress
percent
"{{percent}}"
color
"#09BB07"
show-info/>
.discription{
width
:
100%
;
padding
26
rpx
30
rpx;
box-sizing: border-box;
}
.positiveidcard{
690
height
400
margin
20
0
border
1
solid
#d7d7d7
border-radius:
10
position
relative
text-align
center
.
hide
{
display
none
;}
.add_idcardImg image{
/*progress{
position: absolute;
bottom: 50%;
z-index: 10;
}*/
.idcard{
60
52
margin-top
130
.add_idcard :before{
content
""
/*伪元素必须属性*/
block
/*设为块级元素*/
4
absolute
/*根据父级元素为relative或者fixed定位*/
top
48%
left
50%
background-color
#999
.add_idcard ::after{
margin-left
-24
.idcard_name{
58
font-size
/*定时器 */
var
percent = 0;
function
timer(that){
objTimer = setInterval(
(){
percent += 9;
that.setData({percent: percent});
if
(percent >= 99){
clearInterval(objTimer);
return
},500);
Page({
data: {
flag:0,
percent:0,
objTimer:
},
back:
wx.navigateTo({
url:
'../index/index'
})
/*从本地相册选择图片或使用相机拍照 */
getPic:
that =
this
wx.chooseImage({
count: 1,
// 最多可以选择的图片张数，默认9
sizeType: [
'original'
,
'compressed'
],
// original 原图，compressed 压缩图，默认二者都有
sourceType: [
'album'
'camera'
// album 从相册选图，camera 使用相机，默认二者都有
success:
(res) {
// 返回选定照片的本地文件路径列表(tempFilePath可以作为img标签的src属性显示图片)
tempFilePaths = res.tempFilePaths;
that.setData({url: tempFilePaths[0],flag:1});
timer(that);
// wx.uploadFile({
// url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
// filePath: tempFilePaths[0],
// name: 'file',
// formData:{'user': 'test'},
// success: function(res){
// var data = res.data
// }
// })
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
能给出一个最简单的 demo 吗？
我这里给 progress 设置 absolute + z-index ，进度条可以正常显示出来
可以的，麻烦看下了，以下是代码（如果觉得复制麻烦，我也可以发您邮箱）：
<viewclass="container"><viewbindtap="back"class="title"><imagesrc="../../images/back.png"class="back"></image><text>上传身份证</text></view><viewclass="discription"><text>根据证监部门规定，为确保安全，需上传有效期内二代身份证正反面照片</text></view><viewclass="positiveidcard"bindtap="getPic"><viewclass="{{flag===0?'init_idcard':'hide'}}"><imagesrc="../../images/idcard.png"class="idcard"></image><textclass="add_idcard"></text><textclass="idcard_name">身份证正面图片</text></view><viewclass="{{flag===0?'hide':'add_idcardImg'}}"><imagesrc="{{url}}"></image><progresspercent="{{percent}}"color="#09BB07"show-info/></view></view></view>.discription{width:100%;padding:26rpx30rpx;box-sizing: border-box;}.positiveidcard{width:690rpx;height:400rpx;margin:20rpx30rpx030rpx;border:1rpxsolid#d7d7d7;border-radius:10rpx;position:relative;text-align:center;}.hide{display:none;}.add_idcardImg image{width:690rpx;height:400rpx;}/*progress{position: absolute;bottom: 50%;z-index: 10;}*/.idcard{width:60rpx;height:52rpx;margin-top:130rpx;}.add_idcard :before{content:"";/*伪元素必须属性*/display:block;/*设为块级元素*/width:4rpx;height:52rpx;position:absolute;/*根据父级元素为relative或者fixed定位*/top:48%;left:50%;background-color:#999;}.add_idcard ::after{content:"";/*伪元素必须属性*/display:block;/*设为块级元素*/width:52rpx;height:4rpx;position:absolute;/*根据父级元素为relative或者fixed定位*/top:48%;left:50%;background-color:#999;margin-top:26rpx;margin-left:-24rpx;}.idcard_name{display:block;margin-top:58rpx;font-size:30rpx;color:#999;}/*定时器 */varpercent = 0;functiontimer(that){varobjTimer = setInterval(function(){percent += 9;that.setData({percent: percent});if(percent >= 99){clearInterval(objTimer);return;}},500);}Page({data: {flag:0,percent:0,objTimer:""},back:function(){wx.navigateTo({url:'../index/index'})},/*从本地相册选择图片或使用相机拍照 */getPic:function(){varthat =this;wx.chooseImage({count: 1,// 最多可以选择的图片张数，默认9sizeType: ['original','compressed'],// original 原图，compressed 压缩图，默认二者都有sourceType: ['album','camera'],// album 从相册选图，camera 使用相机，默认二者都有success:function(res) {// 返回选定照片的本地文件路径列表(tempFilePath可以作为img标签的src属性显示图片)vartempFilePaths = res.tempFilePaths;that.setData({url: tempFilePaths[0],flag:1});timer(that);// wx.uploadFile({// url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址// filePath: tempFilePaths[0],// name: 'file',// formData:{'user': 'test'},// success: function(res){// var data = res.data// }// })}})}})