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

微信小程序开发经验总结

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

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