微信小程序自定义标签属怎么设置?
微信小程序一旦可以自定义,那小程序功能的实现就可以多样化了,比如微信小程序自定义标签属*的开发,就能满足toast图标的隐藏效果,那么微信小程序自定义标签属*怎么设置呢?
当微信小程序自定义标签属*执行成功的时候,效果如下图:
但是,当执行失败的时候,如下图:
失败了,你还显示个扣扣图案,那到底是成功还是失败??这肯定是不能接受的。
若是给老板看到这种小程序自定义效果,又是一顿臭骂
微信小程序自定义标签属*具体实现:
wxml:
button
{{toastText}}
wxss:
Page {
background: #fff;
}
/*按钮*/
.btn {
font-size: 28rpx;
padding: 15rpx 30rpx;
width: 100rpx;
margin: 20rpx;
text-align: center;
border-radius: 10rpx;
border: 1px solid #000;
}
/*mask*/
.toast_mask {
opacity: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 888;
}
/*toast*/
.toast_content_box {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: fixed;
z-index: 999;
}
.toast_content {
width: 50%;
padding: 20rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
}
.toast_content_text {
height: 100%;
width: 100%;
color: #fff;
font-size: 28rpx;
text-align: center;
}
js:
Page({
data: {
//toast默认不显示
isShowToast: false
},
showToast: function () {
var _this = this;
// toast时间
_this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
// 显示toast
_this.setData({
isShowToast: true,
});
// 定时器关闭
setTimeout(function () {
_this.setData({
isShowToast: false
});
}, _this.data.count);
},
/* 点击按钮 */
clickBtn: function () {
console.log("你点击了按钮")
//设置toast时间,toast内容
this.setData({
count: 1500,
toastText: 'Michael’s Toast'
});
this.showToast();
}
})
以上就是微信小程序自定义标签属*开发和设置的相关代码,参照这个代码,实现小程序自定义功能,你会发现原来开发小程序是一件很简单的事情,快去试试吧!更多相关教程和开发小程序技术请关注微信小程序商店。
微信小程序自定义的模态对话框怎么实现?
自定义菜单小程序路径是什么?有什么用?
微信小程序自定义控件效果怎么实现?
