小程序如何写动态标签

时间: 2020-01-05阅读: 537标签: 标签

web开发中,尤其使用react开发项目时,我们可以很方便的动态定义标签(jsx)

const props = {
  id: '',
  className: '',
  data-a: ''
}
<button {...props} />

动态配置标签的好处一是所有逻辑在js端控制,二是使得我们的模板非常规范,方便后续维护更新,碎片模板可以很好的控制,三是我们可以根据使用场景很方便的配置props的属性,这样在html结构输出的时候能够得到比较干净的结构

在小程序的开发中,却不能实现类似的功能,导致我们的动态标签通常非常的冗余,多余的属性全部展示在结构生成后

以button为例,我们知道button在小程序中有非常多的属性


如上所示,这里只是列举了一部分的属性


动态模板

我们的button动态模板写下来应该是这样的

配置

Page({
  data: {
    option: {
      ...
    }
  }
})
<button
  size="{{option.size || 'default'}}"
  type="{{option.type || 'default'}}"
  plain="{{option.plain || false}}"
  value="{{option.value || '按钮'}}"
  ...
  ...
/>

调试工具的输出结构

<button bindtap='' size='' type='' plain='' disabled=false open-typ='' hover-class='' .... />

可以看到调试工具中输出的结构就会变得非常冗余,降低了开发效率,这种冗余的模板输出搞久了会吐的好吧。

可以使用模板语法区分不同场景的button,我知道会有很多这样的声音,但那不是动态模板。


解决问题

那要如何解决输出结构不冗余呢,说了这么多终于到了重点,其实真的只是一个很小的技巧,我的开发经历告诉我这是有效的,你也可以试试,将默认值统统换成 '',改版后的模板如下

<button
  size="{{option.size || ''}}"
  type="{{option.type || ''}}"
  plain="{{option.plain || ''}}"
  value="{{option.value || '按钮'}}"
  ...
  ...
/>

这时你得到的模板就是一段漂亮的结构

<button value='按钮' />
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7416

关闭

总结那些有默认margin,padding值的html标签

h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值

meta标签中的http-equiv属性使用

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是:

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

HTML5表单标签

Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮

CSS 标签的分类,及显示模式

标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性

HTML5新增和废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。

<a>标签中href=javascript:与href=#

将href=#是指联接到当前页面,其实是无意义的,页面也不会刷新。这是一个锚链接。在制作网页时html语言里的参数,用于指定链接的url ####就是本页链接,href=地址,就是链接到地址 链接本页面 默认本页,不弹出新窗口,空连接时,如果去掉#

关于v-if和v-for不能一起使用在同一个标签上

遍历object的所有value(即li中的v-for),当拿到testData的第一个元素TESTOBJECT时,执行div中的v-for,此时的item对应T E S T O B J E C T这10个元素,于是循环10次,每一次都判断当前元素是否是array,很显然每次判断都是object

在html中创建自定义标签

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签

HTML基础知识(块级标签,行内标签,行内块标签)

块级元素:独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!