当前位置:网站首页>微信小程序中使用wx.showToast()进行界面交互
微信小程序中使用wx.showToast()进行界面交互
2022-07-07 04:02:00 【richest_qi】
前情提要
微信小程序中使用 wx.showToast()
显示消息提示框,这个API接收一个对象作为参数,该对象包含以下属性:
title
,提示的内容,必填项。icon
,显示的图标,非必填项,有以下四个可选值,其中默认值是success
。success
,成功图标,此时title文本最多显示7个汉字。error
,失败图标,此时title文本最多显示7个汉字长度。loading
,加载图标,此时title文本最多显示7个汉字长度。none
,不显示图标,此时title文本最多可显示两行。
image
,自定义图标的本地路径,image的优先级高于icon。duration
,提示的延迟时间。mask
,是否显示透明蒙层(透明蒙层可防止触摸穿透),布尔值,默认是false,即不显示透明蒙层。success
,接口调用成功的回调。fail
,接口调用失败的回调。complete
,接口调用结束(不论成功或失败)的回调。
小程序项目
代码涉及的文件有:
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#0149af",
"navigationBarTitleText": "登录中心",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages/index/index.wxml
<view class="container">
<view class="title">登录</view>
<view class="list">
<view class="item">
<input type="text" data-type="username" bindinput="handleInput" placeholder="用户名" />
</view>
<view class="item">
<input type="text" password data-type="password" bindinput="handleInput" placeholder="密码" />
</view>
</view>
<button size="mini" bindtap="login">登录</button>
</view>
pages/index/index.wxss
.container{
padding: 20rpx;
}
.container .title{
padding: 20rpx 0;
border-bottom: 1px solid #ddd;
font-weight: bold;
font-size: 32rpx;
}
.list{
margin: 40rpx auto 20rpx;
}
.item{
margin: 12rpx 0;
padding: 0 20rpx;
border: 1px solid #ddd;
border-radius: 6rpx;
}
.item input{
width: 100%;
height: 60rpx;
font-size: 28rpx;
}
button{
font-weight: normal;
font-size: 28rpx!important;
color: #fff;
background: #0149af;
}
pages/index/index.js
Page({
data:{
username:"",
password:""
},
handleInput(e){
const type = e.target.dataset.type;
this.setData({
[type]:e.detail.value
})
},
login(){
const {
username,password} = this.data;
if(!username){
wx.showToast({
title: '请输入您的用户名',
icon:'error'
})
return;
}
if(!password){
wx.showToast({
title: '请输入您的密码',
icon:'error'
})
return;
}
wx.showToast({
title: '登录成功'
})
}
})
相关链接
边栏推荐
- Select the product attribute pop-up box to pop up the animation effect from the bottom
- 95后CV工程师晒出工资单,狠补了这个,真香...
- Robot technology innovation and practice old version outline
- Wechat applet full stack development practice Chapter 3 Introduction and use of APIs commonly used in wechat applet development -- 3.9 introduction to network interface (IX) extending the request3 met
- "Xiaodeng in operation and maintenance" meets the compliance requirements of gdpr
- Mutual conversion between InputStream, int, shot, long and byte arrays
- Causes and solutions of oom (memory overflow)
- Blue Bridge Cup Birthday candles (violence)
- 07_ Handout on the essence and practical skills of text measurement and geometric transformation
- Fast quantitative, abbkine protein quantitative kit BCA method is coming!
猜你喜欢
Composition API premise
1090: integer power (multi instance test)
Outlier detection technology of time series data
Detailed explanation of neo4j installation process
[ANSYS] learning experience of APDL finite element analysis
How can a 35 year old programmer build a technological moat?
抽丝剥茧C语言(高阶)指针进阶练习
Kuboard can't send email and nail alarm problem is solved
Non empty verification of collection in SQL
Le Service MySQL manque dans le service informatique
随机推荐
【Liunx】进程控制和父子进程
弹性布局(二)
Make a bat file for cleaning system garbage
基于Flask搭建个人网站
Differences between H5 architecture and native architecture
Sqlmap tutorial (IV) practical skills three: bypass the firewall
About some details of final, I have something to say - learn about final CSDN creation clock out from the memory model
How to reduce inventory with high concurrency on the Internet
二、并发、测试笔记 青训营笔记
Summary of customer value model (RFM) technology for data analysis
Music | cat and mouse -- classic not only plot
Leetcode-543. Diameter of Binary Tree
Leetcode-226. Invert Binary Tree
Implementing data dictionary with JSP custom tag
Détailler le bleu dans les tâches de traduction automatique
Outsourcing for four years, abandoned
软件验收测试
URP - shaders and materials - light shader lit
Kuboard无法发送邮件和钉钉告警问题解决
ASEMI整流桥RS210参数,RS210规格,RS210封装