wxc-list

列表组件 - 小程序组件

Install

  1. $ min install @minui/wxc-list

Demos

配置icon

列表 list - 图1

  1. <template>
  2.   <view class="list-wrap">
  3.     <view class="list-item">
  4.       <wxc-list
  5.               wx:for="{{list}}"
  6.               wx:key="index"
  7.               class="item"
  8.               title="{{item.title}}"
  9.               desc="{{item.slot? '' : item.desc}}"
  10.               mode="{{index == list.length-1 ? 'none': ''}}"
  11.               src="{{item.src}}">
  12.         <view wx:if="{{item.slot && item.desc}}" class="desc-highlight">{{item.desc}}</view>
  13.       </wxc-list>
  14.     </view>
  16.     <view class="list-item">
  17.       <wxc-list
  18.               class="item"
  19.               icon="help"
  20.               icon-color="#69A0DD"
  21.               title="客服与帮助"></wxc-list>
  22.       <wxc-list
  23.               class="item"
  24.               icon="feedback"
  25.               icon-color="#69A0DD"
  26.               mode="none"
  27.               title="意见反馈"></wxc-list>
  28.     </view>
  29.   </view>
  30. </template>
  32. <script>
  33. export default {
  34.   config: {
  35.     usingComponents: {
  36.       'wxc-list': '@minui/wxc-list',
  37.       'wxc-icon': '@minui/wxc-icon'
  38.     }
  39.   },
  40.   data: {
  41.     list: [{
  42.       title: '打卡领红包',
  43.       desc: '您有1个10元红包可领取',
  44.       slot: false,
  45.       src: 'https://s10.mogucdn.com/mlcdn/c45406/171226_2kall2je2079dh6ddkgc31d27cce2_38x38.png'
  46.     }, {
  47.       title: '优惠券',
  48.       desc: '满100减20',
  49.       slot: true,
  50.       src: 'https://s10.mogucdn.com/mlcdn/c45406/170603_7ida8bdc21j18b91aa2ii3lk38b9i_38x38.png'
  51.     }, {
  52.       title: '钱和红包',
  53.       desc: '',
  54.       slot: false,
  55.       src: 'https://s10.mogucdn.com/mlcdn/c45406/171011_0acg74g776ig2459c1c6gkge07hch_40x40.png'
  56.     }, {
  57.       title: '我的消息',
  58.       desc: '和卖家沟通在这里',
  59.       slot: false,
  60.       src: 'https://s10.mogucdn.com/mlcdn/c45406/170603_0ea73id6h6926k281cdhia0dg5gdg_38x38.png'
  61.     }, {
  62.       title: '我的收藏',
  63.       desc: '',
  64.       slot: false,
  65.       src: 'https://s10.mogucdn.com/mlcdn/c45406/170603_6h37fg4074i3a2l2gb92dbbc15k84_38x38.png'
  66.     }, {
  67.       title: '足迹',
  68.       desc: '',
  69.       slot: false,
  70.       src: 'https://s10.mogucdn.com/mlcdn/c45406/170603_00di1ei7f095j8b996icg79kl91kc_38x38.png'
  71.     }, {
  72.       title: '我的拼团',
  73.       desc: '',
  74.       slot: false,
  75.       src: 'https://s10.mogucdn.com/mlcdn/c45406/170603_55gkg003el4k2jbg2d2ieh030fjcf_38x38.png'
  76.     }, {
  77.       title: '充值中心',
  78.       desc: '',
  79.       slot: false,
  80.       src: 'https://s10.mogucdn.com/mlcdn/c45406/180109_26hggaiha8k7blig5k4ihk5k967ii_38x38.png'
  81.     }]
  82.   },
  83.   methods: { }
  84. }
  85. </script>
  87. <style>
  88.   .list-wrap {
  89.     width: 100%;
  90.     background: #efefef;
  91.     padding-bottom: 30rpx;
  92.     padding-top: 30rpx;
  93.   }
  94.   .list-item {
  95.     background: #fff;
  96.     margin-bottom: 30rpx;
  97.   }
  98.   .list-item:last-child {
  99.     margin: 0;
  100.   }
  101.   .item {
  102.     flex: 1;
  103.   }
  104.   .desc-highlight {
  105.     font-size: 24rpx;
  106.     height: 38rpx;
  107.     padding: 0 22rpx;
  108.     border: 1px solid #f5342f;
  109.     border-radius: 20rpx;
  110.     color: #f5342f;
  111.     line-height: 38rpx;
  112.   }
  113. </style>

基础用法

