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的执行任务放回任务队列的后面,等待执行。

  • 相关阅读:
    [问题2014A05] 复旦高等代数 I(14级)每周一题(第七教学周)
    oracle的相关信息
    进程和线程的区别
    阿里云人脸检测定位
    php与oracle11g经典分页
    Linux 远程复制
    redis的相关信息
    教你编译PHP7 (nginx+mysql+php7)
    nginx的相关信息
    php about session store db or cache
  • 原文地址:https://www.cnblogs.com/xiaoxiao666/p/6443904.html
Copyright © 2011-2022 走看看