Initial commit

Author: klovelovely

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

app.js

@@ -0,0 +1,9 @@
+//app.js
+App({
+  onLaunch: function () {
+    
+  },
+  globalData: {
+    
+  }
+})

app.json

@@ -0,0 +1,11 @@
+{
+  "pages":[
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle":"black"
+  }
+}

app.wxss

@@ -0,0 +1,10 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

components/pop/pop.js

@@ -0,0 +1,61 @@
+// components/pop.js
+Component({
+    options: {
+        multipleSlots: true // 在组件定义时的选项中启用多slot支持 
+    },
+    /** 
+     * 组件的属性列表 
+     * 用于组件自定义设置 
+    */
+    properties: {
+        // 弹窗标题 
+        title: { // 属性名 
+            type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） 
+            value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个 
+        },
+        // 弹窗内容 
+        content: { type: String, value: '弹窗内容' },
+        // 弹窗取消按钮文字 
+        cancelText: { type: String, value: '取消' },
+        // 弹窗确认按钮文字 
+        confirmText: { type: String, value: '确定' }
+    },
+    /** 
+     * 私有数据,组件的初始数据 
+     * 可用于模版渲染 
+     */
+    data: { // 弹窗显示控制 
+        isShow: false
+    },
+    /**
+     * 组件的方法列表 
+     * 更新属性和数据的方法与更新页面数据的方法类似 
+    */
+    methods: {
+        /** 
+        * 公有方法 
+        */
+        //隐藏弹框 
+        hideDialog() {
+            this.setData({
+                isShow: !this.data.isShow
+            })
+        },
+        //展示弹框 
+        showDialog() {
+            this.setData({
+                isShow: !this.data.isShow
+            })
+        },
+        /** 
+         * 内部私有方法建议以下划线开头 
+         * triggerEvent 用于触发事件 
+        */
+        _cancelEvent() { //触发取消回调 
+            this.triggerEvent("cancelEvent")
+        },
+        _confirmEvent() { //触发成功回调 
+            this.triggerEvent("confirmEvent");
+        }
+    }
+})

components/pop/pop.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/pop/pop.wxml

@@ -0,0 +1,12 @@
+<!--components/pop.wxml-->
+<view class='wx_dialog' hidden="{{!isShow}}">
+    <view class='wx-mask'></view>
+    <view class='wx-dialog-content'>
+        <view class='wx-dialog-title'>{{ title }}</view>
+        <view class='wx-dialog-contents'>{{ content }}</view>
+        <view class='wx-dialog-footer'>
+            <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
+            <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
+        </view>
+    </view>
+</view>

components/pop/pop.wxss

@@ -0,0 +1,55 @@
+/* components/pop.wxss */
+.wx_dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.wx-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .3);
+  z-index: 99;
+}
+.wx-dialog-content {
+  position: absolute;
+  background: #fff;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  /* height: 200px; */
+  padding-bottom: 60px;
+  z-index: 100;
+  border-radius: 5px;
+}
+.wx-dialog-contents {
+  padding: 10px;
+}
+.wx-dialog-title {
+  padding: 5px 10px;
+  font-size: 14px;
+}
+.wx-dialog-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-size: 14px;
+  height: 40px;
+  line-height: 40px;
+  border-top: 1px solid #eee;
+}
+.wx-dialog-btn {
+  display: inline-block;
+  width: 49%;
+  cursor: pointer;
+  text-align: center;
+}
+.wx-dialog-btn:first-child {
+  border-right: 1px solid #eee;
+}

pages/index/index.js

@@ -0,0 +1,46 @@
+//index.js
+//获取应用实例
+const app = getApp()
+
+Page({
+    data: {},
+    onLoad: function() {},
+    onReady: function() {
+        // 实例化弹窗1
+        this.dialog1 = this.selectComponent("#dialog1");
+
+        // 实例化弹窗2
+        this.dialog2 = this.selectComponent("#dialog2");
+    },
+
+    /**
+     * 弹窗1
+     */
+    showDialog1() {
+        this.dialog1.showDialog();
+    },
+    cancelDialog1() {
+        console.log('你点击了取消');
+        this.dialog1.hideDialog();
+    },
+    confirmDialog1() {
+        console.log('你点击了确定');
+        this.dialog1.hideDialog();
+    },
+
+    /**
+     * 弹窗2
+     */
+    showDialog2() {
+        this.dialog2.showDialog();
+    },
+    cancelDialog2() {
+        console.log('2你点击了取消');
+        this.dialog2.hideDialog();
+    },
+    confirmDialog2() {
+        console.log('2你点击了确定');
+        this.dialog2.hideDialog();
+    },
+
+})

pages/index/index.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "pop": "/components/pop/pop"
+    }
+}