亚洲必赢登录 > 亚洲必赢app > 内部存款和储蓄器泄漏教程,创设视图框架非亲

原标题:内部存款和储蓄器泄漏教程,创设视图框架非亲

浏览次数:77 时间:2019-10-12

微信小程序开采04-创设和睦的UI库

2018/08/04 · 基础手艺 · 小程序

初藳出处: 叶小钗   

JavaScript 内部存款和储蓄器泄漏教程

2017/04/17 · JavaScript · 内部存款和储蓄器泄漏

原来的书文出处: 阮一峰   

老树发新芽—使用 mobx 加速你的 AngularJS 应用

2018/05/23 · JavaScript · AngularJS, mobx

原稿出处: kuitos   

二月中的时候,Angular 官方博客公布了一则消息:

AngularJS is planning one more significant release, version 1.7, and on July 1, 2018 it will enter a 3 year Long Term Support period.

即在 4月1日 AngularJS 公布 1.7.0 版本之后,AngularJS 将跻身五个按时 3 年的 LTS 时期。约等于说 二零一八年五月1日 起至 2021年一月二日,AngularJS 不再统一别的会促成 breaking changes 的 features 或 bugfix,只做须要的难题修复。详细音信见这里:Stable AngularJS and Long Term Support

探访那则新闻时自笔者依旧感动颇多的,作为小编的前端启蒙框架,小编从 AngularJS 上得出到了比相当多的类脂。固然 AngularJS 作为一款能够的前端 MVW 框架已经不错的达成了和煦的历史职责,但考虑到正是到了 2018 年,许多商铺依赖 AngularJS 的品类依然高居从军阶段,结合自个儿过去一年多在 mobx 上的研究和实践,笔者决定给 AngularJS 强行再续一波命。(搭车求治贻误症良方,10月尾起草的作品八月份才写完,音讯都要过期了)

听大人说 MobX 创设视图框架无关的数据层-与 Vue 的组成

2018/07/09 · JavaScript · mobx

最先的小讲出处: kuitos   

mobx-vue 近日已步入 mobxjs 官方组织,款待试用求 star!

几周前自个儿写了一篇文章描述了 mobx 与 angularjs 结合使用的主意及目标(老树发新芽—使用 mobx 加快你的 AngularJS 应用),此次介绍一下怎么将 MobX 跟 Vue 结合起来。

微信小程序开荒03-那是三个组件

2018/08/02 · 基本功工夫 · 小程序

原稿出处: 叶小钗   

前言

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直接设置为掩瞒

一、什么是内部存款和储蓄器泄漏?

次第的运作须要内部存款和储蓄器。只要程序提议供给,操作系统或然运转时(runtime)就亟须须求内部存款和储蓄器。

对此持续运营的劳动进程(daemon),必需马上放出不再利用的内部存款和储蓄器。不然,内部存款和储蓄器占用更加高,轻则影响系统品质,重则导致进度崩溃。

亚洲必赢登录 1

不再使用的内存,未有立即放出,就称为内部存款和储蓄器泄漏(memory leak)。

多少语言(比方 C 语言)必需手动释放内部存款和储蓄器,技士肩负内部存款和储蓄器管理。

JavaScript

char * buffer; buffer = (char*) malloc(42); // Do something with buffer free(buffer);

1
2
3
4
5
6
char * buffer;
buffer = (char*) malloc(42);
 
// Do something with buffer
 
free(buffer);

上边是 C 语言代码,malloc方法用来报名内部存款和储蓄器,使用完成之后,必得团结用free方法释放内部存款和储蓄器。

那很麻烦,所以超越四分之二言语提供自动内部存储器管理,缓和技术员的担当,那被誉为”垃圾回收机制”(garbage collector)。

预备干活

在开端从前,大家须求给 AngularJS 搭配上一些当代化 webapp 开拓套件,以便后边能更有助于地装载上 mobx 引擎。

安装

