摘要:如圖,本次案例要做的是右下角的客服按鈕和藍色漸變的提示卡片,可隨時關閉的。微信官方給了客服按鈕標簽這個標簽的樣式不可修改,如果我們要換自己想改的圖片,需要怎么做呢就像我圖片上的樣式。
如圖,本次案例要做的是右下角的客服按鈕和藍色漸變的提示卡片,可隨時關閉的。
微信官方給了客服按鈕標簽
這個標簽的樣式不可修改,如果我們要換自己想改的圖片,需要怎么做呢?就像我圖片上的樣式。
我這個客服控件是放在一個正圓的view里的居中位置,所以,我這里先通過position定位到居中位置,把size放到最大。
然后把透明度設置為0即可,然后給正圓這個view設置一圖片背景,圖片就是你想要顯示的icon
提示卡片
提示卡片是一個view,view里面有一個×用來綁定隱藏事件的,bindtap="onChangeShowState"就是用來隱藏這個view的
index.wxml
× 有疑問可以點這里咨詢哦
index.wxss
.zixun{ width: 55px; height: 55px; background: url(http://wxpad.cn/yunpan/cdn/imgsrc/1530949769.png)no-repeat; position: fixed; bottom: 35px; right: 35px; border-radius: 50%; box-shadow: 0 0 5px #ffffd; text-align: center; font-size: 14px; color: #333; } .zixun .kf{ position: relative; top: 0px; left: 0px; margin:15px auto; opacity: 0; } .bright789-text{ position: fixed; bottom: 100px; right: 65px; width: 200px; height: 45px; background-image: linear-gradient(to left, #4481eb 0%, #04befe 100%); border-bottom-left-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; z-index: 99999999; box-shadow: 0 0 10px #eee; line-height: 40px; text-indent: 15px; } .bright789-text .close{ font-size: 1.5em; color: #fff; } .bright789-text .text{ font-size: 13px; color: #fff; margin-top: -38px; margin-left: 20px; } .bright789_view_hide{ display: none; }
index.js
//index.js //獲取應用實例 const app = getApp() Page({ data: { showView: true }, onLoad: function (options) { // 生命周期函數--監聽頁面加載 showView: (options.showView == "true" ? true : false) }, onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView) }) } })
OK,制作完成!
作者:TANKING
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116838.html
摘要:如圖,本次案例要做的是右下角的客服按鈕和藍色漸變的提示卡片,可隨時關閉的。微信官方給了客服按鈕標簽這個標簽的樣式不可修改,如果我們要換自己想改的圖片,需要怎么做呢就像我圖片上的樣式。 showImg(https://segmentfault.com/img/bVbdr7Y?w=331&h=596); 如圖,本次案例要做的是右下角的客服按鈕和藍色漸變的提示卡片,可隨時關閉的。 微信官方給...
摘要:準備工作要開發微信小程序之前,需要做一些準備工作,首先進入然后再進入,接下來就解壓源碼包和安裝微信開發工具,安裝好開發軟件之后,在桌面可以看到然后點擊進入需要手機微信掃碼確認登錄,掃碼完之后選擇本地小程序項目選擇添加項目之后如果想要學習一下 準備工作 要開發微信小程序之前,需要做一些準備工作,首先進入https://mp.weixin.qq.com/debu... showImg(ht...
摘要:為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序,推薦通讀此文小程序是一種不需要下載安裝即可使用的應用,它出現了觸手可及的夢想,用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學習; 一:微信小程序的特點 張小龍:張小龍全面闡述小程...
摘要:為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序,推薦通讀此文小程序是一種不需要下載安裝即可使用的應用,它出現了觸手可及的夢想,用戶掃一掃或者搜一下即 為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學習; 一:微信小程序的特點 張小龍:張小龍全面闡述小程...
閱讀 3209·2021-11-23 09:51
閱讀 3667·2021-09-22 15:35
閱讀 3645·2021-09-22 10:02
閱讀 2956·2021-08-30 09:49
閱讀 509·2021-08-05 10:01
閱讀 3376·2019-08-30 15:54
閱讀 1632·2019-08-30 15:53
閱讀 3558·2019-08-29 16:27