• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序开发-分享或转发悬浮按钮

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

通过给 `button` 组件设置属性`open-type="share"`,可以在用户点击按钮后触发 [Page.onShareAppMessage]事件,如果当前页面没有定义此事件,则点击后无效果。

1、wxml文件

    <view class=\'share\'>
       <image src=\'../../images/forward.png\'></image>
       <text>分享</text>
      <button hoverClass="btn-hover" open-type=\'share\' ></button>
    </view>

2、 wxss文件

  .share {
    height: 95rpx;
    width: 95rpx;
    position: fixed;
    bottom: 170rpx;
    right: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    background: #15aa07;
    border-radius: 50%;
    z-index: 10;
    opacity: 0.9;  透明度
    top: 1150rpx;
  }
  .share image {
    height: 70rpx;
    width: 70rpx;
  }
  .share text {
    color: #fff;
    font-weight: bold;
  }
   
  .share button {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.1;
    z-index: 99;
  }

  .btn-hover {
    background: #033f18;   //点击效果,颜色不必太深
    border-radius: 50px;    //圆角处理
}

3、效果

 

4、演示

地址:https://github.com/wxplug/add-tips欢迎star


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
laravel微信小程序登录加密解密扩展包发布时间:2022-07-18
下一篇:
关于小程序中textarea内的字体浮动问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap