关于progress进度条如何置于图片上层的问题
发布于 5 年前 作者 chaolong 8658 次浏览 来自 问答



想请教下，我对progress进行定位后，z-index也设置了，为啥progress进度条会没有显示在最上层，但数字就显示出来了

补充：

2 回复

可以的，麻烦看下了，以下是代码（如果觉得复制麻烦，我也可以发您邮箱）：

<view class="container">
    <view bindtap="back" class="title">
        <image src="../../images/back.png" class="back"></image>
        <text>上传身份证</text>
    </view>
    <view class="discription">
        <text>根据证监部门规定，为确保安全，需上传有效期内二代身份证正反面照片</text>
    </view>
    <view class="positiveidcard"  bindtap="getPic">
        <view class="{{flag===0?'init_idcard':'hide'}}">
            <image src="../../images/idcard.png" class="idcard"></image>
            <text class="add_idcard"></text>
            <text class="idcard_name">身份证正面图片</text>
        </view>
        <view class="{{flag===0?'hide':'add_idcardImg'}}">
            <image src="{{url}}"></image>
            <progress percent="{{percent}}" color="#09BB07" show-info/>
        </view>
    </view>
</view>
.discription{
    width:100%;
    padding: 26rpx 30rpx;
    box-sizing: border-box;
}
 
.positiveidcard{
    width: 690rpx;
    height: 400rpx;
    margin: 20rpx 30rpx 0 30rpx;
    border: 1rpx solid #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;
}
/*定时器 */
var percent = 0;
function timer(that){
    var  objTimer = 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(){
        var that = this;
        wx.chooseImage({
            count: 1, // 最多可以选择的图片张数，默认9
            sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
            sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
            success: function (res) {
                // 返回选定照片的本地文件路径列表(tempFilePath可以作为img标签的src属性显示图片)
                var 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 ，进度条可以正常显示出来

回到顶部