我拆过的坑cycx

查询一下!

微信小程序代码实现:点击「添加小程序」下次访问更便捷!

.tooltip-box {

    position: fixed;

    top: 0;

    right: 12rpx;

    z-index: 999;

    display: flex;

    justify-content: flex-end;

    align-items: flex-end;

    flex-direction: column;

    width: 600rpx;

}


.arrow {

    width: 0;

    height: 0;

    padding: 0;

    margin: 0;

    margin-right: 120rpx;

    border-width: 15rpx;

    border-style: solid;

    border-color: transparent transparent #0193ff transparent;

}



.tooltip {

    background-color: #0193ff;

    box-shadow: 0 10rpx 20rpx -10rpx #0193ff;

    border-radius: 12rpx;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 60rpx;

    padding: 0 20rpx;

    margin-right: 40rpx;

}

.tooltip>text {

    color: #FFF;

    font-size: 28rpx;

    font-weight: 400;

}



    <View bindtap="closeGuide" class="tooltip-box" wx:if="{{isTiptrue}}">

        <View class="arrow"></View>

        <View class="tooltip">

            <Text>点击「添加小程序」下次访问更便捷</Text>

        </View>

    </View>





isTiptrue: !0


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright Your WebSite.Some Rights Reserved.