微信小程序开发经验总结(七)

来源：互联网发布：公司数据保密协议范本编辑：程序博客网时间：2024/06/03 19:14

微信小程序开发经验总结

微信小程序开发经验总结(一)
微信小程序开发经验总结(二)
微信小程序开发经验总结(三)
微信小程序开发经验总结(四)
微信小程序开发经验总结(五)
微信小程序开发经验总结(六)
微信小程序开发经验总结(七)

16. 自定义控件

toast提示框
微信小程序自定义控件–toast(仿Android)

/*** 显示toast 默认3000ms   */   function showToast(page, toastText2, count2) {  // console.log("toast" + toastText2 + count2);  // toast时间    count2 = parseInt(count2) ? parseInt(count2) : 3000;  page.setData({    //设置toast时间，toast内容      count: count2,    toastText: toastText2,    // 显示toast      isShowToast: true,  });  // 定时器关闭    setTimeout(function () {    page.setData({      isShowToast: false    });  }, count2);}/*** 显示toast 默认1500ms    */   function showToastDefault(page, toastText2) {  this.showToast(page, toastText2, 1500);}module.exports = {  showToast: showToast,  showToastDefault: showToastDefault}<!-- <template name="toast"> --><!--mask 背景-->  <!-- <view class="toast_mask" wx:if="{{isShowToast}}"></view>   --><!--以下为toast显示的内容-->   <view class="toast_content_box" wx:if="{{isShowToast}}">     <view class="toast_content" wx:if="{{isShowToast}}" >      <view class="toast_content_text">        {{toastText}}      </view>    </view>   </view>   <!-- </template> -->    /* 提示框toast *//* mask 背景  */.toast_mask {  opacity: 0;  width: 100%;  height: 100%;  top: 0;  left: 0;  overflow: hidden;  position: fixed;  z-index: 888;}/*toast 盒子*/.toast_content_box {  display: flex;  width: 100%;  /* height: 100%; *//* top: 0; *//* background-color: #f0d; */  bottom: 0;  left: 0;  align-items: center;  position: fixed;  flex-direction: column;  justify-content: center;  z-index: 999;  margin-bottom: 300rpx;}/*toast 内容*/.toast_content {  padding: 12rpx 30rpx;  background: rgba(0, 0, 0, 0.7);  border-radius: 6rpx;  margin-left: 15rpx;  margin-right: 15rpx;}/*toast 内容文字*/.toast_content_text {  height: 100%;  width: 100%;  color: #fff;  font-size: 24rpx;  text-align: center;}

dialog对话框

微信小程序自定义控件–dialog

17. 其他

代码包大小 2M

阅读全文

0 0