专注WEB开发 分享经验,沉淀知识

小程序如何自定义模态弹窗

 作者:chenxing  时间:2017-05-15 09:08  阅读:2073  评论:

我们知道微信小程序提供的模态框showModal,内容是比较固定的,更多是作为提示信息存在的。对于向模态框中添加比较丰富的内容(html,表单等),那么小程序的这个api是无能为力的。

今天继续分享小程序开发之————小程序如何自定义模态弹窗?

先看一张效果图

微信小程序自定义模态框

我们知道微信小程序提供的模态框showModal,内容是比较固定的,更多是作为提示信息存在的。对于向模态框中添加比较丰富的内容(html,表单等),那么小程序的这个api是无能为力的。

该如何实现上面效果图呈现的模态框。

wxml文件部分代码:

<view class="container">
    <view class="content">
        .....//body内容
    </view>
    <view class="modal {{showAmountModal.showModal}}">
      <form bindsubmit="widthdraws">
        <view class="modal-content">
          <view class="modal-line-box amount-title"><text>提现</text></view>
          <view class="modal-line-box amount-input"><input type="digit" name="amount" bindinput="withdrawTaxFee" value="{{showAmountModal.inputValue}}" placeholder="请输入您要提现的金额" /></view>
          <view class="modal-line-box amount-info">
            <view>当前可提现金额</view>
            <view>
              <text class="amount-style">00.00</text>
              <text> 元</text>
            </view>
          </view>
          <view class="modal-line-box amount-info">
            <view>当日已累计提现</view>
            <view>
              <text class="amount-style">0.00</text>
              <text> 元</text>
            </view>
          </view>
          <view class="modal-line-box amount-info">
            <view>本月已累计提现</view>
            <view>
              <text class="amount-style">0.00</text>
              <text> 元</text>
            </view>
          </view>
          <view class="modal-line-box amount-info">
            <view>本次提现将扣除劳务税</view>
            <view>
              <text class="amount-style">0.00</text>
              <text> 元</text>
            </view>
          </view>
          <view class="modal-line-box amount-info2">
            <view>*根据国家法规当月累计超过800.00元部分将收20%的劳务税</view>
            <view style="text-align:center">(每日提现上限为2000元)</view>
          </view>
          <view class="modal-line-box amount-button">
            <button form-type="submit" size="mini" class="button-color">提现</button>
            <button bindtap="hideAmountModal" size="mini" class="">取消</button>
          </view>
        </view>
        </form>
      </view>
       <view class="mask {{showAmountModal.showMask}}"></view>
</view>

wcss文件部分代码:

.container{
  font-family: "微软雅黑";
  padding: 0rpx 20rpx;
  padding-top: 1px;
}
.content{
    ...//body 部分颜色
}

.modal{
  position: absolute;
  left: 0rpx;
  top: 100rpx;
  z-index: 200;
  width:100%;
}

.modal-content{
  width: 90%;
  height: 900rpx;
  margin: 0 auto;
  background: #fff;
  font-size: 30rpx;
  font-family: "微软雅黑";
  padding: 20rpx;
  border-radius: 5px;
}

.modal-line-box{
  margin: 30rpx 0rpx;
}
.modal-line-box.amount-title{
  text-align: center;
  font-size: 40rpx;
}
.modal-line-box.amount-input{
 margin-bottom: 50rpx;  
}
.modal-line-box.amount-input input{
  border:1px solid #eee;
  height: 70rpx;
  padding-left:20rpx; 
}
.modal-line-box.amount-info{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.modal-line-box.amount-info2{
  text-align: center;
  background: #eee;
  font-size: 23rpx;
  padding: 20rpx;
  border-radius: 5px;
  margin-top: 50rpx;
}
.modal-line-box .amount-style{
  color: #FF617C;
}

.modal-line-box.amount-button{
  margin-top: 50rpx; 
}
.modal-line-box.amount-button button{
  display: block;
  margin:40rpx auto;
  height: 75rpx;
  line-height: 75rpx;
  width: 92%;
  font-size: 30rpx;
}

.mask{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height:100%;
  z-index: 100;
  background:rgba(0,0,0,0.5);
}
.showMask,.showModal{
  display: block;
}
.hideMask,.hideModal{
  display: none;
}

js代码:

//页面显示模态框按钮,绑定的showAmountModal事件,关闭模态框按钮显示hideAmountModal事件
page({
    data:{
        showAmountModal:{
          showModal:'hideModal',
          showMask:'hideMask',
        },
    }
    showAmountModal:function(e){
        var that = this;
        that.setData({
          showAmountModal:{
            showModal:'showModal',
            showMask:'showMask',
          }
        })
      },

      hideAmountModal:function(e){
        var that = this;
        that.setData({
          showAmountModal:{
            showModal:'hideModal',
            showMask:'hideMask',
          },
        })
      },

    })

以上就是小程序自定义模态框生成案例,希望对大家有所帮助。有什么问题可以留言或者去首要加我QQ交流。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/38.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  88

PHP字符串转数组的三种场景

 2018-05-05 01:32  181

PHP如何遍历字符串?

 2018-05-04 00:56  913

api接口常见的安全问题和解决方案

 2018-05-03 23:20  811

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里