zoukankan      html  css  js  c++  java
  • 微信小程序自定义弹窗

    首先wxml代码:

    <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view>
    <view bindtap="clickArea">点击此处</view>  

    注:hidden属性用于切换比较频繁的地方。

    wxss代码设置弹窗样式:

    .myToast{
      240rpx;
      height:130rpx;
      line-height: 130rpx;
      margin:80rpx 35%;
      border-radius:20rpx;
      background-color: rgb(114,113,113);
      color:rgb(255,255,255);
      font-size: 36rpx;
      text-align: center;
      position: absolute;
      z-index: 100;
      opacity: 0.85;
    }

    js:

    Page({
    
     data:{
        nullHouse:true,  //先设置隐藏
            },
     onLoad:function(options){
         // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      },
     clickArea:function(){
       var that = this;
       this.setData({
        nullHouse:false, //弹窗显示
        }) 
       setTimeout(function(){
        that.data.nullHouse = true, //1秒之后弹窗隐藏
         },1000)
      },
    })

     :setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。

  • 相关阅读:
    Apache基本设置
    主流无线传输技术GPRS与CDMA之对比
    光波分复用系统(WDM)技术要求
    IPv6报头结构以及与IPv4的比较
    网络设计师训练资料
    802.11b/11a/11g横向比较
    交换机术语
    无线局域网技术白皮书
    无线网络基础知识
    校验码
  • 原文地址:https://www.cnblogs.com/xiaoxiao666/p/6443904.html
Copyright © 2011-2022 走看看