• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 微信小程序自定义标签属怎么设置?

微信小程序自定义标签属怎么设置?

时间:2023-07-01 14:05 阅读数:103 人阅读 分类:知识百科

  微信小程序一旦可以自定义,那小程序功能的实现就可以多样化了,比如微信小程序自定义标签属*的开发,就能满足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();

  }

  })

  以上就是微信小程序自定义标签属*开发和设置的相关代码,参照这个代码,实现小程序自定义功能,你会发现原来开发小程序是一件很简单的事情,快去试试吧!更多相关教程和开发小程序技术请关注微信小程序商店。

  

  微信小程序自定义的模态对话框怎么实现?

  自定义菜单小程序路径是什么?有什么用?

  微信小程序自定义控件效果怎么实现?