码迷,mamicode.com
首页 > 其他好文 > 详细

插槽的使用

时间:2020-02-12 11:13:17      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:加盟   using   bind   reg   als   ips   ctf   onclick   style   

// 这是一个组件
<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>

插槽的使用

标签:加盟   using   bind   reg   als   ips   ctf   onclick   style   

原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/12297974.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!