• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序中的组件使用2

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

需求

  

上面两个页面是同一个小程序的不同页面,两个页面中都是用到了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中传入值就可以了

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Java实现微信统一服务消息Java实现微信小程序+消息推送发布时间:2022-07-18
下一篇:
微信小程序一键登录获取手机号发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap