侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序 弹窗输入组件的实现解析

微信(小程序)  /  管理员 发布于 3年前   261

写项目的时候发现小程序没有自带的弹窗输入的组件,只能自己写一个。

1.半透明的遮盖层

遮盖层的样式和显隐事件

wxml代码:

 

wxss代码:

.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0;}

js代码:

 /**  * 页面的初始数据  */ data: {  showModal: false, }, /**  * 控制遮盖层的显示  */ eject:function(){  this.setData({   showModal:true  }) }

2.弹窗窗口实现

弹窗窗口的样式和显隐事件

wxml代码:

   标题      返回           

wxss代码:

.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;}.windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%;}.back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx;}.userTitle{ font-size: 30rpx; color: #666; margin: 30rpx;}.wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx;}.wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx;}.wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx;}.wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0;}

js代码:

/**  * 页面的初始数据  */ data: {  showModal: false,  textV:'' }, /**  * 控制显示  */ eject:function(){  this.setData({   showModal:true  }) }, /**  * 点击返回按钮隐藏  */ back:function(){  this.setData({   showModal:false  }) }, /**  * 获取input输入值  */ wish_put:function(e){  this.setData({   textV:e.detail.value  }) }, /**  * 点击确定按钮获取input值并且关闭弹窗  */ ok:function(){  console.log(this.data.textV)  this.setData({   showModal:false  }) }

3.完整代码

最后献上完整代码,有点铝耍刖×肯晗傅

wxml代码:

    标题      返回           

wxss代码:

.body{ width: 100%; height: 100%; background-color: #fff; position: fixed; display: flex;}.body button{ height: 100rpx;}.model{ position: absolute; width: 100%; height: 100%; background: #000; z-index: 999; opacity: 0.5; top: 0; left:0;}.modalDlg{ width: 70%; position: fixed; top:350rpx; left: 0; right: 0; z-index: 9999; margin: 0 auto; background-color: #fff; border-radius: 10rpx; display: flex; flex-direction: column; align-items: center;}.windowRow{ display: flex; flex-direction: row; justify-content: space-between; height: 110rpx; width: 100%;}.back{ text-align: center; color: #f7a6a2; font-size: 30rpx; margin: 30rpx;}.userTitle{ font-size: 30rpx; color: #666; margin: 30rpx;}.wishName{ width: 100%; justify-content: center; flex-direction: row; display: flex; margin-bottom: 30rpx;}.wish_put{ width: 80%; border: 1px solid; border-radius: 10rpx; padding-left: 10rpx;}.wishbnt{ width: 100%; font-size: 30rpx; margin-bottom: 30rpx;}.wishbnt_bt{ width: 50%; background-color: #f7a6a2; color: #fbf1e8; font-size: 30rpx; border: 0;}

js代码:

Page({ /**  * 页面的初始数据  */ data: {  showModal: false,  textV:'' }, /**  * 控制显示  */ eject:function(){  this.setData({   showModal:true  }) }, /**  * 点击返回按钮隐藏  */ back:function(){  this.setData({   showModal:false  }) }, /**  * 获取input输入值  */ wish_put:function(e){  this.setData({   textV:e.detail.value  }) }, /**  * 点击确定按钮获取input值并且关闭弹窗  */ ok:function(){  console.log(this.data.textV)  this.setData({   showModal:false  }) }})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 微信小程序自定义弹窗实现详解(可通用)
  • 微信小程序日历弹窗选择器代码实例
  • 小程序显示弹窗时禁止下层的内容滚动实现方法
  • 支付宝小程序自定义弹窗dialog插件的实现代码
  • 微信小程序实现自定义picker选择器弹窗内容
  • 微信小程序实现自定义modal弹窗封装的方法
  • 微信小程序实战之自定义模态弹窗(8)


  • 上一条:
    微信小程序 腾讯地图SDK 获取当前地址实现解析
    下一条:
    微信小程序使用npm包的方法步骤
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
    • 在go语言中使用GoPDF包把html生成PDF文件示例(0个评论)
    • 在go语言中创建和解析(读取)符号链接示例(0个评论)
    • ubuntu 22.04系统中报错:Python 3.6 is no longer supported by the Python core team...解决方式(0个评论)
    • Laravel 10.4版本发布(0个评论)
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客