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


Posted in Javascript onAugust 27, 2018

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

总结

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

Javascript 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
基于Angularjs实现分页功能
May 30 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 #Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 #Javascript
vue.js响应式原理解析与实现
Jun 22 #Javascript
JavaScript Canvas实现验证码
Aug 02 #Javascript
JS实现方形抽奖效果
Aug 27 #Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 #Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 #Javascript
You might like
php执行sql语句的写法
2009/03/10 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python实现哈希表
2014/02/07 Python
快速入手Python字符编码
2016/08/03 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python字典实现伪切片功能
2020/10/28 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
学校消防安全制度
2014/01/30 职场文书
万能检讨书
2015/01/27 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
生产设备维护保养制度
2015/08/06 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Python中的socket网络模块介绍
2022/07/23 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS