【亚洲必赢官网】微信小程序开发04,JavaScript之动态背景登陆表单

微信小程序开发03-那是二个零件

2018/08/02 · 基本功技术 ·
小程序

初稿出处: 叶小钗   

在做活动端网站的时候,前端有时候须要有的交接效果,当然我们一定首先想到肯定是用css3做贰个衔接动画,nice,那本身给大家一个好用的jQuery插件吧,让您三行代码实现那种连接动画效果。

微信小程序开发04-构建本人的UI库

2018/08/04 · 基础技术 ·
小程序

初稿出处: 叶小钗   

<!doctype html> <html lang=”zh”> <head> <meta
charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible”
content=”IE=edge,chrome=1″> <meta name=”viewport”
content=”width=device-width, initial-scale=1.0″>
<title>动态背景的CSS3登录表单</title> <style> * {
box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body
{ color: black; font-weight: 300; background-color: black; } body
::-webkit-input-placeholder { color: black; font-weight: 300; } body
:-moz-placeholder { color: black; opacity: 1; font-weight: 300; } body
::-moz-placeholder { color: black; opacity: 1; font-weight: 300; } body
:-ms-input-placeholder { color: black; font-weight: 300; } .wrapper {
background: #50a3a2 ; background: -webkit-linear-gradient(top left,
#50a3a2 0%, #50a3a2 100%); background: linear-gradient(to bottom
right, #50a3a2 0%, #50a3a2 100%); opacity: 0.8; position: absolute;
top: 50%; left: 0; width: 100%; height: 400px; margin-top: -200px;
overflow: hidden; } .wrapper.form-success .container h1 {
-webkit-transform: translateY(85px); -ms-transform: translateY(85px);
transform: translateY(85px); } .container { max-width: 600px; margin: 0
auto; padding: 80px 0; height: 400px; text-align: center; } .container
h1 { font-size: 40px; -webkit-transition-duration: 1s;
transition-duration: 1s; -webkit-transition-timing-function:
ease-in-put; transition-timing-function: ease-in-put; font-weight: 200;
} form { padding: 20px 0; position: relative; z-index: 2; } form input {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
outline: 0; border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius:
3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block;
text-align: center; font-size: 18px; color: white;
-webkit-transition-duration: 0.25s; transition-duration: 0.25s;
font-weight: 300; } form input:hover { background-color: rgba(255, 255,
255, 0.4); } form input:focus { background-color: white; width: 300px;
color: #53e3a6; } form button { -webkit-appearance: none;
-moz-appearance: none; appearance: none; outline: 0; background-color:
white; border: 0; padding: 10px 15px; color: #53e3a6; border-radius:
3px; width: 250px; cursor: pointer; font-size: 18px;
-webkit-transition-duration: 0.25s; transition-duration: 0.25s; } form
button:hover { background-color: #f5f7f9; } .bg-bubbles { position:
absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.bg-bubbles li { position: absolute; list-style: none; display: block;
width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15);
bottom: -160px; -webkit-animation: square 25s infinite; animation:
square 25s infinite; -webkit-transition-timing-function: linear;
transition-timing-function: linear; } .bg-bubbles li:nth-child(1) {
left: 10%; } .bg-bubbles li:nth-child(2) { left: 20%; width: 80px;
height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s;
-webkit-animation-duration: 17s; animation-duration: 17s; } .bg-bubbles
li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s;
animation-delay: 4s; } .bg-bubbles li:nth-child(4) { left: 40%; width:
60px; height: 60px; -webkit-animation-duration: 22s; animation-duration:
22s; background-color: rgba(255, 255, 255, 0.25); } .bg-bubbles
li:nth-child(5) { left: 70%; } .bg-bubbles li:nth-child(6) { left: 80%;
width: 120px; height: 120px; -webkit-animation-delay: 3s;
animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); }
.bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px;
-webkit-animation-delay: 7s; animation-delay: 7s; } .bg-bubbles
li:nth-child(8) { left: 55%; width: 20px; height: 20px;
-webkit-animation-delay: 15s; animation-delay: 15s;
-webkit-animation-duration: 40s; animation-duration: 40s; } .bg-bubbles
li:nth-child(9) { left: 25%; width: 10px; height: 10px;
-webkit-animation-delay: 2s; animation-delay: 2s;
-webkit-animation-duration: 40s; animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3); } .bg-bubbles
li:nth-child(10) { left: 90%; width: 160px; height: 160px;
-webkit-animation-delay: 11s; animation-delay: 11s; } @-webkit-keyframes
square { 0% { -webkit-transform: translateY(0); transform:
translateY(0); } 100% { -webkit-transform: translateY(-700px)
rotate(600deg); transform: translateY(-700px) rotate(600deg); } }
@keyframes square { 0% { -webkit-transform: translateY(0); transform:
translateY(0); } 100% { -webkit-transform: translateY(-700px)
rotate(600deg); transform: translateY(-700px) rotate(600deg); } }
</style> </head> <body> <div class=”wrapper”>
<div class=”container”> <h1>欢迎</h1> <form
class=”form”> <input type=”text” placeholder=”用户名”
maxlength=”8″> <input type=”password” placeholder=”密码”
maxlength=”8″> <button type=”submit”
id=”user”>登陆</button> </form> </div> <ul
class=”bg-bubbles”> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> <li></li>
<li></li> <li></li> </ul> </div>
<script
src=””
type=”text/javascript”></script> <script>
$(‘#user’).click(function (event) { event.preventDefault();
$(‘form’).fadeOut(500); $(‘.wrapper’).addClass(‘form-success’); });
</script> </body> </html>

编写制定组件

1.由于该插件js代码并不多,作者贴出来一看毕竟:

前言

github地址:

接上文继续,我们前面学习了小程序的生命周期、小程序的价签、小程序的样式,前边大家写了贰个简短的loading组件,显著她是个半成品,大家在做loading组件的时候发现到贰个题材:

小程序的组件事实上是标签 大家没有艺术获得标签的实例,至少自个儿临洋气未办法
所以这一个前提让大家对标签的认识有极大的不比,达成小程序特有的UI库,那么就供给从标签出发
那中间关心的点从js中的实例变成了wxml中的属性

1
2
3
4
小程序的组件事实上是标签
我们没有办法获得标签的实例,至少我暂时没有办法
所以这些前提让我们对标签的认识有很大的不同,完成小程序特有的UI库,那么就需要从标签出发
这里面关注的点从js中的实例变成了wxml中的属性

大家明天尝试做多少个零件,然后先做未形成的loading,然后做音信类弹出组件,然后做日历组件,作者期待在那么些进程中,大家形成一套可用的种类,那里提到了组件种类,我们只怕须求整理下流程:

① 首先大家那里做的组件其实是“标签”,这么些时候将要考虑引入时候的怎么处理了


因为写作业页面包车型客车同事(写page的同事),要求在json配置中引入必要动用的价签:

“usingComponents”: { “ui-loading”: “/components/ui-loading” }

1
2
3
"usingComponents": {
  "ui-loading": "/components/ui-loading"
}

因为不能够动态插入标签,所以需求一初叶就把标签放入页面wxml中:

