微信小程序开垦04-创设和煦的UI库【彩民之家高手

2019-10-11 12:48 来源:未知

总结

大家今日花了繁多武术写三个loading,开采小程序中的组件事实上是标签,我们无语使用js获取到大家“组件”的实例,所以使用上有十分的大的区分,不过怎么都不能够挡住大家写通用组件的决定,于是大家今日来写一些通用的零部件库,并且产生多少个小程序的系统,这里想的是有:

① 消息框

② toast提示

③ 日历组件

④ 然后再做贰个必要固定的气泡组件

1 赞 收藏 评论

彩民之家高手论坛 1

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

微信小程序开拓04-创设本人的UI库

2018/08/04 · 基本功手艺 · 小程序

初稿出处: 叶小钗   

编排组件

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

零件改造

通过思量,我们那边希图做以下优化(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出来,做有所页面包车型地铁基类:

彩民之家高手论坛 2

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

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(); // }, 3000); }, 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长度动态设置的,大家那边先这么。

核心协会

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

小编们明天先来兑现这几个弹出层:

彩民之家高手论坛 3

以前这一个组件是二个器皿类组件,弹出层可安装载入的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>
`});

彩民之家高手论坛 4

小程序对应安装的数量开展了转义,所以并无法动态深入分析,假设站在性质角度揣摩,不进行动态分析亦不是张冠李戴的;另一方面,一旦小程序能动态深入分析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>

彩民之家高手论坛 5

大旨布局放到页面中,我们传入数据模型或许决定呈现就可以,看起来是平价的,于是我们先实现大家基本的样式,因为业务模块的理所必然应该由业务提供,所以对应样式写到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>

彩民之家高手论坛 6

如此一来,我们着力的弹出层样式就七七八八了,这里能够看见有个别风味:小程序与平时我们的体制差别十分的小,稍微改点就会用,以至能直接通用;另一方面,大家也要求思想多个标题:公共部分的CSS该怎么管理?其实自身这里供给缓慢解决的不只是公私的体裁部分,还须要消除集体的机件部分。

自家这里想的是将具备公共部分的CSS放到四个大局的公文global.wxss中,然后在各样业务级页面import就可以,所以大家这里供给产生叁个公家的WXSS库,那个与纯web映射起来就可以,大家这里便不深入。

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

结语

github地址:

明天我们就像找到了四个相符小程序的机件编写情势,昨日大家继续造成都部队分零件,组件达成后大家便初始写实际工作代码了

1 赞 收藏 评论

彩民之家高手论坛 7

公物组件库

要抓好开荒效能的率先个前提正是要有丰富多的UI组件,小程序本人提供了一部分定制化的组件,大家仍旧会用到的组件有:

① alert类弹出层

② loading类弹出层

③ 日历组件

④ toast&message类提示弹出组件

⑤ 容器类组件

⑥ ……

在此之前的做法,是大家将html实体和组件落成间接放到一同,css放到大局global里面去,未来小程序并不扶植动态展示wxml,所以动态插入的章程行不通了,大家必要将零件的wxml放到页面里面做预加载,这里本人想的是提供三个通用global.ui.wxml文件用以装载全数的wxml实体,常用的机件大家暗许全局引进,咱们那边先挑点软朱果来捏,大家先完毕叁个alert类弹出层组件。

小编们将原来弹出层类会用到的CSS全体翻译为WXSS,归入global.wxss中:

彩民之家高手论坛 8

下一场大家各类组件都会有二个恒定的生命周期:创设->突显->隐敝,那个生命周期是各个组件都具有的性状,所以我们这里应该引进承接概念达成组件,不过小程序合法提供的Components并从未提供后续概念,而是提供了behaviors概念,用以将零件间的公物部分管理掉,所以大家这里也运用behaviors,因为不能够操作dom,大家的零件抽象会变得相对轻易,不用记录太多dom节点了,别的小程序的零部件与大家前边的“组件”从概念到利用上有比十分的大的例外,在此之前我们是以js作为调节器,未来是以标签wxml作为调控器,根本没有章程在js中赢得实例,而小程序组件的生命周期并不分包展现掩饰生命周期,所以她的机件和大家以为的零件有不小的例外

笔者考虑了下怎么小程序中,js不可能得到组件的实例,这里得出的定论是:

小程序中兼有的WXML必须在页面中开展预加载逻辑,不可能动态插入DOM的点子插入WXML,所以小程序没有提供组件实例给我们决定 所以在小程序中想成就组件库,那么便只可以把组件做标签使用(并且是js无法获取的标签),并不是js组件,那样会有效匡助大家通晓

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

咱俩那边品尝完成三个蒙蔽层的标签(这里起头不用组件那些词,以为很有歧义):

彩民之家高手论坛 9

代码特别简单:

<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>

咱俩这边完结一个loading的机件(PS:CSS3动画稍微要做点合作调节和测量试验):

彩民之家高手论坛 10

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>

彩民之家高手论坛 11

我们连续将完全的品种代码放到github上去,这里便继续代码了

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

toast组件

笔者们将来先三翻五次作toast组件,toast组件同样包蕴贰个掩没层,可是点击的时候能够关闭掩没层,显示3秒后关闭,呈现多长期关闭的质量应该是足以安顿的(作为品质传递),所以我们新扩展组件:

彩民之家高手论坛 12

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' }); } } })

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'
        });
    }
  }
})

彩民之家高手论坛 13

一体化代码请各位在git下边去看,这里也唤起了部分难点:

① 笔者的机件怎么着居中?

② 经常的话toast消失的时候是足以定制化贰个轩然大波回调的,大家这里怎么落到实处?

这边大家先抛开居中难题,我们先来减轻第二个难点,因为小程序中尚无addEventListener那一个点子,所以可以转移组件本性的法子只剩余多少操作,回看我们那边能够唤起组件掩盖的点唯有:

① toast中的点击弹出层时改动展现属性

onMaskEvent: 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); }, 三千); },

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那个莫明其妙的零部件库,就像是也很别扭,所以大家那边盘算开展改变,减弱无需的复杂度

增加事件

于是,大家起首增加事件了,这里丰盛七个点击遮掩层关闭全部组件的遵从,这里有个难题是,我们点击掩没层事实上关闭的是覆盖以至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'
      });
    }
  }
})

以此时候,当我们点击掩没层的时候,大家全部组件便关门大吉了。

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

改造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.triggerEvent('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组件其实是有个难点的,比方点击掩瞒层要不要关闭全部组件,像类似这种点击掩盖层要不要关门全数组件,其实该是三个集体性质,所以大家对我们的layer、mask继续扩充改动(这里具体请看github代码):

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: { } })

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'
      });
  }
}

其不日常候,点击要不要关闭,基本就在组件里面安装叁脾品质就能够,但是大家以此作为了内部属性,没有自由出来,今年我们大概开采了另外三个相比较有意思的情景了:

大家因为没有办法获取贰个标签的实例,所以大家须要在页面里面动态调用:

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目录中新建了一个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); }, 3000); }, 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 () {
  }
})

诸如此比,大家将页面里面要用于操作组件的数量总体内置了三个util类中,那样代码会变得一清二楚一些,组件管理也置于了二个地点,只是命名标准一定要安准绳来,如同到这里,大家的loading组件改变终结了,这里却有多个主题素材,大家在ui-util类中存放的骨子里是页面级的多寡,当中包罗是组件的图景,可是真实境况我们点击隐瞒层关闭组件,根本不会通知page层的数量,这年我们loading的显得状态搞不好是显得,而真正的组件已经关门了,怎样确认保证状态统一大家前边点再说,笔者暂且未有想到好的章程。

微信小程序开荒03-那是八个零件

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

原稿出处: 叶小钗   

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

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();
  }
}))

彩民之家高手论坛 14

彩民之家高手论坛 15

彩民之家高手论坛 16

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

前言

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中的配置最近只好拷贝,不过大家能够提供多个ui-set.wxml来动态引进一些零件,如全局使用的loading弹出类提醒框

④ 像日历类组件大概平时用的少之甚少的弹出层组件便须求和睦在页面中引进了,职业量貌似十分小,后续看看景况,怎样优化

⑤ 大家那边给各样组件设置二个behaviors,behaviors原则只设置一层(这里有一点点承继的涉嫌),层级多了变相比较复杂了,弹出层类是叁个、平日类三个(用于日历类组件)

有了上述职业,大家这里先来退换我们的loading组件

⑥ 默许全部的零部件开始的一段时期WXSS直接设置为遮掩

1.出于该插件js代码并没多少,小编贴出来一看毕竟:

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

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

@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);
}
}

<!-- fakeLoader BEGIN -->

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

(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
})
};

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

  fakeLoader.js : 

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

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

.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;
}

@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);
}
}

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

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

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

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

<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 : 3000, //假加载的延时时间长度
    bgColor : '#2fd0b5', //背景颜色
    spinner : 'spinner3' //使用哪个种类预设动画,这里运用的是spinner3
  });
</script>

享受给我们,希望大家能为运动WebApp保驾护航吧。

那边笔者将插件的7种预约义动画都特地加粗标明.

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

  fakeLoader.css : 

 

-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;
}

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

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

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

@-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 bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

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

@-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) }
}

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

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

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

 

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

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

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

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

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

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

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

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;
}

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));

  

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

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

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

@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;
}

 

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

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

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

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

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

在做活动端网址的时候,前端有的时候候要求有的接通效果,当然我们自然首先想到分明是用css3做三个过渡动画,nice,那作者给大家叁个好用的jQuery插件吧,令你三行代码完毕这种连接动画效果。

 

本来别忘记在它此前引进jQuery文件哦,作者日常采用 jQuery版本1.8.3 ;

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

接下去在来悄悄CSS代码 : 

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

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

<!-- fakeLoader END -->

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

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

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

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

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

版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:微信小程序开垦04-创设和煦的UI库【彩民之家高手