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


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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
ext jquery 简单比较
Apr 07 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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中动态显示签名和ip原理
2007/03/28 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python使用三种方法实现PCA算法
2017/12/12 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python tkinter canvas使用实例
2019/11/04 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Django Form常用功能及代码示例
2020/10/13 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
PHP高级工程师面试问题推荐
2013/01/18 面试题
岗位职责的定义
2013/11/10 职场文书
出生证明公证书
2014/04/09 职场文书
技术股份合作协议书
2014/10/05 职场文书
python自动化八大定位元素讲解
2021/07/09 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