// 这是一个组件
<view class="custom-class van-card {{ centered ? 'van-card--center' : '' }}">
<view class="van-card__thumb" bind:tap="onClickThumb">
<image wx:if="{{ thumb }}" src="{{ thumb }}" mode="{{ thumbMode }}" lazy-load="{{ lazyLoad }}" class="van-card__img thumb-class" style="border-radius:50%" />
<slot wx:else name="thumb" /> //这里是插槽
<van-tag wx:if="{{ tag }}" mark type="danger" custom-class="van-card__tag">{{ tag }}</van-tag>
</view>
<view class="van-card__content">
<view class="van-card__left">
<view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">
{{ title }}
</view>
<slot wx:else name="title" />
<view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
<slot wx:else name="desc" />
<slot name="tags" />
</view>
<view class="van-card__right">
<view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">
{{ price }}
</view>
<view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">
{{ currency }} {{ originPrice }}
</view>
<view wx:if="{{ num }}" class="van-card__num num-class">{{ num }}</view>
</view>
</view>
<view class="van-card__footer">
<slot name="footer" />
</view>
</view>
//外部引用
首先json文件
{
"usingComponents": {
"val-card": "../../../../dist/carder/index" //这是上面那个组件
},
"navigationBarTitleText": "我的加盟店"
}
<val-card wx:for="{{NewsigningList}}" wx:key="index" class="carder" price="{{item.reg_timey}}" desc="{{item.user_tel}}" title="{{item.user_name}}">
<view slot="thumb"> //这是页面 对应上面的那个name即可
<image style="border-radius:50%;width:180rpx;height:180rpx;" wx:if="{{item.user_headimg}}" class="" src="{{item.user_headimg}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
<image style="border-radius:50%;width:180rpx;height:180rpx;" wx:else class="" src="{{user_headimg}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>
</view>
</val-card>
同时需要在js文件上面定义prop 来进行接收
同时需要在js文件上面定义prop 来进行接收
import { link } from '../mixins/link';
import { VantComponent } from '../common/component';
VantComponent({
classes: ['num-class', 'desc-class', 'thumb-class', 'title-class', 'price-class', 'origin-price-class'],
mixins: [link],
props: {
tag: String,
num: String,
usertelphone: String,
desc: String,
thumb: String,
title: String,
price: String,
centered: Boolean,
lazyLoad: Boolean,
thumbLink: String,
originPrice: String,
thumbMode: {
type: String,
value: 'scaleToFill'
},
currency: {
type: String,
value: '¥'
}
},
methods: {
onClickThumb: function onClickThumb() {
this.jumpLink('thumbLink');
}
}