登录

小程序写插件内容

Html+Css 置顶热门
0 1483

在components下新建popup文件夹

在创建component名字为popup

创建完成后看下图
微信图片_20230425163610yle="max-width:100%;">


popup.wxml

yle="max-width:100%;overflow-x:auto;"><!--components/popup/popup.wxml-->
<view class="wx-popup" hidden="{{flag}}">
<image src="/images/popup.png"></image>
  <view class='popup-container'>
    <view class="wx-popup-title">{{title}}</view>
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn">
      <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
    </view>
  </view>
</view>

popup.wxss

yle="max-width:100%;overflow-x:auto;">/* components/popup/popup.wxss */
.wx-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0 0 0 .5);
  }
  .wx-popup image{
    width: 638rpx;
    height: 585rpx;
      margin-top: 420rpx;
      margin-left: 60rpx;
  }
  .popup-container {
    width: 635rpx;
    height: 585rpx;
    position: absolute;
    left: 50%;
    top: 60%;
    max-width: 630rpx;
    border-radius: 10rpx;
    box-sizing: bordre-box;
    transform: translate(-50% -50%);
    overflow: hidden;
  }
  .wx-popup-title {
    width: 100%;
    height: 25%;
    font-weight: 800;
    color:#ffffff;
    text-align: center;
    font-size: 40rpx;
  }
  .wx-popup-con {
      height: 35%;
      margin-top: 25rpx;
      margin-left: 35rpx;
      margin-right: 15rpx;
    text-align: left;
  }
  .wx-popup-btn {
      margin-top: 23rpx;
    height: 20%;
    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-radius: 88rpx;
  }
popup.js


yle="max-width:100%;overflow-x:auto;">// components/popup/popup.js
Component({
    options: {
      multipleSlots: true // 在组件定义时的选项中启用多slot支持
    }
    /**
     * 组件的属性列表
     */
    properties: {
      title: {            // 属性名
        type: String     // 类型(必填),目前接受的类型包括:String Number Boolean object Array null(表示任意类型)
        value: '标题'     // 属性初始值(可选),如果未指定则会根据类型选择一个
      }
      // 弹窗内容
      content: {
        type: String
        value: '内容'
      }
      // 弹窗取消按钮文字
      btn_no: {
        type: String
        value: '取消'
      }
      // 弹窗确认按钮文字
      btn_ok: {
        type: String
        value: '确定'
      }
    }
    
    /**
     * 组件的初始数据
     */
    data: {
      flag: true
    }
    
    /**
     * 组件的方法列表
     */
    methods: {
      //隐藏弹框
      hidePopup: function () {
        this.setData({
          flag: !this.data.flag
        })
      }
      //展示弹框
      showPopup () {
        this.setData({
          flag: !this.data.flag
        })
      }
      /*
      * 内部私有方法建议以下划线开头
      * triggerEvent 用于触发事件
      */
      _error () {
        //触发取消回调
        this.triggerEvent("error")
      }
      _success () {
        //触发成功回调
        this.triggerEvent("success");
      }
    }
  })


调用部分内容

你要调用的页 index.json

微信图片_20230425164025yle="max-width:100%;">


index.html


yle="max-width:100%;overflow-x:auto;">  <popup id='popup'
      title='{{title}}'
      content='{{content}}'
      btn_no='没有'
      btn_ok='知道了'
      bind:error="_error" 
      bind:success="_success">
  </popup>


在你要调用的JS文件里添加 下边的内容就可以了,

title和content可是动态参数奥,记的传参数

index.js


yle="max-width:100%;overflow-x:auto;">    this.popup = this.selectComponent("#popup");
      this.popup.showPopup();


最好的效果

微信图片_20230425164528yle="max-width:100%;">


发表评论

0 个回复