微信小程序自定义card图文组件

//组件wxml

<view class="home-party" style="padding-top:10px;">
<view>
    <view class="home-party-title">{{name}}</view>
    <view class="home-party-subtitle">{{title}}</view> <span class="iconfont icon- 
     jiantouyou-xian" style="top:36px;"></span>
</view>
  <view class="home-party-items">
    <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
      <view wx:for="{{list}}" class="home-party-item" wx:key="index" bindtap="getopendetail" data-id="{{item.id}}">
        <image src="{{item.img}}" />
        <view class="home-tb-type">{{item.label}}</view>
        <view class="home-party-name">{{item.title}}</view>
        <view class="home-party-info"><span>{{item.spans}} | {{item.num}}</span></view>
        <view class="home-party-price-m1"><span class="home-party-price-m1-text">{{item.money}}</span></view>
      </view>
    </scroll-view>
    <view style="width:40px;display:inline-block;"></view>
  </view>
</view>

//js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 便签名
    name: {
      type: String,
      value: ""
    },
    // 描述文案
    title: {
      type: String,
      value: ""
    },
    // 滚动数据来源
    list: {
      type: Array,
      value: []
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     *跳转详情页 
     * @param {传递参数} item 
     */
    getopendetail:function(item) {
      this.triggerEvent('getopendetail', { param:item.currentTarget.dataset.id});
    }
  }
})

.home-party {
  padding-top: 60rpx;
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
 .home-party .home-party-title {
  font-size: 40rpx;
  color: #2d2d2d;
  font-weight: 700;
  padding: 0 30rpx;
  text-align: left;
}
.home-party .home-party-subtitle {
  font-size: 28rpx;
  color: #999;
  line-height: 60rpx;
  text-align: left;
  height: 60rpx;
  padding: 0 30rpx;
}
.home-party .icon-jiantouyou-xian {
  background: #f5f5f5;
  position: absolute;
  top: 57px;
  right: 15px;
  width: 24px;
  height: 24px;
  color: #b2aeae;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
  border-radius: 12px;
}
.home-party .home-party-items {
  width: 95%;
  /* height: 480rpx; */
  display: inline-block;
  margin: 0 auto;
  padding-left: 10rpx;
}
 .home-party .home-party-items .home-party-item {
  vertical-align: top;
  width: 320rpx;
  height: 380rpx;
  display: inline-block;
  margin-right: 20rpx;
  position: relative;
  background: #fff;
  border: 0 solid #f5f5f5;
  box-shadow: 0 4rpx 40rpx 0 rgba(0,0,0,.1);
  border-radius: 8rpx;
  overflow: hidden;
}
.home-party .home-party-items .home-party-item image {
  height: 200rpx;
  width: 100%;
}
.home-party .home-party-items .home-tb-type {
  background-image: linear-gradient(269deg,#ffd268,#ffb200);
  width: 100rpx;
}
.home-party .home-party-items .home-tb-type {
  border-radius: 0 0 8rpx 0;
  font-size: 20rpx;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  line-height: 40rpx;
  height: 40rpx;
  text-align: center;
}
.home-party .home-party-items .home-party-name {
  font-size: 24rpx;
  color: #222;
  padding: 0 20rpx;
  white-space: pre-line;
  font-weight: 700;
  text-align: justify;
  line-height: 40rpx;
}
.home-party .home-party-items .home-party-info {
  font-size: 20rpx;
  color: #666;
  padding: 0 20rpx;
  text-align: left;
  line-height: 40rpx;
}
.home-party .home-party-items .home-party-price-m1 {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
}
.home-party .home-party-items .home-party-price-m1 .home-party-price-m1-text {
  font-weight: 700;
  font-size: 24rpx;
  color: #f9541c;
}
.home-party .home-party-items .home-party-price-m1 .home-party-price-m1-text:after {
  content: "元起";
  font-size: 16rpx;
  color: #666;
  font-weight: 400;
}

//引用方式

//第一步骤：JSON
{
  "usingComponents": {
    "img-text": "/commpents/imgtext/imgtext"
  },
  "navigationBarBackgroundColor": "#FF563A"
}
//第二步骤：wxml

<img-text list="{{list2}}" name="年会热卖" title="传统主题轰趴旅行各种年会统统都有" bind:getopendetail="getopendetail"></img-text>

//第三步骤：js

 list2: [{
        id: 1,
        label: "旅行团建",
        title: "使徒行者 卧底风云】趣味徒步主题团建",
        spans: "1天0晚",
        num: "30-200人",
        img: "https://img2.baidu.com/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",
        money: "464"
      }, {
        id: 2,
        label: "旅行团建",
        title: "使徒行者 卧底风云】趣味徒步主题团建",
        spans: "1天0晚",
        num: "30-200人",
        img: "https://img2.baidu.com/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",
        money: "464"
      }, {
        id: 3,
        label: "旅行团建",
        title: "使徒行者 卧底风云】趣味徒步主题团建",
        spans: "1天0晚",
        num: "30-200人",
        img: "https://img2.baidu.com/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",
        money: "464"
      }, {
        id: 4,
        label: "旅行团建",
        title: "使徒行者 卧底风云】趣味徒步主题团建",
        spans: "1天0晚",
        num: "30-200人",
        img: "https://img2.baidu.com/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",
        money: "464"
      },
      {
        label: "旅行团建",
        id: 5,
        title: "使徒行者 卧底风云】趣味徒步主题团建",
        spans: "1天0晚",
        num: "30-200人",
        img: "https://img2.baidu.com/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",
        money: "464"
      },
    ]