脚本宝典收集整理的这篇文章主要介绍了

微信小程序自定义弹窗/弹出层功能,非官方api,自写

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

图片描述

index.wxml

<!--index.wxml-->
<!-- 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModal}}">
<!-- 二维码或其他图片 -->
    <image src="../images/gzhewm.png"/>
    <text class="text">这里是文本描述,可以查看css修改样式</text>
    <view bindtap="ok" class="ok">好的</view>
</view>
<view bindtap="btn" class="btn">弹窗</view>

index.wxss

/**index.wxss**/
/* 外面的按钮 */
.btn{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px; 
}

/* 遮罩层 */
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.5;
}
 
/* 弹出层 */
.modalDlg{
    width: 70%;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 9999;
    margin: 0 auto;
    background-color: #fff;
    border-radius:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 弹出层里面的图片 */
.modalDlg image{
  width: 120px;
  height: 120px;
  margin-top: 30px;
}

/* 弹出层里面的按钮 */
.ok{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px;
}

/* 弹出层里面的文字 */
.text{
  text-align: justify;
  font-size: 14px;
  color: #666;
  width: 180px;
  margin-top: 10px;
}

index.js

Page({
  data: {
    showModal: false
  },

  // 外面的弹窗
  btn: function () {
    this.setData({
      showModal: true
    })
  },

  // 禁止屏幕滚动
  preventTouchMove: function () {
  },

  // 弹出层里面的弹窗
  ok: function () {
    this.setData({
      showModal: false
    })
  }

})

TANKING
2018-10-7
HTTP://LIKEYUNBA.COM

总结

以上是脚本宝典为你收集整理的

微信小程序自定义弹窗/弹出层功能,非官方api,自写

全部内容,希望文章能够帮你解决

微信小程序自定义弹窗/弹出层功能,非官方api,自写

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过