iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现弹出框提交信息
  • 537
分享到

微信小程序实现弹出框提交信息

2024-04-02 19:04:59 537人浏览 泡泡鱼
摘要

本文实例为大家分享了微信小程序实现弹出框提交信息的具体代码,供大家参考,具体内容如下 <view class="navSm" bindtap="toolNo">    

本文实例为大家分享了微信小程序实现弹出框提交信息的具体代码,供大家参考,具体内容如下

<view class="navSm" bindtap="toolNo">
      <image src="../../images/idx4.png" class="mavimg" mode="aspectFit"></image>
      <view class="fonts1">出租信息</view>
    </view>
<view class="mask" wx:if="{{showModalStatus}}" bindtap="colse"></view>
<view class="drawerBox" wx:if="{{showModalStatus}}">
  <image class="close" src="../../images/close.png" bindtap="colse"></image>
  <view class="tits">该功能尚未开发,请留下您的需求,我们会尽快处理</view>
  <view class="phonebox">
    <input class="inputA" type="number" name="mobile" placeholder="请获取" value="{{mobile}}" style="display:block;"
      placeholder-class="placeholder-class" disabled="true" />
    <button open-type="getPhoneNumber" wx:if="{{isshow}}" class="getphone"
      bindgetphonenumber="getPhoneNumber">获取手机号</button>
  </view>
  <view class="area">
    <textarea bindinput="bindinput" placeholder="请输入建议反馈" style="height:320rpx"
      placeholder-class="placeholder-class " />
    </view>
  <view class="btn btn1" bindtap="submit">确认</view>
</view>
data: {
    showModalStatus: false,
  },
  toolNo: utils.throttle(function () {
    this.setData({
      showModalStatus: true
    })
  }),
  // 关闭弹窗
  colse() {
    this.setData({
      showModalStatus: false,
    })
  },
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #fff;
  opacity: 0.8;
  overflow: hidden;
}
.drawerBox {
  width: 630rpx;
  height: auto;
  line-height: 40rpx;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
  padding: 40rpx;
  box-sizing: border-box;
  margin-left: 60rpx;
  position: fixed;
  top: 28%;
  left: 0;
  z-index: 1001;
  background-color: #fff;
}

.close {
  width: 42rpx;
  height: 42rpx;
  float: right;
  overflow: hidden;
}
.tits {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  margin: 60rpx 0 40rpx 0;
  line-height: 50rpx;
}

.phonebox {
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
}

.inputA {
  width: 550rpx;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 60rpx;
  background-color: rgba(255, 255, 255, 100);
  text-align: left;
  border: 1px solid rgba(230, 230, 230, 100);
}

.getphone {
  width: 200rpx;
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 60rpx;
  background-color: rgba(156, 148, 171, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  text-align: center;
  margin-left: -220rpx;
  margin-top: 20rpx;
  z-index: 999;
}

.area {
  width: 550rpx;
  line-height: 40rpx;
  border-radius: 40rpx;
  height: 320rpx;
  border: 1px solid rgba(230, 230, 230, 100);
  text-align: left;
  padding: 30rpx;
  box-sizing: border-box;
  margin-bottom: 40rpx;
}

textarea {
  width: 100%;
  text-align: left;
  line-height: 40rpx;
  font-size: 14px;
}

.btn {
  width: 550rpx;
  margin-bottom: 0;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 30rpx;
  background-color: #200E32;
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 100);
  margin-top: 20rpx;
}

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

--结束END--

本文标题: 微信小程序实现弹出框提交信息

