微信自带组件
样式:
wxml
拒绝
js
Page({ //拒绝 close(e) { wx.showModal({ editable:true,//显示输入框 placeholderText:'输入拒绝原因',//显示输入框提示信息 success: res => { if (res.confirm) { //点击了确认 console.log(res.content)//用户输入的值 } else { console.log('用户点击了取消') } } }) },})
详见:wx.showModal(Object object) | 微信开放文档
自定义组件
样式:
wxml
拒绝 取消 确定
wxss
.toast-box { width: 100%; height: 100%; opacity: 1; position: fixed; top: 0px; left: 0px;}.toastbg { opacity: 0.5; background-color: black; position: absolute; width: 100%; min-height: 100vh;}.showToast { position: absolute; opacity: 1; width: 80%; margin-left: 10%; margin-top: 70%;}.toast-main { padding-top: 2vh; padding-bottom: 2vh; background-color: white; text-align: center; border-top-left-radius: 16rpx; border-top-right-radius: 16rpx;}.toast-input { margin-left: 5%; margin-right: 5%; margin-top:10%; margin-bottom:10%; background-color: rgb(240, 240, 240); padding-left: 2vh; padding-right: 2vh; padding-top: 1vh; padding-bottom: 1vh;}.toast-input input{ background-color: rgb(240, 240, 240);}.toast-button { display: flex; background-color: white; height:50px; width:100%; border-radius: 0px; border-bottom-left-radius: 16rpx; border-bottom-right-radius: 16rpx; border-top:1px solid rgb(211, 211, 211);}.button1 { width: 50%; display: flex; align-items: center; justify-content: center; border-radius: 0px; border-bottom-left-radius: 16rpx;}.button2 { width: 50%; border-left:1px solid rgb(211, 211, 211); display: flex; align-items: center; justify-content: center; color:#40A4D6;}
js
Page({ data: { isShowConfirm:false }, //输入框中的值 setValue: function (e) { this.setData({ walletPsd: e.detail.value }) }, //点击取消按钮 cancel: function () { var that = this that.setData({ isShowConfirm: false, }) }, //点击确认按钮 confirmAcceptance:function(){ var that = this that.setData({ isShowConfirm: false, }) }, //拒绝 close(e) { this.setData({ isShowConfirm: true, }) },})
多文本框
样式:
wxml
修改 修改信息 确定
wxss
.drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden;}.animation_position{ display: flex; width:100%; justify-content: center;}.drawer_box{ overflow: hidden; position: fixed; bottom:90px; z-index: 1001; background: #FAFAFA; border-radius: 3px; width: 90%;}.drawer_title { padding: 15px; font: 20px "microsoft yahei"; text-align: center;}.drawer_content { overflow-y: scroll; }.btn_ok { margin-top:5%; padding: 10px; font: 20px "microsoft yahei"; text-align: center; border-top: 1px solid #E8E8EA; color: #40A4D6;}.bottom { padding-bottom: 8px;}.title { display: flex; align-items: center; justify-content: center; width: 25%; margin:5% 0 0 0; border-bottom: 2rpx solid #ccc;}.input_base { width:75%; margin:5% 0 0 0; padding-left:5%; border-bottom: 2rpx solid #ccc;}input { font: 15px "microsoft yahei"; background: #fff; color: #000;}.grid { display: flex; margin:20px;}
js
const app = getApp()let id = ''let name = ''let phone = ''let product = ''let type = ''let address = ''let description = ''Page({ data: { showModalStatus: false, }, //信息修改 //获取用户输入信息 name(event) { //获取报修人员姓名 name = event.detail.value console.log("name", name) }, phone(event) { //获取手机号 phone = event.detail.value console.log("phone", phone) }, product(event) { //维修产品 product = event.detail.value console.log("produc", product) }, type(event) { //故障类型 type = event.detail.value console.log("type", type) }, address(event) { //地址 address = event.detail.value console.log("address", address) }, description(event) { //描述 description = event.detail.value console.log("description", description) }, update: function (e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function (currentStatu) { // 第1步:创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: "linear", //线性 delay: 0 //0则不延迟 }); // 第2步:这个动画实例赋给当前的动画实例 this.animation = animation; // 第3步:执行第一组动画 animation.opacity(0).rotateX(-100).step(); // 第4步:导出动画对象赋给数据对象储存 this.setData({ animationData: animation.export() }) // 第5步:设置定时器到指定时候后,执行第二组动画 setTimeout(function () { // 执行第二组动画 animation.opacity(1).rotateX(0).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 this.setData({ animationData: animation }) //关闭 if (currentStatu == "close") { this.setData({ showModalStatus: false }); } }.bind(this), 200) // 显示 if (currentStatu == "open") { this.setData({ showModalStatus: true }); } },})
来源地址:https://blog.csdn.net/weixin_46001736/article/details/127651754