WeChat アプレットで showmodal ポップアップ ボックスをカスタマイズする方法 (コード付き)

不言
リリース: 2018-08-10 14:11:44
オリジナル
7119 人が閲覧しました

この記事の内容は、WeChat アプレットの showmodal ポップアップ ボックスをカスタマイズする方法 (コード付き) です。必要な友人が参考になれば幸いです。

最近、バグの修正と新機能の追加で忙しくて、長い間まとめていなかったのですが、まずカスタムの showmodal ボックスを書きましょう

コードに直接進みます

wxml 部分






{{uservip}}
享受以下会员权益

{{vipinfo}}



ログイン後にコピー

wxss 部分

.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 550rpx;
height: 520rpx;
position: fixed;
top: 25%;
z-index: 9999;
margin: 0rpx 100rpx 185rpx 100rpx;
background-color: #fff;
border-radius: 36rpx;
display: flex;
flex-direction: column;
align-items: center;
}
ログイン後にコピー

ここで、mask はマスク レイヤー スタイルです

modalDlg はポップアップ コンテナ スタイルです

残りは非常にカジュアルで、好きなものを書くことができます。

.img_wrap{
width: 130rpx;
height: 130rpx;
background: white;
border-radius:50%;
border:1px solid #0097ff;
margin: 0rpx auto;
position: absolute;
top: -65rpx;
margin-bottom: 30rpx;
}
.img_wrap image{
width: 100rpx;
height: 100rpx;
padding-top:15rpx;
padding-left:15rpx;
margin: 0rpx auto;
}
.useralert_huiyuan
{
font-size: 13px;
margin-top: 100rpx;
}
.useralert_quanyi
{
font-size: 13px;
color: darkgray;
}
.fenggexian{
width: 100%;
margin-top: 50rpx;
border-bottom:1px solid #e8e8e8;
}
.vipinfo{
margin-top: 30rpx;
color: #6698ff;
font-size: 11px;
}
 
.shutalert{
width: 110rpx;
margin: 0rpx auto
}
.shutalert image{
width: 100rpx;
height: 100rpx;
position: absolute;
bottom: -120rpx;
}
ログイン後にコピー

このうち、maskはマスクレイヤースタイルです

modalDlgはポップアップコンテナスタイルです

他はとてもカジュアルで、好きなように書いて大丈夫です。

js 部分

data[] で showModal を定義します: false 初期値は false である必要があります

スイッチを制御する 2 つの別個のメソッドを書きましたが、これは比較的厳格なので、

submit: function() {
this.setData({
showModal: true
})
},
go: function() {
this.setData({
showModal: false
})
},
ログイン後にコピー

より直接的なメソッドがあります

1 つのメソッドでスイッチを制御することも、マスク レイヤーをクリックして閉じるために使用することもできます

データ内に showalert を定義します: false

メソッド:

alert: function() {
var that= this;
this.setData({
showalert: !that.data.showalert
})
},
ログイン後にコピー

ポップアップ ボックスをカスタマイズして自由に使用してください

関連する推奨事項:

WeChat アプレットで多層ネストされたループを使用してリスト レンダリングを実装する方法

WeChat アプレットで Canvas API を使用して、ポスター生成コンポーネントパッケージを合成します

WeChatアプレット WebViewページを更新する3つの方法

以上がWeChat アプレットで showmodal ポップアップ ボックスをカスタマイズする方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!