资讯专栏INFORMATION COLUMN

微信小程序实现简单弹框具体代码

3403771864 / 761人阅读

  本篇文章就是为大家分享在微信小程序实现简单弹框的具体代码,现在我们看下:

       1、页面结构

</>复制代码

  1.   <!-- 遮罩层 -->
  2.   <view>
  3.   <view class="mask" bindtap="close" wx:if="{{ showModal }}"></view>
  4.   <view class="modal" wx:if="{{ showModal }}">
  5.   <view class="dialog">
  6.   <view class="dialog-head">
  7.   <h3>发送短信</h3>
  8.   </view>
  9.   </view>
  10.   <view class="section section_gap">
  11.   <radio-group class="radio-group" bindchange="radioChange">
  12.   <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
  13.   <text>{{item.value}}</text>
  14.   </radio>
  15.   </radio-group>
  16.   </view>
  17.   <view>
  18.   <textarea class="textarea w100" placeholder="短信内容" maxlength="-1" v-model="params.bz"></textarea>
  19.   </view>
  20.   <view class="btnFlex">
  21.   <view>
  22.   <button class="btn" bindtap="close">取消</button>
  23.   </view>
  24.   <view>
  25.   <button class="btn" bindtap="go">发送</button>
  26.   </view>
  27.   </view>
  28.   </view>
  29.   </view>

  2、页面样式

</>复制代码

  1.   .btn{
  2.   color: #fff;
  3.   font-size: 31rpx;
  4.   background-color: #f95137;
  5.   margin: 11rpx 20rpx 0rpx;
  6.   border-radius: 45rpx;
  7.   width: 215rpx;
  8.   height: 81rpx;
  9.   line-height: 81rpx;
  10.   /* padding-left: ; */
  11.   }
  12.   .btnFlex{
  13.   display: flex;
  14.   justify-content: center;
  15.   align-items: center;
  16.   margin-top: 50rpx;
  17.   }
  18.   .dialog-head{
  19.   font-size: 33rpx;
  20.   color: #172238;
  21.   font-weight: bold;
  22.   display: flex;
  23.   align-items: center;
  24.   padding: 20rpx;
  25.   border-bottom: 1rpx solid #e1e5e9;
  26.   }
  27.   /* 文本域 */
  28.   .textarea {
  29.   width: 92%;
  30.   height: 246rpx;
  31.   margin: 20rpx 30rpx;
  32.   margin-top: 20rpx;
  33.   padding: 20rpx;
  34.   border-radius: 6rpx;
  35.   border: solid 1rpx #e7eaf0;
  36.   background-color: #f4f6f9;
  37.   }
  38.   .radio {
  39.   width: 33%
  40.   }
  41.   .section_gap {
  42.   margin: 20rpx 30rpx;
  43.   }

  3、js 

</>复制代码

  1.  Page({
  2.   /**
  3.   * 页面的初始数据
  4.   */
  5.   data: {
  6.   showModal: false,
  7.   items: [
  8.   { name'USA', value: '刘禅' },
  9.   { name'CHN', value: '刘备', checked: 'true' },
  10.   { name'BRA', value: '诸葛亮' },
  11.   { name'JPN', value: '关羽' },
  12.   { name'ENG', value: '赵云' },
  13.   { name'FRA', value: '张子龙' },
  14.   ]
  15.   },
  16.   //给自定义button或者自定义view添加一个点击事件跳转,这里的html就不给出来了
  17.   signinTap: function(e{
  18.   this.setData({
  19.   showModal: true,
  20.   })
  21.   //具体调用接口省略***
  22.   },
  23.   // 发送
  24.   go() {
  25.   this.setData({
  26.   showModal: false
  27.   })
  28.   //具体调用接口省略***
  29.   },
  30.   //取消
  31.   close() {
  32.   this.setData({
  33.   showModal: false
  34.   })
  35.   // this.showModal = false;
  36.   },

  实战项目图片

  很多经验都是靠项目积累的,因此,我们要逐渐积累自己的。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/128434.html

相关文章

  • 信小程序中创建属于自己的个性弹框

    摘要:于是我自己写一个我的页面专用的弹框,具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层,就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式 微信小程序提供的弹框模版就3种:1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

    luck 评论0 收藏0
  • 信小程序中创建属于自己的个性弹框

    摘要:于是我自己写一个我的页面专用的弹框,具体效果如下图以下是代码贴图最外层的样式主要是写后面的遮罩层,就是具体的弹框区域弹框的显示隐藏用控制然后就可以在弹框中写自己想要展示的效果啦忽略部分未调整样式 微信小程序提供的弹框模版就3种:1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);对应的效果是这样的 show...

    yy13818512006 评论0 收藏0
  • 信小程序 禁止弹框底部内容滑动

    摘要:网友们的方法网友们有人使用的方式是给绑定一个空方法。这也是一个解决方法。友情提醒关于不能滚动的这个效果需要在真机上面查看,在编辑器上面看不到效果。本文首发于公众号前端的极致实现。欢迎小可爱们来交流加我微信拉大家进群 我们需要解决的问题:当弹框显示的时候,弹框下面的内容不能滚动 小程序的弹框特别多,像下面这样,弹框的底部是一个可以下拉的页面,但是当弹框出现的时候,需要禁止底部的滚动,那么...

    terro 评论0 收藏0
  • 「轻算账」小程序实践笔记

    摘要:资源开发文档是一套完全免费的微信小程序开发框架,扩展了小程序的能力。推荐有一些不错的解决方案封装封装跨页面事件通讯监听数据变化开发如何在微信小程序的页面间传递数据需要时可以快速过一遍。微信小程序回调,,,的使用例子供参考 这篇文章主要记录我做小程序「轻算账」过程中遇到的一些问题和解决方案,就当是做个总结,也希望其中有能够帮助到他人的信息。 showImg(https://segment...

    BigTomato 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<