<ui-loading is-show=”{{isLoadingShow}}”></ui-loading>

1
<ui-loading is-show="{{isLoadingShow}}"></ui-loading>


json中的配置权且只可以拷贝,不过咱们得以提供1个ui-set.wxml来动态引入一些零件,如全局使用的loading弹出类提醒框


像日历类组件恐怕平常用的可比少的弹出层组件便必要协调在页面中引入了,工作量貌似不大,后续看看动静,怎么样优化


我们这里给种种组件设置四个behaviors,behaviors原则只设置一层(这里有点继承的关系),层级多了变比较复杂了,弹出层类是2个、一般类八个(用于日历类组件)

有了以上标准,我们这边先来改造大家的loading组件

⑥ 私下认可全数的组件初期WXSS直接设置为隐匿

主导结构

接上文:微信小程序开发02-小程序基本介绍

大家后天先来达成这些弹出层:

亚洲必赢官网 1

后边那几个组件是叁个器皿类组件,弹出层可安装载入的html结构,然后再设置各个风浪即可,那种组件有五个风味:

① 只提供Header部分以及容器部分

② 容器部分的HTML结构由业务层提供

③ 容器部分对应样式由业务层提供

大家假若要在小程序中落实那类组件,意味着大家需求往小程序中动态插入WXML结构,我们那里先做个demo,试试往动态插入WXML是否一蹴而就

this.setData({‘wxml’: ` <my-component>
<view>动态插入的节点</view> </my-component> `});

1
2
3
4
5
this.setData({‘wxml’: `
  <my-component>
  <view>动态插入的节点</view>
  </my-component>
`});

亚洲必赢官网 2

小程序对应安装的数据开始展览了转义,所以并不能够动态解析,如果站在性质角度揣摩,不开始展览动态解析也不是不当的;另一方面,一旦小程序能动态解析wxml,那么可能会并发种种花式用法,控制力会降低,那么大家那里怎么缓解这几个题材啊?

本身想的是,直接将事情级wxml结构放到页面里面,隐藏起来,供给运用弹出层的时候,直接将之装载进去,大家来探视是还是不是行得通,我们将大家必要出示的结构放到三个模板当中:

<template name=”searchbox”> <my-component>
<view>动态组件部分</view> </my-component>
</template>

1
2
3
4
5
<template name="searchbox">
  <my-component>
      <view>动态组件部分</view>
  </my-component>
</template>

然后,我们在我们主界面中载入模板:

<import src=”mod.searchbox.wxml”/> <view>
<my-component> <!– 那有个别剧情将被停放在组件 <slot>
的岗位上 –> <view>这里是插入到零部件slot中的内容</view>
</my-component> </view> <view> <template
is=”searchbox” /> </view>

1
2
3
4
5
6
7
8
9
10
<import src="mod.searchbox.wxml"/>
<view>
   <my-component>
     <!– 这部分内容将被放置在组件 <slot> 的位置上 –>
      <view>这里是插入到组件slot中的内容</view>
   </my-component>
</view>
<view>
   <template is="searchbox" />
</view>

亚洲必赢官网 3

中央结构放到页面中,我们传入数据模型可能控制展现即可,看起来是卓有成效的,于是大家先完结我们基本的样式,因为作业模块的指南应该由工作提供,所以对应样式写到index.wxss里面:

