微信小程序弹窗组件使用详解

介绍

最近在开发小程序应用, 发现小程序当中有关于组件的介绍非常的少, 当前自己做的项目当中,有出现过这种情况, 所以自己就封装了一个小程序的弹窗组件, 现在把自己的心得分享给大家, 大家一起来学习吧

效果图

需求背景

项目需求是需要在页面上通过点击按钮, 然后弹出弹窗蒙层; 因为小小程序当中经常会用到弹窗, 因此这里我直接将弹窗封装成了一个组件, 下次使用的时候,直接调用就可以了。

实现步骤

1、在微信小程序当中, 在当前项目当中, 新建一个component文件夹, 这个文件夹专门用来存放我们要使用的组件, 然后在component文件夹下右击, 新建文件夹popup, 这里就是我们要用的弹窗组件的文件夹, 再右击popup文件夹, 选择新建component, 然后直接输入popup即可, 小程序内部会为我们自动生成.wxss , wxml , json , js等模板文件, 如下图所示,popup文件夹下的文件为我们的组件,index文件夹下的文件为首页上页面:

2、popup弹窗组件的代码部分;

popup.wxml

<view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">
  <view class='popup-container'>
    <view class="wx-popup-title">{{title}}</view>
    <!-- <view class="wx-popup-con" >{{content}}</view> -->
    <view class="wx-popup-con" >
      <text>{{content_leftText}}</text>
      <text class="content_money">{{content_money}}</text>
      <text>{{content_rightText}}</text>
    </view>
    <view class="wx-popup-btn">
      <view class="closeBtn">
        <view class="close-popup" bindtap='_close'>
          <view>X</view>
        </view>
      </view>
    </view>
  </view>
</view>

popup.wxss

.wx-popup {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
}
.popup-container {
  position: fixed;
  left: 10%;
  top: 20%;
  width: 80%;
  max-width: 600rpx;
  border-radius: 20rpx;
  box-sizing: bordre-box;
  background: #fff;
  z-index: 2000;
}
.wx-popup-title {
  width: 100%;
  padding: 28rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  border-bottom: 5rpx solid #9EA3BA;
  box-sizing: border-box;
}
.wx-popup-con {
  margin: 50rpx 10rpx;
  text-align: center;
  padding: 0 86rpx;
}
.wx-popup-con text {
  padding-bottom: 10rpx;
}
.content_money {
  color: #FFB258;
}
.wx-popup-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}
.wx-popup-btn text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 88rpx;
  border: 2rpx solid #ccc;
  border-radius: 88rpx;
}
.wx-popup-btn .closeBtn {
  position: fixed;
  left: 45%;
  bottom: 30%;
}
.wx-popup-btn .close-popup {
  position: relative;
  height: 80rpx;
  width: 80rpx;
  border: 5rpx solid #fff;
  border-radius: 50%;
}
 .wx-popup-btn .close-popup view {
   position: absolute;
   left: 30%;
   top: 8%;
   font-size: 50rpx;
   color: #fff;
 }

popup.js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content_leftText: {
      type: String,
      value: '内容'
    },
    content_money: {
      type: String,
      value: '内容'
    },
    content_rightText: {
      type: String,
      value: '内容'
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup () {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * triggerEvent 用于触发事件
    */
    _close() {
      this.triggerEvent("close");
    }
  }
})

3、完成模板文件的工作后, 接下来就是在首页当中对这个组件进行配置, 在index文件夹当中对index.json文件进行配置, 代码如下:

4、在首页当中进行使用,代码如下:

<view class="index_popup">
    <view class="btn-area">
        <button type="primary" bindtap="showPopup">点击预测价钱</button>
    </view>
    <popup id='popup'
        title='预测价格' 
        content_leftText='您好,预测价格为'
        content_money='{{content_money}}' 
        content_rightText='元 , 预测价格和实际价格存在偏差,请耐心等候专业顾问为您服务。'  
        bind:close="_close">
    </popup>
</view>

5、index.wxss的样式