npm i mobx-vue -S

1
npm i mobx-vue -S

编辑组件

改造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: { onMaskEvent: 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' }); }, 2000); },

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); }, 三千); }, 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的呈现状态搞倒霉是呈现,而实在的机件已经关闭了,怎么着确定保障状态统一我们后边点再说,小编不时未有想到好的点子。

二、垃圾回收机制

垃圾回收机制怎么了解,哪些内存不再供给吗?

最常使用的办法叫做“引用计数”(reference counting):语言引擎有一张”援引表”,保存了内部存款和储蓄器里面装有的财富(平日是各样值)的引用次数。借使多个值的援引次数是0,就象征这一个值不再利用了,由此能够将那块内部存储器释放。

亚洲必赢登录 2

上航海用教室中,左下角的七个值,未有任何引用,所以可以释放。

假诺一个值不再必要了,援引数却不为0,垃圾回收机制不能自由那块内部存款和储蓄器,进而致使内存泄漏。

const arr = [1, 2, 3, 4]; console.log('hello world');

1
2
const arr = [1, 2, 3, 4];
console.log('hello world');

地点代码中,数组[1, 2, 3, 4]是一个值,会攻陷内部存款和储蓄器。变量arr是唯有的对这些值的引用,因而援用次数为1。固然后面包车型地铁代码未有行使arr,它照旧会持续并吞内存。

若是扩充一行代码,解除arr对[1, 2, 3, 4]援用,那块内部存款和储蓄器就能够被垃圾回收机制释放了。

const arr = [1, 2, 3, 4]; console.log('hello world'); arr = null;

1
2
3
const arr = [1, 2, 3, 4];
console.log('hello world');
arr = null;

地点代码中,arr复位为null,就免去了对[1, 2, 3, 4]的引用,援用次数形成了0,内部存款和储蓄器就足以释放出来了。

进而,并不是说有了垃圾堆回收机制,程序员就轻巧了。你要么必要关爱内部存款和储蓄器占用:那多少个很占空间的值,一旦不再使用,你不能够不检查是或不是还留存对它们的援引。若是是的话,就务须手动解除引用。

AngularJS 配合 ES6/next

后天是2018年,使用 ES6 开垦使用已经成为事实典型(有希望的引荐直接上 TS )。如何将 AngularJS 搭载上 ES6 这里不再赘言,能够看作者事先的那篇小说:Angular1.x + ES6 开采风格指南

使用

mobx-vue 的行使特别轻巧,只必要运用 connect 将您用 mobx 定义的 store 跟 vue component 连接起来就可以:

<template> <section> <p v-text="amount"></p> <p v-for="user in users" :key="user.name">{{user.name}}</p> </section> </template> <script lang="ts"> import { Connect } from "mobx-vue"; import Vue from "vue"; import Component from "vue-class-component"; class ViewModel { @observable users = []; @computed get amount() { return this.users.length } <a href='; fetchUsers() {} } @Connect(new ViewModel()) @Component() export default class App extends Vue { mounted() { this.fetchUsers(); } } </script>

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
<template>
    <section>
        <p v-text="amount"></p>
        <p v-for="user in users" :key="user.name">{{user.name}}</p>
    </section>
</template>
 
<script lang="ts">
    import { Connect } from "mobx-vue";
    import Vue from "vue";
    import Component from "vue-class-component";
    class ViewModel {
        @observable users = [];
        @computed get amount() { return this.users.length }
        <a href='http://www.jobbole.com/members/Francesco246437'>@action</a> fetchUsers() {}
    }
 
    @Connect(new ViewModel())
    @Component()
    export default class App extends Vue {
        mounted() {
            this.fetchUsers();
        }
    }
</script>

着力结构

接上文:微信小程序开拓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映射起来就能够,我们这里便不深切。

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:内部存款和储蓄器泄漏教程,创设视图框架非亲

关键词:

上一篇:没有了

下一篇:没有了