wxml 底部弹出选择框 带取消和确定按钮
时间: 2023-09-01 16:01:59 浏览: 68
在微信小程序中,可以通过自定义一个底部弹出选择框来实现带有取消和确定按钮的功能。
首先,创建一个wxml文件,命名为"bottom_dialog.wxml"。在该文件中,可以使用`<view>`标签来实现底部弹出选择框的整体布局。例如:
```xml
<!-- bottom_dialog.wxml -->
<view class="dialog-container">
<!-- 选择框内容 -->
<view class="dialog-content">
<!-- 添加选择项 -->
<view class="option-item">选项1</view>
<view class="option-item">选项2</view>
<view class="option-item">选项3</view>
</view>
<!-- 底部按钮 -->
<view class="dialog-footer">
<view class="cancel-btn">取消</view>
<view class="confirm-btn">确定</view>
</view>
</view>
```
接下来,在对应的wxss文件(如"bottom_dialog.wxss")中为底部弹出选择框进行样式设置,例如:
```css
/* bottom_dialog.wxss */
.dialog-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
}
.dialog-content {
padding: 10px;
}
.option-item {
padding: 10px 0;
border-bottom: 1px solid #eee;
text-align: center;
}
.dialog-footer {
display: flex;
justify-content: space-between;
padding: 10px;
}
.cancel-btn, .confirm-btn {
width: 100px;
padding: 6px 0;
text-align: center;
background-color: #eee;
}
.confirm-btn {
background-color: #007aff;
color: #fff;
}
```
最后,在业务逻辑的js文件中使用`wx.showModal`方法来控制底部弹出选择框的显示与隐藏。例如:
```javascript
// dialog.js
Page({
showModal() {
wx.showModal({
title: '底部选择框',
content: '',
showCancel: false,
cancelText: '取消',
confirmText: '确定',
success(res) {
if (res.confirm) {
// 用户点击确定按钮的逻辑处理
console.log('用户点击确定');
} else if (res.cancel) {
// 用户点击取消按钮的逻辑处理
console.log('用户点击取消');
}
}
})
}
})
```
通过上述步骤,就可以在小程序中实现带有取消和确定按钮的底部弹出选择框。