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

来源：动视网责编：小采时间：2020-11-27 22:09:04

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

微信小程序按钮去除边框线分享页面功能:有一个需求是分享当前页面，使用美工的分享按钮图片来分享，而小程序分享功能只有button有 open-type=share这个属性，使用image标签肯定不行。我是这样做的： <button open-type=share style=height:85rpx;width:215

推荐度：

点击下载本文 文档为doc格式

导读微信小程序按钮去除边框线分享页面功能:有一个需求是分享当前页面，使用美工的分享按钮图片来分享，而小程序分享功能只有button有 open-type=share这个属性，使用image标签肯定不行。我是这样做的： <button open-type=share style=height:85rpx;width:215

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

总结

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

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

推荐度：

点击下载本文 文档为doc格式

标签：小程序微信小程序边框

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