码迷,mamicode.com
首页 > 微信 > 详细

微信小程序按钮去除边框线,分享页面

时间:2018-01-31 15:37:05      阅读:1455      评论:0      收藏:0      [点我收藏+]

标签:alt   http   ack   bubuko   pad   按钮   padding   事件   blog   

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有

open-type="share"这个属性,使用image标签肯定不行。我是这样做的:
<button open-type="share"  
style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >
<image style="height:85rpx;width:215rpx;"  src=../../../image/share_btn.png></image>
</button>

加入css样式去除button边框

button::after{
border: none;
}

实际效果如下

技术分享图片

这样按钮的边框就消失了,单纯的设置border:none和outline:none没用。

小程序的分享事件

 /**
   * 用户点击分享
   */
  onShareAppMessage: function () {
   return { 
     title: ‘分享,
      desc: 活动描述, 
      path: ‘/xxx/xxxx?id= + this.data.id
    } 
  },

 

微信小程序按钮去除边框线,分享页面

标签:alt   http   ack   bubuko   pad   按钮   padding   事件   blog   

原文地址:https://www.cnblogs.com/ChenGg/p/8392398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!