.index_popup .btn-area button {
  background-image: linear-gradient(to right, rgba(36, 162, 255), rgba(36, 172, 255), rgba(36, 192, 255));
  font-size: 34rpx;
  font-weight: normal;
  border-radius: 50rpx;
  padding: 18rpx 30rpx;
  margin-top: 100rpx;
}

6、index.js文件里, 配置对应的点击事件, 还有操作数据

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    content_money: '1000万'
  },
  onReady: function () {
    //获得popup组件
    this.popup = this.selectComponent("#popup");
  },
  showPopup() {
    this.popup.showPopup();
  },
  //取消事件
  _close() {
    console.log('你点击了关闭按钮');
    this.popup.hidePopup();
  },
  onLoad() {
  },
})

至此, 就全部结束了, 当点击首页index.wxml上的按钮时, 弹出弹窗组件, 点击弹窗页面下的X按钮, 可以关闭弹窗。

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

(0)

相关推荐

  • 微信小程序vant弹窗组件的实现方式

    作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件

  • 微信小程序自定义用户登录弹窗

    本文实例为大家分享了微信小程序自定义用户登录弹窗的具体代码,供大家参考,具体内容如下 view <button   class="btn" bindtap="powerDrawer" data-statu="open">立即进入</button> <!--mask:弹出框--> <view class="drawer_screen" bindtap="powerDrawer&

  • 微信小程序自定义modal弹窗组件的方法详解

    微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮.效果如下. 首先我们可以在跟目录下创建一个components文件夹存放所有的组件.新建一个modal文件夹,下面新建modal.js.modal.json.modal.wxml.modal.wxss四个文件. modal.wxml布局文件: <view class

  • 微信小程序带动画弹窗组件使用方法详解

    本文实例为大家分享了微信小程序带动画弹窗的具体代码,供大家参考,具体内容如下 基本效果如下: 具体实现如下: 第一步: 新建一个 components 文件夹,用于存放我们以后开发中的所用组件,在 components 组件中新建一个popup文件夹来存放我们的弹窗组件,在popup下右击新建 Component 并命名为 popup 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时项目结构应该如下图所示: 第二步上代码: popup.wxml

  • 微信小程序实战之自定义模态弹窗(8)

    首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&

  • 微信小程序常用的3种提示弹窗实现详解

    1. 表示操作成功,文字上方会显示一个表示操作成功的图标. wx.showToast({ title: '操作成功!', // 标题 icon: 'success', // 图标类型,默认success duration: 1500 // 提示窗停留时间,默认1500ms }) 2.表示加载中,显示为加载中图标. wx.showToast({ title: '加载中...', icon: 'loading', duration: 1500 }) 3.不显示图标,一般用作提示. wx.showTo

  • 微信小程序原生自定义弹窗效果

    背景 微信小程序原生的在弹出层wx.showModal中可以通过配置项editable配置输入框,但是对于微信的版本有限制,微信版本过低无法显示,所以需要实现弹出层的效果 如下图 代码 index.wxml <!-- 遮罩层 -->   <view wx:if="{{isShow}}" class='cover'>     <!-- 可在此按需求自定义遮罩 -->     <view style="position: relative

  • 微信小程序实现自定义弹窗组件的示例代码

    目录 编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件 上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果 那么,首先,我们创建一个组件 新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx

  • 微信小程序自定义模态弹窗组件详解

    小程序自带一个showModal弹窗,调用很简单,但是限制很多,title有字数限制,中间的content也只能放文字不能放组件,所以作为一个前端碰到那种连续好几个跟微信自带的模态弹窗风格一模一样,但是功能又花里胡哨的UI稿,就不能忍受频繁的复制粘贴了.自己写了一个组件,虽然调用起来比微信自带的麻烦一点,但是还蛮实用的. 效果大概长这样. 上代码: wxml: <!-- 自定义模态弹窗 --> <view class="modalDIY" wx:if="{{

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

    写项目的时候发现小程序没有自带的弹窗输入的组件,只能自己写一个. 1.半透明的遮盖层 遮盖层的样式和显隐事件 wxml代码: <view class="body"> <button bindtap='eject'>弹窗</button> </view> <view class="model" catchtouchmove='preventTouchMove' wx:if='{{showModal}}'>&l

随机推荐