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


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 相关文章推荐
让textarea自动调整大小的js代码
Apr 12 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jquery ui对话框实例代码
May 10 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
js插件实现图片滑动验证码
Sep 29 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 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+mysqli数据库连接的两种方式
2015/01/28 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
微信小程序自定义导航栏
2018/12/31 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
国际经济贸易专业推荐信
2013/11/06 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
vue使用watch监听属性变化
2022/04/30 Vue.js