温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何实现简易封装弹窗

发布时间:2022-01-06 12:50:39 来源:亿速云 阅读:177 作者:柒染 栏目:开发技术

今天就跟大家聊聊有关微信小程序如何实现简易封装弹窗,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

微信小程序如何实现简易封装弹窗

1.建立组件文件夹

微信小程序如何实现简易封装弹窗

2.编写组件内容

 <!--index.wxml-->
<view class="container">
  <text>demo 01 heihzi</text>
  <view bindtap="onDialog">点击 打开弹窗</view>
</view>
<dialog id="dialog" title="查看详情">
  <scroll-view class="p-b min-ht" scroll-y >
    <view class="dia-warp">
      <text>详情信息</text>
      <view wx:for="{{20}}" wx:key="index">{{item}}</view>
    </view>
  </scroll-view>
</dialog>
// components/dialong/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    zIndex: 0,
    ablClickMask: true,
    hasClsBtn: false,
    title: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    open(params, cb, fb) {
      params = params || {}
      this.setData({
        show: true,
        zIndex: params.zIndex || 0
      })
      this.data._cb = cb
      this.data._fb = fb
    },
    close() {
      this.setData({
        show: false
      })
    },
    onMaskHide() {
      if (this.data.ablClickMask) {
        this.close()
        this.triggerEvent('maskEvt')
      }
    }
  }
})

样式一定要加 不然组件弹窗出不来

/* components/dialong/index.wxss */
/* 弹窗 */

.pop {
  width: 80%;
  background: #fff;
  border-radius: 12rpx;
  height: auto;
  max-height: 70vh;
  margin: auto;
  position: absolute;
  position: fixed;
  left: 0;
  right: 0;
  top: 20vh;
  opacity: 0;
  overflow: hidden;
  transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.pop-enter {
  opacity: 1;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  z-index: 1000;
}

.mask {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 700;
}

.title {
  text-align: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #CCC;
}

组件的引入 index .json

 "usingComponents" : {
    "dialog" : "/components/dialong/index"
  },

3.页面中使用

<!--index.wxml-->
<view class="container">
  <text>demo 01 heihzi</text>
  <view bindtap="onDialog">点击 打开弹窗</view>
</view>
<dialog id="dialog" title="查看详情">
  <scroll-view class="p-b min-ht" scroll-y >
    <view class="dia-warp">
      <text>详情信息</text>
      <view wx:for="{{20}}" wx:key="index">{{item}}</view>
    </view>
  </scroll-view>
</dialog>
//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
  },
  onLoad: function () {
  
  },
  onDialog () {
    console.log('打开我啊')
    this.dialog.open()
  },
  onReady () {
    this.dialog = this.selectComponent("#dialog")
  }
})

看完上述内容,你们对微信小程序如何实现简易封装弹窗有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI