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

 更新时间:2018年08月27日 17:20:11   作者:CH随风而散  
这篇文章主要介绍了微信小程序按钮去除边框线分享页面功能,文中通过一段简单的代码给大家介绍了微信小程序的button去边框的方法,感兴趣的朋友跟随脚本之家小编一起看看吧

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有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
  } 
 },

  下面在简单看下微信小程序的button去边框代码

 wxml

<button class='niu'>123123</button>

css

niu::after{
  border:none;
}

总结

以上所述是小编给大家介绍的微信小程序按钮去除边框线分享页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 

相关文章

  • 自适应方案postcss-pxtorem使用步骤

    自适应方案postcss-pxtorem使用步骤

    这篇文章主要介绍了如何使用postcss-pxtorem插件将px单位转换为rem单位,包括安装插件、创建配置文件和引入脚本的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • JS实现的按钮点击颜色切换功能示例

    JS实现的按钮点击颜色切换功能示例

    这篇文章主要介绍了JS实现的按钮点击颜色切换功能,涉及js鼠标事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • JavaScript避免内存泄露及内存管理技巧

    JavaScript避免内存泄露及内存管理技巧

    这篇文章主要介绍了JavaScript避免内存泄露及内存管理技巧,主要包括了delete应用、闭包、DOM泄露、Timers计(定)时器泄露等等,需要的朋友可以参考下
    2014-09-09
  • 仿YAHOO的一个小效果 下拉效果

    仿YAHOO的一个小效果 下拉效果

    [红色]仿YAHOO的一个小效果 下拉效果...
    2006-11-11
  • javascript页面动态显示时间变化示例代码

    javascript页面动态显示时间变化示例代码

    页面动态显示时间变化的方法有很多,本文为大家介绍下使用javascript的具体实现,感兴趣的朋友不要错过
    2013-12-12
  • flash遮住div问题的正确解决方法

    flash遮住div问题的正确解决方法

    在项目中遇到了一个困惑好久的问题,flash遮住div的问题,今天终于解决了 ,需要的朋友可以参考下
    2014-02-02
  • 原生JS实现简单的无缝自动轮播效果

    原生JS实现简单的无缝自动轮播效果

    轮播效果是老生常谈的话题,今天小编通过实例代码给大家分享原生JS实现简单的无缝自动轮播效果,感兴趣的朋友跟随小编一起学习吧
    2018-09-09
  • 简单谈谈原生js的math对象

    简单谈谈原生js的math对象

    下面小编就为大家带来一篇简单谈谈原生js的math对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Javascript异步执行不按顺序解决方案

    Javascript异步执行不按顺序解决方案

    这篇文章主要介绍了Javascript异步执行不按顺序解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • 浅谈JavaScript节流与防抖

    浅谈JavaScript节流与防抖

    这篇文章主要为大家介绍了JavaScript的节流与防抖,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11

最新评论