In small programs, you often encounter a box that pops up from the bottom by clicking, and the box is at the bottom. Assuming that multiple pages need to use this special effect, it is recommended to write a custom component. (Personal suggestion!!!) . Look directly at the design effect:
similar to the effect of this situation: click the button to pop up a box to display the corresponding information. There are many kinds of information in the box, so I made a slot here, and the usage is similar to that of vue slot.
bottomDialog.js
Component({
/**
* 组件的属性列表
*/
/**
*注：这里需要启用插槽
*/
options: {
multipleSlots: true
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
showModal() {
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(()=>{
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}, 200)
},
//隐藏对话框
hideModal() {
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(()=> {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}, 200)
}
}
})
bottomDialog.json
{
"components": true
}
bottomDialog.wxml
<view class="commodity_screen" bindtap="hideModal" wx:if="{
{showModalStatus}}"></view>
<view animation="{
{animationData}}" class="commodity_attr_box" wx:if="{
{showModalStatus}}">
<slot name="content"></slot>
</view>
bottomDialog.wxss
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.6;
overflow: hidden;
z-index: 1000;
color: #fff;
}
/*对话框 */
.commodity_attr_box {
height:auto;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 20rpx;
}
This completes the custom bullet frame component. Use custom components:
父组件中
引入自定义组件
"usingComponents": {
"bottomDialog":"/pages/common/bottomDialog/bottomDialog"
}
使用组件
<bottomDialog id="dialog">
//自定义组件
<view slot="content">
<text class='evaluate-title'>出示以下卡片给加油员记账</text>
<view class='evaluate-sep'></view>
<view class="padding70 card-img-img"><image src="{
{imgUrl}}"></image></view>
</view>
</bottomDialog>
调用子组件方法=>弹起
showDialog(){
this.selectComponent('#dialog').showModal()
}
Get it done! If you don’t understand, you can chat with me privately.
My WeChat: huang009516