uniapp小程序自定义分享按钮

<view class="icon-item">
  <view class="icon-img">
    <image :src="`${imgurl}/onlineApplet/applet3/followlist/share.png`"></image>
  </view>
  <view class="icon-text">分享主页</view>
  <button open-type="share" id="shareBtn" ></button>
</view>

<style lang="scss" scoped>
/**
* 给按钮设置一个绝对定位 让按钮覆盖.icon-item元素
*/ #shareBtn
{   width: 100%;   height: 100%;   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   opacity: 0; } .icon-item {   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   margin-right: 48rpx;   position: relative;   .icon-img {     width: 100rpx;     image {       width: 100rpx;       height: 100rpx;     }   }   .icon-text {     font-family: PingFang SC;     font-weight: 500;     font-size: 24rpx;     color: #222222;   } } </style>

 

posted @ 2025-01-23 14:14  烧机  阅读(98)  评论(0)    收藏  举报