WeChat アプレットのポップアップ ウィンドウのカスタム コード

この記事では主に、WeChat ミニ プログラム ポップアップ ウィンドウのカスタマイズされたサンプル コードに関する関連情報を紹介します。開発プロジェクトを行う際、お客様のニーズに応じて元のシステムのコンポーネントを変更する必要がある場合があります。必要に応じて、ミニ プログラムのポップアップ ウィンドウを友達が参照できます

最初の wxml コード:

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

注:

hidden 属性は頻繁な切り替えに使用されます。場所。

wxss コード設定ポップアップ ウィンドウ スタイル:

.myToast{
 width: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 、これtask 最初に一時停止して保存し、その後の未完了のタスクを継続して実行します。条件が満たされると、setTimeout の実行タスクはタスク キューの最後尾に戻され、実行を待ちます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat アプレットのメッセージ プロンプト ボックスの実装

WeChat アプレットがプレースホルダー プロンプト テキストとボタンの選択/キャンセル状態を動的に設定するメソッド

以上がWeChat アプレットのポップアップ ウィンドウのカスタム コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。