微信小程序之自定义toast弹窗「建议收藏」
大家好,又见面了,我是你们的朋友全栈君。
微信小程序里面的自带弹窗icon只有两种,success和loading。有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的;但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了;
第一步:新建一个wxml文件用来装模板,方便以后使用,比如
然后在这里面添加模板代码
<template name="toast"> //name相当于模板的标识,引用的时候好判断引用哪一个
<view class='toast-out' wx:if='{
{isShow}}'> //wx:if是条件渲染,使用这个是为了好判断是否显示或隐藏toast
<view class='toast-in'>
<span class='iconfont {
{iconClass}}'></span> //使用的阿里字体图标,根据传入的class值改变显示的图标
<view class='toast-txt'>
{
{txt}} //需要显示的提醒内容
</view>
</view>
</view>
</template>
第二步:定义toast的样式
.toast-out {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
display: flex; //小程序中多使用flex布局,很方便的
justify-content: center;
align-items: center;
}
.toast-out .toast-in {
min-width: 100px;
background: rgba(0, 0, 0, 0.7);
padding: 6px;
text-align: center;
color: white;
border-radius: 8px;
}
.toast-out .toast-in span {
font-size: 30px;
}
.toast-out .toast-in .toast-txt {
font-size: 14px;
}
第三步:在需要弹窗的页面import那个toast模板页面:
<import src="../../public/html/template.wxml" />
备注:../是指返回上一层目录即父目录,两个../即返回到父目录的父目录。/是根目录,绝对路径。这里也可以使用绝对路径
然后再在这个页面任何地方引用模板
<template is="toast" data="{
{txt,isShow,iconClass}}"></template>
第四步:在引入弹窗页面的js中
在page的data里先定义 isShow:false //默认隐藏的 但是我有点奇怪的是,不定义这个属性,注释掉,都能正常的隐藏与显示。
然后定义一个显示弹窗的函数
toastShow:function(str,icon){
var _this = this;
_this.setData({
isShow: true,
txt: str,
iconClass:icon
});
setTimeout(function () { //toast消失
_this.setData({
isShow: false
});
}, 1500);
}
然后在需要toast弹窗显示的事件里调用该事件就行了,比如:
log_btn:function(){
var name=this.data.userName;if(name==""){
this.toastShow('登录名不能为空',"icon-suo");
}
}
结果:
图标随意弄的。。。
或者是在把弹窗的js写入App({})里面,然后需要用的页面就直接getApp().toastShow()就行了。例如:
App({
toastShow: function (that, str, icon){
that.setData({
isShow: true,
txt: str,
iconClass: icon
});
setTimeout(function () {
that.setData({
isShow: false
});
}, 1500);
},
})
然后在需要引入弹窗的页面:
var app = getApp();
在该页面需要调用的函数中:
his_clear:function(){
app.toastShow(this, "清除成功", "icon-correct");
},
连接:小程序使用阿里字体图标
总结: 和HTML不一样,小程序中wx:if条件渲染就可以实现隐藏与显示的wx:if=”false”就是隐藏,true就是显示。
使用display:flex弹性盒子布局很方便,就比如上面弹窗的水平与垂直居中,只要设置两个属性就可以了。不用再像以前一样还需要设置其它的一堆,以前水平垂直居中的方法
补充:
justify-content 的可选属性有:flex-start(全靠左),flex-end(全靠右),center(居中),space-between,space-around,initial(从父元素继承该属性)
可查看效果:http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start
align-items 的可选属性有:stretch,center,flex-start,flex-end,baseline(处于同一条基线),initial(设置为默认值),inherit(从父元素继承该属性)
可查看效果:http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=baseline
转载于:https://www.cnblogs.com/zjjDaily/p/8031953.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/193092.html原文链接:https://javaforall.cn
相关文章
- 微信小程序一个js文件读取多个接口数据「建议收藏」
- 微信小程序列表点击跳转对应详情页[通俗易懂]
- 微信小程序开发工具基本介绍入门级(备忘)
- 微信小程序官方组件展示之表单组件editor源码
- 微信小程序轮播图调用接口
- 微信小程序—图片色彩分析(拾取图片的配色方案)「建议收藏」
- 微信小程序初见+nodejs服务端 (一个简单的博客)「建议收藏」
- 微信小程序从注册appid到熟悉静态微信特有标签
- 全栈开发之基于云开发实现微信聊天功能
- 【愚公系列】2022年11月 微信小程序-本地生活项目-首页
- 【说站】狼人杀微信娱乐游戏小程序源码
- 【说站】猫狗叫声模拟器微信小程序前端源码
- 【黄啊码】微信小程序小程序仿蚂蚁森林浇水
- 微信小程序转为App并上架应用市场
- 企业微信api接口文档_接口文档示例
- 【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的标题及价格功能实现
- 微信小程序商城高并发解决方案
- 微信小程序和web之间的交互
- 【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
- 微信小程序官方组件展示之开放能力ad源码
- 小程序bindtap传参_微信小程序bindtap
- 火爆全网的ChatGPT智能AI机器人微信小程序源码 (附带部署教程)
- 使用postman模拟微信小程序支付回调
- 微信 "公众平台测试账号" 登陆失败的解决方法与分析
- 傻妞插件-可爱猫对接傻妞微信机器人框架详细教程
- 奥特曼autMan对接BBK-JD扫码登录+微信扫码登录
- 微信小程序中wx.navigateTo , wx.redirectTo , wx.switchTab , wx.navigateBack , wx.reLaunch 的区别 ?
- 微信小程序和App结合的切入点在哪?
- java版+支付宝支付和微信支付(一)详解编程语言
- Linux系统下微信证书快速安装教程(linux微信证书安装)
- 微信小程序:JS 交互逻辑详解编程语言
- Linux开发微信小程序:一种无缝接入的方式(linux微信小程序)