.btn-primary { background-color: #00b358; color: #fff; border: 0 none;
} .btn, .btn-primary, .btn-secondary, .btn-sub { line-height: 88rpx;
height: 88rpx; padding: 0 20rpx; display: inline-block; vertical-align:
middle; text-align: center; border-radius: 8rpx; cursor: pointer;
font-size: 32rpx; -webkit-box-sizing: border-box; box-sizing:
border-box; } .full-width { width: 100%; -webkit-box-sizing: border-box;
box-sizing: border-box; } .c-row { width: auto; display: -webkit-box;
-webkit-box-orient: horizontal; -webkit-box-direction: normal;
-webkit-box-pack: justify; -webkit-box-align: stretch;
-webkit-box-lines: single; display: -webkit-flex;
-webkit-flex-direction: row; -webkit-justify-content: space-between;
-webkit-align-items: strecth; -webkit-align-content: flex-start;
-webkit-flex-wrap: nowrap; padding: 20rpx 40rpx; } .c-span3 { width:
25%; -webkit-box-flex: 3; -webkit-flex: 3 3 auto; } .c-span9 { width:
75%; -webkit-box-flex: 9; -webkit-flex: 9 9 auto; } .search-line {
position: relative; height: 96rpx; line-height: 96rpx; font-size: 30rpx;
font-weight: 600; border-bottom: 1rpx solid #e6e6e6; }
.search-line::after { content: “”; display: inline-block;
vertical-align: middle; width: 20rpx; height: 20rpx; border-top: 4rpx
solid #00b358; border-right: 4rpx solid #00b358; position: absolute;
right: 60rpx; top: 50%; margin-top: -4rpx; -webkit-transform:
rotate(45deg) translateY(-50%); transform: rotate(45deg)
translateY(-50%); -webkit-box-sizing: border-box; box-sizing:
border-box; } .search-line-txt { text-align: right; padding-right:
60rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
.btn-primary {
    background-color: #00b358;
    color: #fff;
    border: 0 none;
}
.btn, .btn-primary, .btn-secondary, .btn-sub {
    line-height: 88rpx;
    height: 88rpx;
    padding: 0 20rpx;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border-radius: 8rpx;
    cursor: pointer;
    font-size: 32rpx;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.full-width {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
 
.c-row {
    width: auto;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -webkit-box-align: stretch;
    -webkit-box-lines: single;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: strecth;
    -webkit-align-content: flex-start;
    -webkit-flex-wrap: nowrap;
    padding: 20rpx 40rpx;
}
 
.c-span3 {
    width: 25%;
    -webkit-box-flex: 3;
    -webkit-flex: 3 3 auto;
}
 
.c-span9 {
    width: 75%;
    -webkit-box-flex: 9;
    -webkit-flex: 9 9 auto;
}
 
.search-line {
    position: relative;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 30rpx;
    font-weight: 600;
    border-bottom: 1rpx solid #e6e6e6;
}
 
.search-line::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20rpx;
    height: 20rpx;
    border-top: 4rpx solid #00b358;
    border-right: 4rpx solid #00b358;
    position: absolute;
    right: 60rpx;
    top: 50%;
    margin-top: -4rpx;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
.search-line-txt {
    text-align: right;
    padding-right: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<template name=”searchbox”> <view class=”c-row search-line”
data-flag=”start”> <view class=”c-span3″> 出发</view>
<view class=”c-span9 js-start search-line-txt”>
请选拔出发地</view> </view> <view class=”c-row
search-line” data-flag=”arrive”> <view class=”c-span3″>
到达</view> <view class=”c-span9 js-arrive search-line-txt”>
请采取到达地</view> </view> <view class=”c-row ”
data-flag=”arrive”> <span class=”btn-primary full-width
js_search_list”>查询</span> </view> </template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template name="searchbox">
  <view class="c-row search-line" data-flag="start">
      <view class="c-span3">
          出发</view>
      <view class="c-span9 js-start search-line-txt">
          请选择出发地</view>
  </view>
  <view class="c-row search-line" data-flag="arrive">
      <view class="c-span3">
          到达</view>
      <view class="c-span9 js-arrive search-line-txt">
          请选择到达地</view>
  </view>
  <view class="c-row " data-flag="arrive">
      <span class="btn-primary full-width js_search_list">查询</span>
  </view>
</template>

亚洲必赢官网 4

如此一来,我们着力的弹出层样式就七七八八了,那里能够见见有个别特征:小程序与平昔我们的样式差别相当的小,稍微改点就能用,甚至能间接通用;另一方面,大家也供给思考二个题材:公共部分的CSS该怎么处理?其实本身那边供给缓解的不只是共用的体制部分,还需求消除公共的组件部分。

自作者那里想的是将持有国有部分的CSS放到3个大局的文书global.wxss中,然后在各类业务级页面import即可,所以我们那边须求形成三个公家的WXSS库,这一个与纯web映射起来即可,我们那里便不深远。

  fakeLoader.js : 

改造loading

那边首先改造弹出层都要一连的behaviors behavior-layer:

const util = require(‘../utils/util.js’) module.exports = Behavior({
properties: { //首要属性,各样组件必带,定义组件是不是出示 isShow: { type:
String } },
//那里设置弹出层必须含有一个遮盖层,所以每一个弹出层都自然有着有个z-index属性
data: { maskzIndex: util.getBiggerzIndex(), uiIndex:
util.getBiggerzIndex() }, attached: function() { console.log(‘layer’) },
methods: { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const util = require(‘../utils/util.js’)
module.exports = Behavior({
  properties: {
    //重要属性,每个组件必带,定义组件是否显示
    isShow: {
      type: String
    }
  },
  //这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
  data: {
    maskzIndex: util.getBiggerzIndex(),
    uiIndex: util.getBiggerzIndex()
  },
  attached: function() {
    console.log(‘layer’)
  },
  methods: {
  }
})

说不上我们改造下大家的mask组件:

let LayerView = require(‘behavior-layer’) Component({ behaviors:
[LayerView], properties: {
//只有mask的z-index属性须求被调用的弹出层动态设置 zIndex: { type: String
} }, data: { }, attached: function () { console.log(‘mask’) }, methods:
{ onTap: function() { this.trigger伊夫nt(‘customevent’, {}, {}) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let LayerView = require(‘behavior-layer’)
Component({
  behaviors: [LayerView],
  properties: {
    //只有mask的z-index属性需要被调用的弹出层动态设置
    zIndex: {
      type: String
    }
  },
  data: {
  },
  attached: function () {
    console.log(‘mask’)
  },
  methods: {
    onTap: function() {
      this.triggerEvent(‘customevent’, {}, {})
    }
  }
})

WXML不做变更,便完毕了我们的代码,并且协会关系就像越来越清楚了,可是作为loading组件其实是有个难题的,比如点击遮盖层要不要关门全数组件,像类似那种点击遮盖层要不要关张全体组件,其实该是2个国有属性,所以大家对我们的layer、mask继续展开改建(那里具体请看github代码):

const util = require(‘../utils/util.js’) module.exports = Behavior({
properties: { //重要属性,各个组件必带,定义组件是还是不是出示 isShow: { type:
String } },
//那里设置弹出层必须含有1个遮盖层,所以每一种弹出层都自然有着有个z-index属性
data: { maskzIndex: util.getBiggerzIndex(), uiIndex:
util.getBiggerzIndex(), //暗中认可点击遮盖层不闭馆组件 clickToHide: false },
attached: function() { console.log(‘layer’) }, methods: { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const util = require(‘../utils/util.js’)
module.exports = Behavior({
  properties: {
    //重要属性,每个组件必带,定义组件是否显示
    isShow: {
      type: String
    }
  },
  //这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
  data: {
    maskzIndex: util.getBiggerzIndex(),
    uiIndex: util.getBiggerzIndex(),
    //默认点击遮盖层不关闭组件
    clickToHide: false
  },
  attached: function() {
    console.log(‘layer’)
  },
  methods: {
  }
})

methods: { onMask伊夫nt: function (e) { console.log(e);
//要是设置了点击遮盖层关闭组件则关闭 if (this.data.clickToHide)
this.setData({ isShow: ‘none’ }); } }

1
2
3
4
5
6
7
8
9
10
methods: {
  onMaskEvent: function (e) {
    console.log(e);
    //如果设置了点击遮盖层关闭组件则关闭
    if (this.data.clickToHide)
      this.setData({
        isShow: ‘none’
      });
  }
}

本条时候,点击要不要关张,基本就在组件里面安装一本性质即可,可是大家以此作为了中间属性,没有自由出来,这一个时候大家恐怕发现了别的2个相比较有趣的情况了:

小编们因为没法获取多个标签的实例,所以大家须求在页面里面动态调用:

onShow: function() { let scope= this; this.setData({ isLoadingShow: ”
}); //3秒后关门loading setTimeout(function () { scope.setData({
isLoadingShow: ‘none’ }); }, 贰仟); },

1
2
3
4
5
6
7
8
9
10
11
12
onShow: function() {
  let scope= this;
  this.setData({
    isLoadingShow: ”
  });
  //3秒后关闭loading
  setTimeout(function () {
    scope.setData({
      isLoadingShow: ‘none’
    });
  }, 3000);
},

能够见见,标签接入到页面后,控制标签事实上是动态操作他的属性,约等于说操作页面的情况数据,页面包车型地铁UI变化全数是数量触发,那样的逻辑会让界面变得更其清楚,不过作为全局类的loading那种参数,笔者并不想放到各样页面中,因为那样会造成如拾草芥重复代码,于是本人在utils目录中新建了2个ui-util的工具类,作为一些大局类的ui公共库:

//因为小程序页面中各类页面应该是独立的法力域 class UIUtil {
constructor(opts) { //用于存款和储蓄种种暗中同意ui属性 this.isLoadingShow =
‘none’; } //产出页面loading供给的参数 getPageData() { return {
isLoadingShow: this.isLoadingShow } } //需求传入page实例
showLoading(page) { this.isLoadingShow = ”; page.setData({
isLoadingShow: this.isLoadingShow }); } //关闭loading hideLoading(page)
{ this.isLoadingShow = ‘none’; page.setData({ isLoadingShow:
this.isLoadingShow }); } } //直接再次来到二个UI工具了类的实例 module.exports
= new UIUtil

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//因为小程序页面中每个页面应该是独立的作用域
class UIUtil {
  constructor(opts) {
    //用于存储各种默认ui属性
    this.isLoadingShow = ‘none’;
  }
  //产出页面loading需要的参数
  getPageData() {
    return {
      isLoadingShow: this.isLoadingShow
    }
  }
  //需要传入page实例
  showLoading(page) {
    this.isLoadingShow = ”;
    page.setData({
      isLoadingShow: this.isLoadingShow
    });
  }
  //关闭loading
  hideLoading(page) {
    this.isLoadingShow = ‘none’;
    page.setData({
      isLoadingShow: this.isLoadingShow
    });
  }
}
 
//直接返回一个UI工具了类的实例
module.exports = new UIUtil

index.js使用上产生或多或少扭转:

//获取公共ui操作类实例 const uiUtil = require(‘../../utils/ui-util.js’);
//获取使用实例 const app = getApp() Page({ data: uiUtil.getPageData(),
onShow: function() { let scope= this; uiUtil.showLoading(this);
//3秒后关闭loading setTimeout(function () { uiUtil.hideLoading(scope);
}, 三千); }, onLoad: function () { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//获取公共ui操作类实例
const uiUtil = require(‘../../utils/ui-util.js’);
//获取应用实例
const app = getApp()
Page({
  data: uiUtil.getPageData(),
  onShow: function() {
    let scope= this;
    uiUtil.showLoading(this);
    //3秒后关闭loading
    setTimeout(function () {
      uiUtil.hideLoading(scope);
    }, 3000);
  },
  onLoad: function () {
  }
})

如此,我们将页面里面要用以操作组件的多寡总体内置了2个util类中,那样代码会变得清清楚楚一些,组件管理也置于了三个地点,只是命名规范一定要安规则来,就像到那里,大家的loading组件改造告竣了,那里却有二个标题,我们在ui-util类中存款和储蓄的实际是页面级的多少,个中带有是组件的气象,可是实况大家点击遮盖层关闭组件,根本不会通报page层的数据,这一个时候我们loading的显得状态搞不佳是彰显,而实事求是的组件已经倒闭了,咋样保障状态统一大家后面点再说,小编权且并未想到好的主意。

公共组件库

要增加支付功能的率先个前提就是要有丰硕多的UI组件,小程序本人提供了部分定制化的零件,大家依然会用到的组件有:

① alert类弹出层

② loading类弹出层

③ 日历组件

④ toast&message类提示弹出组件

⑤ 容器类组件

⑥ ……

事先的做法,是大家将html实体和零部件完成直接放到一起,css放到全局global里面去,未来小程序并不帮忙动态显示wxml,所以动态插入的不二法门行不通了,我们须求将零件的wxml放到页面里面做预加载,那里本身想的是提供三个通用global.ui.wxml文件用以装载全体的wxml实体,常用的机件大家私下认可全局引入,大家那里先挑点软柿子来捏,大家先实现八个alert类弹出层组件。

大家将原本弹出层类会用到的CSS全体翻译为WXSS,放入global.wxss中:

亚洲必赢官网 5

然后大家种种组件都会有一个一定的生命周期:成立->突显->隐藏,那个生命周期是各种组件都享有的风味,所以我们那边应该引入继承概念完结组件,可是小程序合法提供的Components并不曾提供后续概念,而是提供了behaviors概念,用以将零件间的公家部分处理掉,所以大家那边也选拔behaviors,因为不可能操作dom,大家的机件抽象会变得绝对简便易行,不用记录太多dom节点了,别的小程序的组件与大家事先的“组件”从概念到应用上有相当的大的两样,在此之前我们是以js作为控制器,以往是以标签wxml作为控制器,根本未曾主目的在于js中得到实例,而小程序组件的生命周期并不分包呈现隐藏生命周期,所以他的零部件和我们认为的机件有相当大的分裂

本身寻思了下何以小程序中,js不可能收获组件的实例,那里得出的下结论是:

小程序中装有的WXML必须在页面中进行预加载逻辑,不能动态插入DOM的章程插入WXML,所以小程序没有提供组件实例给大家决定
所以在小程序中想成就组件库,那么便只好把组件做标签使用(而且是js不能够博得的价签),而不是js组件,那样会立竿见影帮忙大家了然

1
2
小程序中所有的WXML必须在页面中进行预加载逻辑,不能动态插入DOM的方式插入WXML,所以小程序没有提供组件实例给我们控制
所以在小程序中想完成组件库,那么便只能把组件做标签使用(而且是js不能获取的标签),而不是js组件,这样会有效帮助我们理解

我们那边品尝完毕三个遮盖层的价签(这里初步不用组件这些词,感觉很有歧义):

亚洲必赢官网 6

代码分外不难:

<view class=”cm-overlay”></view>

1
<view class="cm-overlay"></view>

.cm-overlay { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0;
right: 0; bottom: 0; left: 0; }

1
2
3
4
5
6
7
8
.cm-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

let LayerView = require(‘behavior-layer-view’) Component({ behaviors:
[LayerView], data: { myData: {} }, attached: function () { }, methods:
{ } })

1
2
3
4
5
6
7
8
9
10
11
12
let LayerView = require(‘behavior-layer-view’)
 
Component({
  behaviors: [LayerView],
 
  data: {
    myData: {}
  },
  attached: function () { },
  methods: {
  }
})

能够看出,那些遮盖层mask没有何意思,而且一般的话mask也不会单独存在,一般是三个零件(比如弹出层的loading)会含有三个遮盖层,所以大家那边要改造下Mask的协会,让她可以装载组件,大家从js组件逻辑来说是mask应该是loading的贰个实例,然而大家站在标签角度来说,他们四个应该是单独的:

<view class=”cm-overlay”> <slot></slot> </view>

1
2
3
<view class="cm-overlay">
  <slot></slot>
</view>

我们那边完成3个loading的零件(PS:CSS3动画稍微要做点合营调节和测试):

亚洲必赢官网 7

loading样式

.spinner { width: 140rpx; height: 140rpx; position: fixed; align-items:
center; display: flex; top: 50%; left: 50%; margin-left: -70rpx;
margin-top: -70rpx; } .container1 > view, .container2 > view,
.container3 > view { width: 24rpx; height: 24rpx; background-color:
#00b358; border-radius: 100%; position: absolute; -webkit-animation:
bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s
infinite ease-in-out; -webkit-animation-fill-mode: both;
animation-fill-mode: both; } .spinner .spinner-container { position:
absolute; width: 66%; height: 66%; top: 10%; left: 10%; } .container2 {
-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.container3 { -webkit-transform: rotateZ(90deg); transform:
rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0;
right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0;
bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s;
animation-delay: -1.1s; } .container3 .circle1 {
-webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1
.circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay:
-0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s;
animation-delay: -0.7s; } .container1 .circle3 {
-webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2
.circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay:
-0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s;
animation-delay: -0.3s; } .container2 .circle4 {
-webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3
.circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform:
scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes
bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform:
scale(0.0); } 40% { transform: scale(1.0); -webkit-transform:
scale(1.0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
.spinner {
  width: 140rpx;
  height: 140rpx;
  position: fixed;
  align-items: center;
  display: flex;
  top: 50%;
  left: 50%;
  margin-left: -70rpx;
  margin-top: -70rpx;
}
.container1 > view, .container2 > view, .container3 > view {
  width: 24rpx;
  height: 24rpx;
  background-color: #00b358;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.spinner .spinner-container {
  position: absolute;
  width: 66%;
  height: 66%;
  top: 10%;
  left: 10%;
}
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

<ui-mask z-index=”{{maskzIndex}}” ></ui-mask> <view
class=”spinner” style=”z-index: {{meIndex}}”> <view
class=”spinner-container container1″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> <view
class=”spinner-container container2″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> <view
class=”spinner-container container3″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ui-mask z-index="{{maskzIndex}}" ></ui-mask>
<view class="spinner" style="z-index: {{meIndex}}">
  <view class="spinner-container container1">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
  <view class="spinner-container container2">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
  <view class="spinner-container container3">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
</view>

const util = require(‘../utils/util.js’); let LayerView =
require(‘behavior-layer-view’); Component({ behaviors: [LayerView],
data: { maskzIndex: util.getBiggerzIndex(), meIndex:
util.getBiggerzIndex() }, attached: function () { console.log(‘loading’)
}, methods: { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const util = require(‘../utils/util.js’);
let LayerView = require(‘behavior-layer-view’);
 
Component({
  behaviors: [LayerView],
 
  data: {
    maskzIndex: util.getBiggerzIndex(),
    meIndex: util.getBiggerzIndex()
  },
  attached: function () {
    console.log(‘loading’)
  },
  methods: {
  }
})

index调用情状:

<import src=”./mod.searchbox.wxml” /> <view> <template
is=”searchbox” /> <ui-loading></ui-loading> </view>

1
2
3
4
5
6
<import src="./mod.searchbox.wxml" />
 
<view>
  <template is="searchbox" />
  <ui-loading></ui-loading>
</view>

亚洲必赢官网 8

咱俩后续将完全的品种代码放到github上去,那里便几次三番代码了

  

toast组件

大家现在先一而再作toast组件,toast组件一样包含叁个遮盖层,不过点击的时候能够关闭遮盖层,显示3秒后关闭,突显多短时间关闭的质量应该是足以安插的(作为品质传递),所以大家新增组件:

亚洲必赢官网 9

const util = require(‘../utils/util.js’); let LayerView =
require(‘behavior-layer’); Component({ behaviors: [ LayerView ],
properties: { message: { type: String } }, data: { }, attached: function
() { console.log(this) }, methods: { onMask伊芙nt: function (e) {
console.log(e); //假若设置了点击遮盖层关闭组件则关闭 if
(this.data.clickToHide) this.setData({ isShow: ‘none’ }); } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const util = require(‘../utils/util.js’);
let LayerView = require(‘behavior-layer’);
 
Component({
  behaviors: [
    LayerView
  ],
  properties: {
    message: {
      type: String
    }
  },
  data: {
  },
  attached: function () {
    console.log(this)
  },
  methods: {
    onMaskEvent: function (e) {
      console.log(e);
      //如果设置了点击遮盖层关闭组件则关闭
      if (this.data.clickToHide)
        this.setData({
          isShow: ‘none’
        });
    }
  }
})

亚洲必赢官网 10

总体代码请各位在git上边去看,这里也引起了部分题材:

① 我的零件如何居中?

② 一般的话toast消失的时候是能够定制化三个事变回调的,大家那边怎么落实?

那里大家先抛开居中难题,大家先来消除第贰个难题,因为小程序中没有add伊芙ntListener这一个方法,所以能够改变组件本性的点子只剩余多少操作,回想大家那里能够挑起组件隐藏的点唯有:

① toast中的点击弹出层时改变显示属性

onMask伊夫nt: function (e) { console.log(e);
//如果设置了点击遮盖层关闭组件则关闭 if (this.data.clickToHide)
this.setData({ isShow: ‘none’ }); }

1
2
3
4
5
6
7
8
onMaskEvent: function (e) {
  console.log(e);
  //如果设置了点击遮盖层关闭组件则关闭
  if (this.data.clickToHide)
    this.setData({
      isShow: ‘none’
    });
}

② 然后便是页面中动态改变多少属性了:

onShow: function() { let scope= this; uiUtil.showToast(this,
‘笔者是雅观使人迷恋的toast’); //3秒后关门loading setTimeout(function () {
uiUtil.hideToast(scope); }, 3000); },

1
2
3
4
5
6
7
8
onShow: function() {
  let scope= this;
  uiUtil.showToast(this, ‘我是美丽可爱的toast’);
  //3秒后关闭loading
  setTimeout(function () {
    uiUtil.hideToast(scope);
  }, 3000);
},

此处,大家只能处理之前的数据同步难题了,大家应该给toast提供八个事件性质可定义的点,点击遮盖层的的确处理逻辑要求停放page层,其实认真考虑下,标签就应有很纯粹,不应有与事务有关,只须要提供钩子,与工作相关的是page中的业务,那么些时候大家能够看看我们代码之间的关联是何其的纷纭了:

① 页面index.js注重于index.wxml中组件的标签,并且重视于uiUtil那个工具类

② 单单多少个toast组件(标签)便借助了mask标签,三个工具栏,还有基础的layer
behavior


因为不可能博取实例,所以组件直接通讯只好通过标签的bindevent的做法,让意况变得尤其奇妙

从此处看起来,调用格局也确确实实太复杂了,而那还仅仅是三个简便的零件,这几个是还是不是大家写法不正常吧?答案是!作者的笔触照旧以从前做js的零部件的思路,然则小程序一时半刻不帮助动态插入标签,所以大家不应有有过多的持续关系,个中的mask是一向不供给的;另一方面,每一种页面要动态引入ui-utils这些岂有此理的零部件库,就好像也很别扭,所以我们那里准备展开改建,降低没有供给的复杂度

丰富事变

【亚洲必赢官网】微信小程序开发04,JavaScript之动态背景登陆表单。于是,大家开端添加事件了,那里丰富2个点击遮盖层关闭全部组件的效能,那里有个难题是,我们点击遮盖层事实上关闭的是覆盖以及loading多少个标签,而大家那里的isShow属性便派上了用处,我们明日page中安装下属性:

<ui-loading is-show=”{{isLoadingShow}}”></ui-loading>

1
<ui-loading is-show="{{isLoadingShow}}"></ui-loading>

onShow: function() { this.setData({ isLoadingShow: ” }); },

1
2
3
4
5
onShow: function() {
  this.setData({
    isLoadingShow: ”
  });
},

下一场大家改造mask以及loading添加事件:

<view class=”cm-overlay” style=”z-index: {{zIndex}}; display:
{{isShow}}” bindtap=”onTap”> </view>

1
2
<view class="cm-overlay" style="z-index: {{zIndex}}; display: {{isShow}}" bindtap="onTap">
</view>

let LayerView = require(‘behavior-layer-view’) Component({ behaviors:
[LayerView], data: { myData: {} }, attached: function () {
console.log(‘mask’) }, methods: { onTap: function() {
this.triggerEvent(‘customevent’, {}, {}) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let LayerView = require(‘behavior-layer-view’)
 
Component({
  behaviors: [LayerView],
 
  data: {
    myData: {}
  },
  attached: function () {
    console.log(‘mask’)
  },
  methods: {
    onTap: function() {
      this.triggerEvent(‘customevent’, {}, {})
    }
  }
})

<ui-mask z-index=”{{maskzIndex}}” is-show=”{{isShow}}”
bindcustomevent=”onMaskEvent”></ui-mask> <view
class=”spinner” style=”z-index: {{meIndex}}; display: {{isShow}}; “>
<view class=”spinner-container container1″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> <view
class=”spinner-container container2″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> <view
class=”spinner-container container3″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4”></view> </view> </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ui-mask z-index="{{maskzIndex}}" is-show="{{isShow}}" bindcustomevent="onMaskEvent"></ui-mask>
<view class="spinner" style="z-index: {{meIndex}}; display: {{isShow}}; ">
  <view class="spinner-container container1">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
  <view class="spinner-container container2">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
  <view class="spinner-container container3">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
</view>

const util = require(‘../utils/util.js’); let LayerView =
require(‘behavior-layer-view’); Component({ behaviors: [LayerView],
data: { maskzIndex: util.getBiggerzIndex(), meIndex:
util.getBiggerzIndex() }, attached: function () { console.log(‘loading’)
}, methods: { onMaskEvent: function (e) { console.log(e); this.setData({
isShow: ‘none’ }); } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const util = require(‘../utils/util.js’);
let LayerView = require(‘behavior-layer-view’);
 
Component({
  behaviors: [LayerView],
 
  data: {
    maskzIndex: util.getBiggerzIndex(),
    meIndex: util.getBiggerzIndex()
  },
  attached: function () {
    console.log(‘loading’)
  },
  methods: {
    onMaskEvent: function (e) {
      console.log(e);
      this.setData({
        isShow: ‘none’
      });
    }
  }
})

本条时候,当我们点击遮盖层的时候,我们全体组件便关闭了。

(function(b) {
b.fn.fakeLoader = function(m) {
var f = b.extend({
timeToHide: 1200,
pos: “fixed”,
top: “0px”,
left: “0px”,
width: “100%”,
height: “100%”,
zIndex: “999”,
bgColor: “#2ecc71”,
spinner: “spinner7”,
imagePath: “”
}, m);
var l = ‘<div class=”fl spinner1″><div
class=”double-bounce1″></div><div
class=”double-bounce2″></div></div>’;
var k = ‘<div class=”fl spinner2″><div class=”spinner-container
container1″><div class=”circle1″></div><div
class=”circle2″></div><div
class=”circle3″></div><div
class=”circle4″></div></div><div
class=”spinner-container container2″><div
class=”circle1″></div><div
class=”circle2″></div><div
class=”circle3″></div><div
class=”circle4″></div></div><div
class=”spinner-container container3″><div
class=”circle1″></div><div
class=”circle2″></div><div
class=”circle3″></div><div
class=”circle4″></div></div></div>’;
var j = ‘<div class=”fl spinner3″><div
class=”dot1″></div><div
class=”dot2″></div></div>’;
var i = ‘<div class=”fl spinner4″></div>’;
var h = ‘<div class=”fl spinner5″><div
class=”cube1″></div><div
class=”cube2″></div></div>’;
var g = ‘<div class=”fl spinner6″><div
class=”rect1″></div><div
class=”rect2″></div><div
class=”rect3″></div><div
class=”rect4″></div><div
class=”rect5″></div></div>’;
var e = ‘<div class=”fl spinner7″><div
class=”circ1″></div><div
class=”circ2″></div><div
class=”circ3″></div><div
class=”circ4″></div></div>’;
var d = b(this);
var c = {
position: f.pos,
width: f.width,
height: f.height,
top: f.top,
left: f.left
};
d.css(c);
d.each(function() {
var n = f.spinner;
switch (n) {
case “spinner1“:
d.html(l);
break;
case “spinner2“:
d.html(k);
break;
case “spinner3“:
d.html(j);
break;
case “spinner4“:
d.html(i);
break;
case “spinner5“:
d.html(h);
break;
case “spinner6“:
d.html(g);
break;
case “spinner7“:
d.html(e);
break;
default:
d.html(l)
}
if (f.imagePath != “”) {
d.html(‘<div class=”fl”><img src=”‘ + f.imagePath +
‘”></div>’);
a()
}
});
setTimeout(function() {
b(d).fadeOut()
}, f.timeToHide);
return this.css({
backgroundColor: f.bgColor,
zIndex: f.zIndex
})
};

零件改造

通过思考,大家那边准备做以下优化(PS:小编小程序也是上星期开头攻读的,要求慢慢摸索):


保留mask组件,不过去除toast、loading类组件与其涉嫌,将WXML以及体制直接内联,使用空间复杂度下跌代码复杂度

② 撤废ui-uitil攻击类,转而落实二个page基类

我们那边先重新达成toast组件:

//behavior-layer const util = require(‘../utils/util.js’) module.exports
= Behavior({ properties: { //主要属性,每一种组件必带,定义组件是或不是出示
isShow: { type: String } },
//那里设置弹出层必须包蕴三个遮盖层,所以各个弹出层都一定有着有个z-index属性
data: { maskzIndex: util.getBiggerzIndex(), uiIndex:
util.getBiggerzIndex(), //暗许点击遮盖层不停歇组件 clickToHide: true },
attached: function() { console.log(‘layer’) }, methods: { onMask伊芙nt:
function (e) { this.trigger伊夫nt(‘maskevent’, e, {}) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//behavior-layer
const util = require(‘../utils/util.js’)
module.exports = Behavior({
  properties: {
    //重要属性,每个组件必带,定义组件是否显示
    isShow: {
      type: String
    }
  },
  //这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
  data: {
    maskzIndex: util.getBiggerzIndex(),
    uiIndex: util.getBiggerzIndex(),
    //默认点击遮盖层不关闭组件
    clickToHide: true
  },
  attached: function() {
    console.log(‘layer’)
  },
  methods: {
    onMaskEvent: function (e) {
      this.triggerEvent(‘maskevent’, e, {})
    }
  }
})

 

.cm-overlay { background: rgba(0, 0, 0, 0.5); position: fixed; top: 0;
right: 0; bottom: 0; left: 0; } .cm-modal { background-color: #fff;
overflow: hidden; width: 100%; border-radius: 8rpx; } .cm-modal–toast {
width: auto; margin-top: -38rpx; background: rgba(0, 0, 0, 0.7); color:
#fff; padding: 20rpx 30rpx; text-align: center; font-size: 24rpx;
white-space: nowrap; position: fixed; top: 50%; left: 50%; }
.cm-modal–toast .icon-right { display: inline-block; margin: 10rpx 0
24rpx 10rpx; } .cm-modal–toast .icon-right::before { content: “”;
display: block; width: 36rpx; height: 16rpx; border-bottom: 4rpx solid
#fff; border-left: 4rpx solid #fff; -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); -webkit-box-sizing: border-box; box-sizing:
border-box; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.cm-overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
 
.cm-modal {
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  border-radius: 8rpx;
}
 
.cm-modal–toast {
  width: auto;
  margin-top: -38rpx;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 20rpx 30rpx;
  text-align: center;
  font-size: 24rpx;
  white-space: nowrap;
  position: fixed;
  top: 50%;
  left: 50%;
 
}
.cm-modal–toast .icon-right {
  display: inline-block;
  margin: 10rpx 0 24rpx 10rpx;
}
.cm-modal–toast .icon-right::before {
  content: "";
  display: block;
  width: 36rpx;
  height: 16rpx;
  border-bottom: 4rpx solid #fff;
  border-left: 4rpx solid #fff;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

<section class=”cm-modal cm-modal–toast” style=”z-index:
{{uiIndex}}; display: {{isShow}}; “> {{message}} </section>
<view class=”cm-overlay” bindtap=”onMaskEvent” style=”z-index:
{{maskzIndex}}; display: {{isShow}}” > </view>

1
2
3
4
5
<section class="cm-modal cm-modal–toast" style="z-index: {{uiIndex}}; display: {{isShow}}; ">
  {{message}}
</section>
<view class="cm-overlay" bindtap="onMaskEvent" style="z-index: {{maskzIndex}}; display: {{isShow}}" >
</view>

const util = require(‘../utils/util.js’); let LayerView =
require(‘behavior-layer’); Component({ behaviors: [ LayerView ],
properties: { message: { type: String } }, data: { }, attached: function
() { console.log(this) }, methods: { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const util = require(‘../utils/util.js’);
let LayerView = require(‘behavior-layer’);
Component({
  behaviors: [
    LayerView
  ],
  properties: {
    message: {
      type: String
    }
  },
  data: {
  },
  attached: function () {
    console.log(this)
  },
  methods: {
  }
})

页面层的应用不必变化就早已耳目一新了,这些时候大家开头做ui-util与page关系的改造,看看能否让我们的代码变得不难,小编那里的笔触是设计三个国有的abstract-view出来,做有所页面包车型大巴基类:

亚洲必赢官网 11

class Page { constructor(opts) { //用于基础page存款和储蓄种种暗中认可ui属性
this.isLoadingShow = ‘none’; this.isToastShow = ‘none’;
this.toastMessage = ‘toast提醒’; //通用方法列表配置,暂且约定用于点击
this.methodSet = [ ‘onToastHide’, ‘showToast’, ‘hideToast’,
‘showLoading’, ‘hideLoading’ ]; //当前page对象 this.page = null; }
initPage(pageData) { //debugger; let _pageData = {};
//为页面动态拉长操作组件的章程 Object.assign(_pageData,
this.getPageFuncs(), pageData); //生成真正的页面数据 _pageData.data =
{}; Object.assign(_pageData.data, this.getPageData(), pageData.data ||
{}); console.log(_pageData); return _pageData; }
//当关闭toast时接触的事件 onToastHide(e) { this.hideToast(); }
//设置页面恐怕行使的点子 getPageFuncs() { let funcs = {}; for (let i =
0, len = this.methodSet.length; i < len; i++ ) {
funcs[this.methodSet[i]] = this[this.methodSet[i]]; } return
funcs; } //产出页面组件必要的参数 getPageData() { return {
isLoadingShow: this.isLoadingShow, isToastShow: this.isToastShow,
toastMessage: this.toastMessage } } showToast(message) { this.setData({
isToastShow: ”, toastMessage: message }); } hideToast() {
this.setData({ isToastShow: ‘none’ }); } //须求传入page实例
showLoading() { this.setData({ isLoadingShow: ” }); } //关闭loading
hideLoading() { this.setData({ isLoadingShow: ‘none’ }); } }
//直接重回2个UI工具了类的实例 module.exports = new Page abstract-view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
class Page {
    constructor(opts) {
        //用于基础page存储各种默认ui属性
        this.isLoadingShow = ‘none’;
        this.isToastShow = ‘none’;
        this.toastMessage = ‘toast提示’;
 
        //通用方法列表配置,暂时约定用于点击
        this.methodSet = [
            ‘onToastHide’, ‘showToast’, ‘hideToast’, ‘showLoading’, ‘hideLoading’
        ];
 
        //当前page对象
        this.page = null;
    }
    initPage(pageData) {
        //debugger;
 
        let _pageData = {};
 
        //为页面动态添加操作组件的方法
        Object.assign(_pageData, this.getPageFuncs(), pageData);
 
        //生成真实的页面数据
        _pageData.data = {};
        Object.assign(_pageData.data, this.getPageData(), pageData.data || {});
 
        console.log(_pageData);
        return _pageData;
    }
    //当关闭toast时触发的事件
    onToastHide(e) {
        this.hideToast();
    }
    //设置页面可能使用的方法
    getPageFuncs() {
        let funcs = {};
        for (let i = 0, len = this.methodSet.length; i < len; i++ ) {
            funcs[this.methodSet[i]] = this[this.methodSet[i]];
        }
        return funcs;
    }
    //产出页面组件需要的参数
    getPageData() {
        return {
            isLoadingShow: this.isLoadingShow,
            isToastShow: this.isToastShow,
            toastMessage: this.toastMessage
        }
    }
    showToast(message) {
        this.setData({
            isToastShow: ”,
            toastMessage: message
        });
    }
    hideToast() {
        this.setData({
            isToastShow: ‘none’
        });
    }
    //需要传入page实例
    showLoading() {
        this.setData({
            isLoadingShow: ”
        });
    }
    //关闭loading
    hideLoading() {
        this.setData({
            isLoadingShow: ‘none’
        });
    }
}
//直接返回一个UI工具了类的实例
module.exports = new Page
 
abstract-view

此处还提供了三个共用模板用于被页面include,abstract-view.wxml:

<ui-toast bindonToastHide=”onToastHide” is-show=”{{isToastShow}}”
message=”{{toastMessage}}”></ui-toast>

1
<ui-toast bindonToastHide="onToastHide" is-show="{{isToastShow}}" message="{{toastMessage}}"></ui-toast>

页面调用时候的代码产生了相当的大的转变:

<import src=”./mod.searchbox.wxml” /> <view> <template
is=”searchbox” /> </view> <include
src=”../../utils/abstract-page.wxml”/>

1
2
3
4
5
<import src="./mod.searchbox.wxml" />
<view>
  <template is="searchbox" />
</view>
<include src="../../utils/abstract-page.wxml"/>

//获取公共ui操作类实例 const _page =
require(‘../../utils/abstract-page.js’); //获取使用实例 const app =
getApp() Page(_page.initPage({ data: { ttt: ‘ttt’ }, // methods:
uiUtil.getPageMethods(), methods: { }, onShow: function () { let scope =
this; this.showToast(‘笔者是漂亮摄人心魄的toast’); // 3秒后关门loading //
setTimeout(function () { // scope.hideToast(); // }, 三千); }, onLoad:
function () { // this.setPageMethods(); } }))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//获取公共ui操作类实例
const _page = require(‘../../utils/abstract-page.js’);
//获取应用实例
const app = getApp()
 
Page(_page.initPage({
  data: {
    ttt: ‘ttt’
 
  },
  // methods: uiUtil.getPageMethods(),
  methods: {
  },
  onShow: function () {
     let scope = this;
     this.showToast(‘我是美丽可爱的toast’);
     // 3秒后关闭loading
    //  setTimeout(function () {
    //    scope.hideToast();
    //  }, 3000);
  },
  onLoad: function () {
    // this.setPageMethods();
  }
}))

这么我们一定于变相给page赋能了,详情请各位看github上的代码:,这一个时候,我们要为toast组件添加关闭时候的事件回调,就变得相对简便易行了,事实上我们得以旁观那几个行为已经跟组件自个儿并未太多关系了:

showToast(message, callback) { this.toastHideCallback = null; if
(callback) this.toastHideCallback = callback; let scope = this;
this.setData({ isToastShow: ”, toastMessage: message }); //
3秒后关闭loading setTimeout(function () { scope.hideToast(); }, 两千); }
hideToast() { this.setData({ isToastShow: ‘none’ }); if
(this.toastHideCallback) this.toastHideCallback.call(this); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
showToast(message, callback) {
  this.toastHideCallback = null;
  if (callback) this.toastHideCallback = callback;
  let scope = this;
  this.setData({
    isToastShow: ”,
    toastMessage: message
  });
 
  // 3秒后关闭loading
  setTimeout(function () {
    scope.hideToast();
  }, 3000);
}
hideToast() {
  this.setData({
    isToastShow: ‘none’
  });
  if (this.toastHideCallback) this.toastHideCallback.call(this);
}

this.showToast(‘小编是雅观摄人心魄的toast’, function () {
console.log(‘执行回调’)} );

1
this.showToast(‘我是美丽可爱的toast’, function () { console.log(‘执行回调’)} );

理所当然那里可以做得更加人性化,比如突显时间是依据message长度动态设置的,大家那边先这么。

总结

笔者们明天花了广大素养写2个loading,发现小程序中的组件事实上是标签,大家无奈使用js获取到大家“组件”的实例,所以接纳上有相当的大的分别,但是怎样都不可能阻挡大家写通用组件的立意,于是大家明日来写一些通用的机件库,并且形成三个小程序的连串,那里想的是有:

① 消息框

② toast提示

③ 日历组件

④ 然后再做四个内需稳定的气泡组件

1 赞 收藏
评论

亚洲必赢官网 12

function a() {
var c = b(window).width();
var e = b(window).height();
var d = b(“.fl”).outerWidth();
var f = b(“.fl”).outerHeight();
b(“.fl”).css({
position: “absolute”,
left: (c / 2) – (d / 2),
top: (e / 2) – (f / 2)
})
}
b(window).load(function() {
a();
b(window).resize(function() {
a()
})
})
}(jQuery));

alert类组件

本篇篇幅已经比较长了,我们最终成功一个alert组件便甘休明天的学习,今天关键落成日历等零件,alert组件一般是多个带分明框的唤起弹出层,有可能有三个按钮,那些状态要有个别复杂点,大家那边照旧为其新增组件结构wxml以及wxss:

//获取公共ui操作类实例 const _page =
require(‘../../utils/abstract-page.js’); //获取使用实例 const app =
getApp() Page(_page.initPage({ data: { }, // methods:
uiUtil.getPageMethods(), methods: { }, onShow: function () { global.sss
= this; let scope = this; this.showMessage({ message: ‘小编是四个规定框’,
ok: { name: ‘明确’, callback: function () { scope.hideMessage();
scope.showMessage(‘小编选取了规定’); } }, cancel: { name: ‘裁撤’,
callback: function () { scope.hideMessage();
scope.showToast(‘作者选用了打消’); } } }); }, onLoad: function () { //
this.setPageMethods(); } }))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//获取公共ui操作类实例
const _page = require(‘../../utils/abstract-page.js’);
//获取应用实例
const app = getApp()
 
Page(_page.initPage({
  data: {
  },
  // methods: uiUtil.getPageMethods(),
  methods: {
  },
  onShow: function () {
    global.sss = this;
    let scope = this;
    this.showMessage({
      message: ‘我是一个确定框’,
      ok: {
        name: ‘确定’,
        callback: function () {
          scope.hideMessage();
          scope.showMessage(‘我选择了确定’);
        }
      },
      cancel: {
        name: ‘取消’,
        callback: function () {
          scope.hideMessage();
          scope.showToast(‘我选择了取消’);
        }
      }
    });
 
  },
  onLoad: function () {
    // this.setPageMethods();
  }
}))

亚洲必赢官网 13

亚洲必赢官网 14

亚洲必赢官网 15

此处本身将插件的7种预约义动画都尤其加粗标注.

结语

github地址:

今日大家就如找到了二个顺应小程序的零件编写情势,前几天我们继承实现部分零件,组件落成后我们便发轫写实际工作代码了

1 赞 收藏
评论

亚洲必赢官网 16

接下去在来悄悄CSS代码 : 

  fakeLoader.css : 

.spinner1 {
width: 40px;
height: 40px;
position: relative;
}

.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

.spinner2 {
width: 40px;
height: 40px;
position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
width: 6px;
height: 6px;
background-color: #fff;

border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.spinner2 .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}

.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}

.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}

.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}

.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}

.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}

.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}

.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

.spinner3 {
width: 40px;
height: 40px;
position: relative;
-webkit-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #fff;
border-radius: 100%;

-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg)
}}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform:
rotate(360deg) }}

@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

.spinner4 {
width: 30px;
height: 30px;
background-color: #fff;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg)
rotateX(180deg) }
}

@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg)
rotateY(-179.9deg);
}
}

.spinner5 {
width: 32px;
height: 32px;
position: relative;
}

.cube1, .cube2 {
background-color: #fff;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px)
rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px)
rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg)
scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg)
scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}

.spinner6 {
width: 50px;
height: 30px;
text-align: center;
}

.spinner6 > div {
background-color: #fff;
height: 100%;
width: 6px;
margin-left:2px;
display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner6 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.spinner6 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.spinner6 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.spinner6 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
亚洲必赢官网,0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.spinner7 {
width: 90px;
height: 30px;
text-align: center;
}

.spinner7 > div {
background-color: #fff;
height: 15px;
width: 15px;
margin-left:3px;
border-radius: 50%;
display: inline-block;

-webkit-animation: stretchdelay 0.7s infinite ease-in-out;
animation: stretchdelay 0.7s infinite ease-in-out;
}

.spinner7 .circ2 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}

.spinner7 .circ3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.spinner7 .circ4 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}

.spinner7 .circ5 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: translateY(-10px) }
20% { -webkit-transform: translateY(-20px) }
}

@keyframes stretchdelay {
0%, 40%, 100% {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
} 20% {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
}

 

上边让我们来利用一下该插件,试试它的简便方便 : 

<!– fakeLoader BEGIN –>

<link rel=”stylesheet” type=”text/css” href=”fakeLoader.css”>
<script type=”text/javascript”
src=”fakeLoader.min.js”></script>
<div id=”fakeLoader”></div>
<script type=”text/javascript”>
  $(‘div#fakeLoader’).fakeLoader({
    timeToHide : 贰仟, //假加载的延时时间长度
    bgColor : ‘#2fd0b5’, //背景颜色
    spinner : ‘spinner3’ //使用哪一类预设动画,那里运用的是spinner3
  });
</script>

<!– fakeLoader END –>

 

当然别忘记在它从前引入jQuery文件哦,笔者一般采用 jQuery版本1.8.3 ;

 

享受给大家,希望大家能为运动WebApp添砖加瓦吧。

 

网站地图xml地图