支付宝小程序使用 CSS 自定义智能客服组件的页面布局

CSS 小程序 About 716 words

布局

<view class="contact-box">
  <text>这是客服按钮</text>
  <contact-button tnt-inst-id="" scene="" />
</view>

样式

最主要是父标签中的position: relative属性。

以及子标签中的position: absoluteopacity: 0z-index,否则无法响应contact-button的点击事件

.contact-box {
    width: 500rpx;
    height: 92rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #F8F8F8;
    background: #00cc88;
    border-radius: 16rpx;
}

.contact-box contact-button {
    width: 100%;
    height: 100%;
    position: absolute;
      left: 0;
      top: 0;
    opacity: 0;
    z-index: 100;
}

参考

https://open.alipay.com/portal/forum/post/79701031

Views: 450 · Posted: 2024-02-05

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh