微信小程序按鈕去除邊框線分享頁(yè)面功能

更新時(shí)間：2018年08月27日 17:20:11 作者：CH隨風(fēng)而散

這篇文章主要介紹了微信小程序按鈕去除邊框線分享頁(yè)面功能，文中通過(guò)一段簡(jiǎn)單的代碼給大家介紹了微信小程序的button去邊框的方法，感興趣的朋友跟隨腳本之家小編一起看看吧

有一個(gè)需求是分享當(dāng)前頁(yè)面，使用美工的分享按鈕圖片來(lái)分享，而小程序分享功能只有button有

open-type="share"這個(gè)屬性，使用image標(biāo)簽肯定不行。我是這樣做的：

<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;
}

實(shí)際效果如下

這樣按鈕的邊框就消失了，單純的設(shè)置border:none和outline:none沒(méi)用。

小程序的分享事件

 /**
  * 用戶點(diǎn)擊分享
  */
 onShareAppMessage: function () {
  return { 
   title: '分享',
   desc: '活動(dòng)描述', 
   path: '/xxx/xxxx?id=' + this.data.id
  } 
 },

下面在簡(jiǎn)單看下微信小程序的button去邊框代碼

 wxml

<button class='niu'>123123</button>

css

niu::after{
　　border:none;
}

總結(jié)

以上所述是小編給大家介紹的微信小程序按鈕去除邊框線分享頁(yè)面功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

自適應(yīng)方案postcss-pxtorem使用步驟
這篇文章主要介紹了如何使用postcss-pxtorem插件將px單位轉(zhuǎn)換為rem單位,包括安裝插件、創(chuàng)建配置文件和引入腳本的步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-11-11
JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能,涉及js鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
JavaScript避免內(nèi)存泄露及內(nèi)存管理技巧
這篇文章主要介紹了JavaScript避免內(nèi)存泄露及內(nèi)存管理技巧,主要包括了delete應(yīng)用、閉包、DOM泄露、Timers計(jì)（定）時(shí)器泄露等等,需要的朋友可以參考下
2014-09-09
仿YAHOO的一個(gè)小效果下拉效果
[紅色]仿YAHOO的一個(gè)小效果下拉效果...
2006-11-11
javascript頁(yè)面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁(yè)面動(dòng)態(tài)顯示時(shí)間變化的方法有很多，本文為大家介紹下使用javascript的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
flash遮住div問(wèn)題的正確解決方法
在項(xiàng)目中遇到了一個(gè)困惑好久的問(wèn)題，flash遮住div的問(wèn)題,今天終于解決了 ,需要的朋友可以參考下
2014-02-02
原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果
輪播效果是老生常談的話題，今天小編通過(guò)實(shí)例代碼給大家分享原生JS實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫自動(dòng)輪播效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧
2018-09-09
簡(jiǎn)單談?wù)勗鷍s的math對(duì)象
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)勗鷍s的math對(duì)象。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Javascript異步執(zhí)行不按順序解決方案
這篇文章主要介紹了Javascript異步執(zhí)行不按順序解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-04-04
淺談JavaScript節(jié)流與防抖
這篇文章主要為大家介紹了JavaScript的節(jié)流與防抖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11