收藏
回答

关于progress进度条如何置于图片上层的问题

问题模块
API和组件



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


补充:


最后一次编辑于  2017-02-04  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • Special
    Special
    2017-02-05

    能给出一个最简单的 demo 吗?

    我这里给 progress 设置 absolute + z-index ,进度条可以正常显示出来

    2017-02-05
    赞同
    回复
  • 飞扬_柳絮
    飞扬_柳絮
    2017-02-07

    可以的,麻烦看下了,以下是代码(如果觉得复制麻烦,我也可以发您邮箱):

    <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
                //         } 
                //   })
                }
            })
        }
    })


    2017-02-07
    赞同
    回复