需求

  

上面两个页面是同一个小程序的不同页面,两个页面中都是用到了label,有相似的地方,但是也有不同之处,这个时候,如果我们想要将这些label做出组件,然后复用,有该怎么做呢?

基础组件

首先在components下面新建tag文件夹,用来存放组件:

然后在tag/index.js里面添加最基本的数据

Component({
properties: {
text:String
},
data: {},
methods: {}
})

tag/index.wxml

<view class="container">
<text>{{text}}</text>
</view>

tag/index.wxss

.container{
padding:4rpx 12rpx;
background-color: #f5f5f5;
color:#666666;
border-radius: 2px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size:28rpx;
}

引入组件

首先是在主页中引入组件:

classic.json

{
"usingComponents": {
"v-like":"../../components/like/index",
"v-movie": "../../components/classic/movie/movie",
"v-tag": "../../components/tag/index"
}
}

classic.wxml

<view class="sub-container">
<text class="headline">短评</text>
<view class="comment-container">
<block wx:for="{{comments}}" wx:key="">
<v-tag text="{{item.content}}"></v-tag>
</block>
</view>
</view>

classic.js

特殊处理

此时,距离目标中的效果还是有些差距的。

首先是最新两条评论的特殊样式,这个是组件外的样式,所以不能加在组件里面,而是应该在父组件classic.wxss里面添加样式

然后,短评的每条评论后面还有点赞的数量。但是在搜索中是没有的,所以我们这里不能像前面的内容一样直接写在组件里面,而是应该做的更灵活一点:外部有值传入的时候就显示,没有传入的时候不显示也不报错。这个时候就需要使用到组件中的插槽了,关于组件的插槽,在vue部分有过简单的总结,这里就省略了,直接看使用方法:

tag/index.wxml

<view class="container">
<text>{{text}}</text>
<slot name="after"></slot>
</view>

和vue不同的是,在小程序中使用slot时,需要在tag/index.js中添加multipleSlots来启用插槽

然后在classic.wxml中传入值就可以了

微信小程序中的组件使用2的更多相关文章

  1. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  2. 微信小程序中的组件

    前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...

  3. 如何在微信小程序中使用组件?

    何为组件 组件封装一段代码,不仅可以在其他的页面中可以使用,也可以在本页面中使用,不用再重复造"轮子".组件可以提高代码的复用率,因此善于使用组件在微信小程序开发中是非常重要的. ...

  4. 微信小程序中 input组件影响页面样式的问题

    input组件有个默认的宽高,好像是不能清除的,在使用flex布局的时候,发现会影响到页面的布局,以为是flex布局的问题,改为float布局试了下也是同样的问题,试着把input标签换成别的标签,问 ...

  5. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  6. 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...

  7. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  8. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  9. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

随机推荐

  1. vue项目中如何使用less

    首先你的vue-cli下载完成 第一步   安装less-loader  依赖 npm  install  less less-loader  --save-dev 直接自动就配置上了,不用手动配置 ...

  2. 神州数码标准访问控制列表配置(ACL)

    实验要求:熟练掌握标准访问控制列表配置方法 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 ip ad ...

  3. Python 安装第三方库中常见问题总结

    1.安装某个库时,例如 pip install tinify 出现Permission denied时,在安装命令的最前面添加sudo 例如: sudo pip install tinify 即可. ...

  4. HTML标记语言

    一.html的文档结构 html含义为超文本标记语言,html文档重要由4个标签来组成就是<html>  <head>  <title>  <body> ...

  5. flutter 添加插件

    打開pubspec.yaml ---> cupertino_icons 下添加插件

  6. 设计一个字符串类String(C++练习题)

    要求:设计一个字符串类String,可以求字符串长度,可以连接两个串(如,s1=“计算机”,s2=“软件”,s1与s2连接得到“计算机软件”),并且重载“=”运算符进行字符串赋值,编写主程序实现:s1 ...

  7. js date 和 math

    Math 用于执行常用的数学任务 console.log(Math.E); 自然数底数2.718 console.log(Math.PI); 圆周率3.1415926 console.log(Math ...

  8. zoj 2524 并查集裸

    Description There are so many different religions in the world today that it is difficult to keep tr ...

  9. SVN命令备忘录

    批量添加(先添加再上传) svn st | grep '^\?' | tr '^\?' ' ' | sed 's/[ ]*//' | sed 's/[ ]/\\ /g' | xargs svn add ...

  10. python 多线程共享全局变量的问题

    多线程都是在同一个进程中运行的.因此在进程中的全局变量所有线程都是可共享的. 这就造成了一个问题,因为线程执行的顺序是无序的.有可能会造成数据错误. 直白理解:也就是多线程执行的时候,同时对一个全局变 ...