本文链接: https://www.lsjlt.com/news/153689.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现弹出框提交信息
    本文实例为大家分享了微信小程序实现弹出框提交信息的具体代码,供大家参考,具体内容如下 <view class="navSm" bindtap="toolNo">     ...
    99+
    2022-11-13
  • 微信小程序实现底部弹出框封装
    本文实例为大家分享了微信小程序底部弹出框封装的具体代码,供大家参考,具体内容如下 <!--index.wxml--> <view>   <butto...
    99+
    2022-11-13
  • 如何实现微信小程序中几种常见的弹框提示信息
    这篇文章给大家分享的是有关如何实现微信小程序中几种常见的弹框提示信息的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、模态窗口 delete(){  &nbs...
    99+
    2022-10-19
  • 实现微信小程序中的模态框弹出效果
    实现微信小程序中的模态框弹出效果,需要具体代码示例现在的移动互联网时代,微信小程序已经成为了人们生活中不可或缺的一部分。在微信小程序的开发过程中,我们经常会遇到需要弹出模态框的需求。模态框可以用来展示一些提示信息、确认对话框等内容,给用户更...
    99+
    2023-11-21
    微信小程序 模态框 弹出效果
  • 微信小程序实现点击出现弹窗
    本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码,供大家参考,具体内容如下 1.现在page文件里面定义一个dh的文件,然后在component定义一个可复用的组件为disl...
    99+
    2022-11-13
  • Android实现信息弹出框
    本文实例为大家分享了Android实现信息弹出框的具体代码,供大家参考,具体内容如下 layout下的dialog_common_layout.xml <?xml ...
    99+
    2022-11-12
  • 微信小程序实现简单弹框效果
    本文实例为大家分享了微信小程序实现简单弹框的具体代码,供大家参考,具体内容如下 1、页面结构 <!-- 遮罩层 --> <view>     <view...
    99+
    2022-11-13
  • 微信小程序如何实现弹框和模态框
    小编给大家分享一下微信小程序如何实现弹框和模态框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!微信小程序 弹框和模态框实现代码实...
    99+
    2022-10-19
  • 如何使用微信小程序开发弹出框
    小编给大家分享一下如何使用微信小程序开发弹出框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!view class=&q...
    99+
    2022-10-19
  • 微信小程序的消息框如何实现
    这篇文章主要讲解了“微信小程序的消息框如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序的消息框如何实现”吧!wxml<import src="/dist/to...
    99+
    2023-06-26
  • 微信小程序自定义可滚动的弹出框
    本文实例为大家分享了微信小程序自定义可滚动弹出框的具体代码,供大家参考,具体内容如下 最近在写一个装修的活动,规则是点击按钮弹出加上相应的动画。 首先我们需要一个按钮触发显示(如图,...
    99+
    2022-11-13
  • 微信小程序自定义Dialog弹框
    本文实例为大家分享了微信小程序自定义Dialog弹框的具体代码,供大家参考,具体内容如下 一、创建组件 1、在根目录下自定义一个components文件夹,用来存放自定义的组件。2...
    99+
    2022-11-13
  • 微信小程序自定义Modal弹框
    本文实例为大家分享了微信小程序自定义Modal弹框的具体代码,供大家参考,具体内容如下 一、创建组件 1、在根目录下自定义一个components文件夹,用来存放自定义的组件。2、...
    99+
    2022-11-13
  • 微信小程序如何实现自定义Toast弹框
    小编给大家分享一下微信小程序如何实现自定义Toast弹框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先来看一下效果图: 怎么用...
    99+
    2022-10-19
  • 微信小程序怎么实现简单弹框效果
    这篇文章主要介绍“微信小程序怎么实现简单弹框效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现简单弹框效果”文章能帮助大家解决问题。页面结构<!-- 遮罩层&nbs...
    99+
    2023-07-02
  • 微信小程序弹框功能代码如何实现
    本篇内容介绍了“微信小程序弹框功能代码如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!提示框:wx.showToast实例:wx:sh...
    99+
    2023-06-26
  • 微信小程序实现底部弹窗
    本文实例为大家分享了微信小程序实现底部弹窗的具体代码,供大家参考,具体内容如下              &nb...
    99+
    2022-11-13
  • 微信小程序实现弹球游戏
    本文实例为大家分享了微信小程序实现弹球游戏的具体代码,供大家参考,具体内容如下 实验内容: 小球按照随机的角度直线运动,如果碰到四壁则反弹。你们不需要做游戏计时、设置小球及背景颜色等...
    99+
    2022-11-13
  • 微信小程序自定义弹框效果
    本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!-- 取消订单按钮 --> <view class="cancelB...
    99+
    2022-11-13
  • 微信小程序实现弹出层禁止页面滚动
    本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码,供大家参考,具体内容如下 效果图 是否随页面滚动 catchtouchmove true开启 return关闭 .w...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作