文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序实现弹出输入框

2023-09-18 13:45

关注

微信自带组件

样式:

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