微信小程序开发-自定义组件Components

此为练习项目，将要对图中数据进行自定义组件。

自定义组件好处：不需要每个页面都写重复的css和html的标签，提高效率。

1.在根目录新建conponents文件夹

新建组件PubTitle步骤：
新建文件夹PubTitle >> 鼠标右键PubTitle文件夹，新建Conponent

2.引用

在将要引用的页面的.json文件
加上 “PubTitle”:"/components/PubTitle/PubTitle"

{
  "usingComponents": {
    "PubTitle":"/components/PubTitle/PubTitle"
  }
}

wxml页面：
属性myTitle将要属性传值

3.文件夹conponents下在对应的组件文件夹下的.js

属性传值：{{myTitle}}
定义myTitle类型type，默认值value

myTitle:{
      type: String,
      value:''
    }

.wxml

<view class="pubTitle">
  <view class="txt">{{myTitle}}</view>
  <navigator open-type="switchTab" class="more" url="/pages/news/news">更多></navigator>
</view>

.wcss样式

.pubTitle{
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  margin-bottom: 40rpx;
}
.pubTitle .txt{
  font-size: 40rpx;
  height: 100%;
  position: relative;
  padding-left: 15rpx;
}
.pubTitle .txt::before{
  display: block;
  width: 5rpx;
  height: 34rpx;
  background: #c8020b;
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15rpx;
}
.pubTitle .more{
  font-size: 32rpx;
  color: #666;
}