Heim > Artikel > Web-Frontend > So realisieren Sie das Popup-Fenster unten auf der Produktdetailseite des WeChat-Applets
Dieses Mal zeige ich Ihnen, wie Sie das Popup-Fenster unten auf der Seite „Produktdetails des WeChat Mini-Programms“ implementieren. Öffnen Sie das Feld unten auf der Produktdetailseite des WeChat Mini-Programms wie folgt: Dies ist ein praktischer Fall, schauen wir ihn uns an. 1.js-Code (normalerweise wird nur die Funktion aufgerufen, die das Dialogfeld anzeigt. Wenn Sie außerhalb des Dialogfelds klicken, kann das Dialogfeld verschwinden)//显示对话框
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隐藏对话框
hideModal: function () {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
}
2.wxss-Code
/*使屏幕变暗 */ .commodity_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } /*对话框 */ .commodity_attr_box { height: 300rpx; width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-top: 20rpx; }
3.wxml-Code (die Variable showModalStatus muss im Datenobjekt im js-Code initialisiert werden, initialisiert auf false, da das Dialogfeld ursprünglich nicht angezeigt wurde)
<!--屏幕背景变暗的背景 --> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <!--弹出框 --> <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">在这里写弹出框里面的布局</view>
Ich glaube, Sie haben das gelesen Fall in diesem Artikel Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie den Filter in VueSo verwenden Sie Vue, um die Klasse von Dom zu bestimmen
Das obige ist der detaillierte Inhalt vonSo realisieren Sie das Popup-Fenster unten auf der Produktdetailseite des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!