微信小程序webview嵌套H5页面,H5页面的二维码实现长按设别功能

亲测有效
二维码需要定位,

          <div class="gold_advisor_top_s">
                    <svg xmlns="http://www.w3.org/2000/svg" class="gold_advisor_top_svg" viewBox="0 0 165 163" fill="none">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 3.79086 3.79086 2 6 2H159C161.209 2 163 3.79086 163 6V157C163 159.209 161.209 161 159 161H6C3.79086 161 2 159.209 2 157V6Z" stroke="url(#paint0_linear_0_204)" stroke-width="3.5"/>
                        <defs>
                            <linearGradient id="paint0_linear_0_204" x1="2" y1="2" x2="2" y2="161" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#D2BFFF"/>
                                <stop offset="1" stop-color="#68D7FF"/>
                            </linearGradient>
                        </defs>
                    </svg>
                    <img :src="tpcxImg"/>
                </div>
    .gold_advisor_top{
        margin-top: 39px;
        img{
            display: inline-block;
            width: 149px;
            height: 149px;
            flex-shrink: 0; 
            stroke-width: 3.5px;
            position: absolute;
            top: 5px;
            left: 6px;
            stroke: #D2BFFF;
       }
       span{
        display: flex;
        margin: 25px 0 43px calc(50% - 120px) ;
        justify-content: center;
        align-items: center;
        width: 240px;
        height: 42px;
        background: url('~@/assets/images/appletWeChat/ico_changan.png') no-repeat;
        background-size: 100%;
        color: #FFF;
        text-align: center;
        text-shadow: 0px 1px 2px #0E8CCE;
        font-family: PingFang SC;
        font-size: 16px;
        font-style: normal;
       }
       .gold_advisor_top_s{
            margin-left: calc(50% - 80.5px);
            width: 161px;
            height: 159px;
            display: inline-block;
            position: relative;
       }
       .gold_advisor_top_svg{
            width: 161px;
            height: 159px;
       }
    }
       
<img :src="tpcxImg"/> 

img为二维码 因为是定位,层级高出了其它元素。长按的时候就可以有效设别了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值