Shulou(Shulou.com)05/31 Report--

This article mainly introduces "the use of uni-app pop-up window and the method of custom pop-up window". In daily operation, I believe that many people have doubts about the use of uni-app pop-up window and the method of customizing pop-up window. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "the use of uni-app pop-up window and the method of custom pop-up window". Next, please follow the editor to study!

1. The pop-up window in uni-app

Example: in front-end development, in order to optimize the user's interactive experience, pop-up windows are often needed to prompt and guide users to operate, while the alter in js is really ugly to use, so today I took a look at the pop-up window in uni-app and felt good, just write it down.

Example 1, uni.showToast (OBJECT) (message prompt box)

The code is as follows (example):

Uni.showToast ({title: data [0], icon:'exception', duration:850})

Several commonly used attributes:

Attribute value type description titleString, that is, the text content displayed in the message box iconString is the icon displayed. Values include {success,error,fail,exception,loading,none}, passing different parameters to display different icons, effect of durationNumber message box display time, millisecond local path of imageSting custom icon (app side does not support whether gifmaskBoolean displays transparent mask to prevent touch penetration. Default: falsepositionString plain text light prompt display location. Only the title attribute takes effect after entering valid values. For more information, please see the description below. SuccessFunction API call successful callback function failFunction API call failed callback function completeFunction API call ends callback function (both successful and failed calls will be executed)

The display effect is as follows:

2. Uni.showModal (OBJECT) (display the prompt box with two buttons)

The code is as follows (example):

Uni.showModal ({title: data [1], content: data [0], showCancel:false Success: function (res) {if (res.confirm) {console.log ('user Click OK') } else if (res.cancel) {console.log ('user Click cancel');})

Several commonly used attributes:

Attribute value type description titleString, that is, the title of the message box contentString, that is, the content of the message box showCancelBoolean optional, whether to display the cancel button Bool type, the default is not true,ture to display, false instead cancelTextString cancel button text content confimrTextString confirm button text content cancelColorHexColor cancel button text color confirmColorHexColor confirm button text color editableBoolean whether to display input box placeholderTextString prompt text when input box successFunction API call successful callback function failed callback function completeFunction API call finished callback function (both successful and failed call will be executed)

The display effect is as follows

3. Uni.showActionSheet (OBJECT) (pop-up operation menu from the bottom)

The code is as follows (example):

Uni.showActionSheet ({itemList: [data], success: function (res) {console.log ('selected' + (res.tapIndex + 1) + 'button') }, fail: function (res) {console.log (res.errMsg);}})

Several commonly used attributes:

The attribute value type describes the text color and string format of the itemListArray button's text array. By default, the "# 000000" popoverObject large screen device pops up the indication area of the native selection button box, and the default center displays the callback function successfully called by successFunction API. Callback function failFunction API call failed callback function callback function at the end of completeFunction API call (both successful and failed calls will be executed)

The display effect is as follows:

Add: uniapp custom pop-up window

In the basic requirements, you need to click on the card and set the number of a column in the card. Here you need to open a pop-up window, but there is no prompt in the default pop-up components in uniapp. I know that the plug-in market already has a lot of components, but today I would like to share this custom pop-up window. Don't say much, just look at the effect.

Attach source code

Come out, my pop-up window! Modify the quantity to determine

Js method

Css style Properties

.popup _ overlay {position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001 -moz-opacity: 0.8; opacity: .80; filter: alpha (opacity=88);} .popup _ content {position: fixed; top: 50% Left: 50%; width: 480rpx; height: 240rpx; margin-left:-270rpx; margin-top:-270rpx; border: 10px solid white; background-color: white Z-index: 1002; overflow: auto;} .popup _ title {width: 480rpx; text-align: center; font-size: 32rpx } .popup _ textarea_item {padding-top: 5rpx; height: 50rpx; width: 440rpx; background-color: # F1F1F1; margin-top: 20rpx Margin-left: 20rpx; padding-top: 25rpx;} .popup _ textarea {width: 410rpx; font-size: 26rpx; margin-left: 20rpx } .popup _ button {color: # 000000;} .popup {text-align: center; font-size: 50rpx; margin-top: 40rpx Background-color: # 007AFF;} at this point, the study on "the use of pop-up windows in uni-app and the method of customizing pop-up windows" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.