Shulou(Shulou.com)06/01 Report--

This article mainly explains "how WeChat Mini Programs hides the customer service button". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn how WeChat Mini Programs hides the customer service button.

Wechat officially gave the label to the customer service button.

The style of this tag cannot be modified. What do we need to do if we want to change the picture we want to change? Just like the style in my picture.

My customer service control is placed in the center of a round view, so I first locate the center position through the position to maximize the size.

Then set the transparency to 0, and then set a picture background to the circle view. The picture is the icon you want to display.

Prompt card

The cue card is a view,view that contains an × to bind hidden events, and bindtap= "onChangeShowState" is used to hide this view.

Index.wxml

If you have any questions, you can click here for advice.

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: 00 5px # ddd; 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: 00 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// gets the application instance const app = getApp () Page ({data: {showView: true}, onLoad: function (options) {/ / Lifecycle function-- load showView: (options.showView = = "true") on the listening page? True: false)}, onChangeShowState: function () {var that = this That.setData ({showView: (! that.data.showView)})}) Thank you for your reading. The above is the content of "how WeChat Mini Programs hides the customer service button". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs hides the customer service button, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.