列表 list - 图2

  1. <template>
  2.   <view class="list-wrap">
  4.     <view class="list-item">
  5.       <wxc-list title="标题文字" desc="内容描述" mode="none"></wxc-list>
  6.       <wxc-list title="标题文字" desc="内容描述" dot="{{true}}"></wxc-list>
  7.       <wxc-list title="标题文字" desc="内容描述" arrow="{{false}}"></wxc-list>
  8.       <wxc-list title="标题文字" arrow="{{false}}" mode="none">
  9.         <switch type="switch" color="#ff5777"></switch>
  10.       </wxc-list>
  11.     </view>
  13.     <view class="list-item">
  14.       <view class="list-check">
  15.         <view class="check-wrap"></view>
  16.         <wxc-list class="item" title="标题文字" desc="内容描述"></wxc-list>
  17.       </view>
  18.       <view class="list-check">
  19.         <view class="check-wrap" bindtap="onCheck">
  20.           <wxc-icon wx:if="{{check}}" class="check" type="check" size="46" color="#ff5777"></wxc-icon>
  21.         </view>
  22.         <wxc-list class="item" title="标题文字" desc="内容描述" mode="none"></wxc-list>
  23.       </view>
  24.     </view>
  26.     <view class="list-item">
  27.       <view class="list-check">
  28.         <image class="list-image radius" mode="aspectFill" src="http://s2.mogucdn.com/new1/v1/bdefaultavatar/04.jpg"></image>
  29.         <wxc-list class="item" title="标题文字" detail="内容描述"></wxc-list>
  30.       </view>
  31.       <view class="list-check">
  32.         <image class="list-image" mode="aspectFill" src="http://s3.mogucdn.com/mlcdn/1689c6/180330_8gak8gf7809jhfi8i0l90i79bca3g_400x400.jpg"></image>
  34.         <wxc-list class="item" title="标题文字" detail="内容描述" mode="none"></wxc-list>
  35.       </view>
  36.     </view>
  38.   </view>
  39. </template>
  41. <script>
  42. export default {
  43.   config: {
  44.     usingComponents: {
  45.       'wxc-list': '@minui/wxc-list',
  46.       'wxc-icon': '@minui/wxc-icon'
  47.     }
  48.   },
  49.   data: {
  50.     check: true
  51.   },
  52.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  53.   methods: {
  54.     onCheck() {
  55.       let check = this.data.check;
  56.       this.setData({
  57.           check: !check
  58.       })
  59.     }
  60.   }
  61. }
  62. </script>
  64. <style>
  65.   .list-wrap {
  66.     width: 100%;
  67.     background: #efefef;
  68.     padding-bottom: 30rpx;
  69.     padding-top: 30rpx;
  70.   }
  71.   .list-item {
  72.     background: #fff;
  73.     margin-bottom: 30rpx;
  74.   }
  75.   .list-item:last-child {
  76.     margin: 0;
  77.   }
  79.   .list-check {
  80.     display: flex;
  81.     align-items: center
  82.   }
  83.   .check-wrap {
  84.     position: relative;
  85.     width: 40rpx;
  86.     height: 40rpx;
  87.     margin-left: 30rpx;
  88.     border-radius: 100%;
  89.     border: 1px solid #d8d8d8;
  90.   }
  91.   .check {
  92.     position: absolute;
  93.     top: 0;
  94.     left: -2rpx;
  95.     width: 100%;
  96.     height: 100%;
  97.     line-height: 42rpx;
  98.   }
  99.   .list-image {
  100.     width: 102rpx;
  101.     height: 102rpx;
  102.     margin-left: 30rpx;
  103.   }
  104.   .radius {
  105.     border-radius: 100px;
  106.   }
  107.   .item {
  108.     flex: 1;
  109.   }
  110.   .list-image {
  111.     width: 102rpx;
  112.     height: 102rpx;
  113.     background: #d8d8d8;
  114.   }
  115. </style>

API

List

名称描述
title[说明]：列表项左侧的标题。[类型]：String[默认值]：""
detail[说明]：标题下方的的详细描述。[类型]：String[默认值]：""
desc[说明]：列表项右侧的描述。[类型]：String[默认值]：""
src[说明]：标题前面的图标，自定义图片链接。优先级高于 icon。[类型]：String[默认值]：""
icon[说明]：标题前面的图标，类型见 wxc-icon 组件。[类型]：String[默认值]：""
icon-color[说明]：标题前面的icon图标颜色，同 icon 一同使用。[类型]：String[默认值]：#ff5077
dot[说明]：右侧描述部分前面的提醒红点。[类型]：Boolean[默认值]：false
dot-color[说明]：右侧描述部分前面的提醒红点颜色，与 dot 一同使用。[类型]：String[默认值]：#f5123e
arrow[说明]：是否显示箭头。[类型]：Boolean[默认值]：true
mode[说明]：列表项边框模式。[类型]：String[可选值]：normal，有下边框；none，无边框。[默认值]：normal
bind:click[说明]：点击列表项时触发的事件。组件带 slot 时给组件添加原生事件后点击到 slot 时会报错，故增加自定义事件避免此错误。

ChangeLog

v1.0.0（2018-3-29）

  • 初始版本