WeChat mini-app custom message prompt box, mini-app custom

Mini-program custom message prompt box, mini-program custom

Mini-app custom message prompt box

Requirement Description:

The wx. showToast (OBJECT) interface is called, but the icon and image are not required. Even if the image is empty, a placeholder exists. In fact, only custom text content is output.

Effect:

The Code is as follows:

<! -- Index. wxml --> <! -- Page body --> <view> <block wx: for = "{50 }}"> <view> 123456 123456 123456 123456 123456 </view> </block> </view> <! -- Custom pop-up window --> <view class = "showModule" wx: if = "{isShow}"> <! -- This part can be modified flexibly, for example, to a modal box --> <view class = "text" >{{ text }}</view> </view>

/* Index. wxss */. showModule {/* use style control to hide visibility: hidden; * // * flex Layout */display: flex; justify-content: center; align-items: center; /* generate an absolute positioning element, which is located relative to the browser window */position: fixed;/* If the height and width remain unchanged, left and top do not need to be modified */left: 35%; top: 40%; height: 20ku; width: 30vw;/* opaque */opacity: 0.99; background-color: # 7b7b7b;/* rounded corner */border-radius: 30rpx ;}. showModule. text {/* flex Layout */display: flex;/* font bold */font-weight: bold; color: white; font-size: 13pt; font-family: "";/* Helvetica, Arial, Hiragino Sans GB, Source Han Sans CN, PingFang SC, Roboto,, Heiti SC, Microsoft Yahei, sans-serif; */}

// Index. js // obtain the application instance var app = getApp () Page ({data: {text: "pop-up content", isShow: false}, onShow () {this. setData ({text: "User canceled payment", isShow: true })}})

The above is an example of the mini-program custom message prompt box. If you have any questions, please leave a message or go to the community on this site for discussion. Thank you for reading this article and hope to help you. Thank you for your support for this site!