利用小程序组件功能,写的alert功能

在刚接触小程序的时候,发生过一件挺逗逼的事。在调试的时候,突然用了【alert】函数,然后突然傻了, 在小程序里面不能用。。。。然后我就乖乖的用console.log来调试了

碰巧的事,这两天自己琢磨小程序,正好看到组件这块,仔细研究了一翻呢, 决定写一个玩玩,反正不能让自己的大脑空闲下来。当一个人的大脑闲下来的时候,指不定在想些什么乱七八糟的烦心事呢~~~

先来看下效果截图:

再来看一下具体的实现流程 :

1、创建目录,文件

创建component目录,在这个目录下,新建一个alert目录,在这个目录下面,分别创建 alert.wxml, alert.wxss, alert.js , alert.json。 每个文件的作用就不说了, 创建完后,目录结构介个样纸滴

2、上代码

//alert.wxml
<!--componts/alert/alert.wxml-->

<template name="alert">
  <view class='alertmodel' style="display:{{showModel || 'none'}}"></view>
  <view class="alert_continer" wx:if="{{isShow}}">

    <view class="alert_title">
      <text>{{title || '提示'}}</text>
    </view>

    <view class="alert_content">
      <icon type='info' size='23'></icon> {{content || "内容在这里显示" }}
    </view>

    <view class="confirm">
      <button type='primary' bindtap='hidealert' class="alert_confirm">确 认</button>
    </view>

  </view>
</template>


//alert.wxss
/* componts/alert/alert.wxss */
.alert_continer {
  text-align: center;
  display: block;  
  height:auto;
  min-height:25%;
  width:60%;
  margin:0 auto;
  border:1px solid #34A123;
  position: fixed;
  top:40%;
  left:20%;
  align-items: center;  
  font-size:25rpx;
  z-index: 1001;
  background: #fff;
}
.alert_title,.alert_content{
  display:block;
}
.alert_title{
  text-align:left;
  padding-bottom:5px;
}
.alert_title text{
  width:100%;
  display:block;
  margin-left:10px;
  margin-top:15px;
}
.alert_content{
  height:43px;
  line-height:43px;
  width:95%;
}

.alert_confirm  {
  margin-top:15px;
  float:right;
  width:62px;
  position:absolute;
  right:5px;
  bottom:5px;
  border-radius: 0px;
  height:32px;
  line-height:32px;
  font-size:25rpx;
}
.alertmodel{
  height:100%;
  width:100%;
  background:#000;
  opacity: 0.5;
  z-index:100;
  position: fixed;
}

//alert.json
{
  "compoment": true
}

//alert.js
function alert(c) {
  var pages = getCurrentPages();
  var curPage = pages[pages.length - 1];
  curPage.setData({
    config: {
      isShow: true,
      content: c,
      showModel: 'block'
    }
  });
  curPage.hidealert = function() {
    curPage.setData({
      config: {
        isShow: false,
        showModel: 'none'
      },
    });
  }
}
module.exports = {
  alert
};

3、页面的引用

JS页面引用alert的JS, 样式页面导入alert的样式, 布局页面导入alert的布局页面

引用JS:

var alert = require('../../componts/alert/alert.js');

引用样式 :

@import '../../componts/alert/alert.wxss';

引用布局:

<import src="../../componts/alert/alert.wxml"></import>
<template is="alert" data="{{...config}}"></template>
4、对应的按钮/文本对象添加事件
<view class='user_list_item collect' bindtap='showAlert' >测试Alert</view>
5、JS写事件,实现alert弹窗
showAlert: function () {
alert.alert('仅仅是测试而仅是测试而已!');
}

0

1 thought on “利用小程序组件功能,写的alert功能”

发表评论

电子邮件地址不会被公开。