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


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 相关文章推荐
js href的用法
May 13 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
原生JS实现幻灯片
Feb 22 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
vue路由传参三种基本方式详解
Dec 09 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
smarty的保留变量问题
2008/10/23 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php实现的双向队列类实例
2014/09/24 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP里的单例类写法实例
2015/06/25 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python实现连连看游戏
2020/02/14 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
类如何去实现接口
2013/12/19 面试题
前处理组长岗位职责
2014/03/01 职场文书
知识竞赛主持词
2014/03/26 职场文书
拔河比赛口号
2014/06/10 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
五四青年节的活动方案
2014/08/20 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript