devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

支付宝小程序体验—— 业务组件_支付宝小程序下拉框组件

作者：Monodyee | 2024-02-15 23:20:49

赞

踩

支付宝小程序下拉框组件

开放了好几次的支付宝小程序，终于在昨天818开启了公测，今天一早起来下载ide，看了下文档以及demo，再与微信小程序的开发文档比较一下，发现好像就是copy的啊，然后在知乎上就看到《给微信小程序工程师的致歉信》，瞬间秒懂了。api接口也就是将wx改成了my，wcss、wxml改成了acss、axml，基础组件基本一样，基本上学了一个另一个也就明了，不过支付宝小程序多了几个业务组件，这几个封装的就比较实用,大概如下：

一：折叠面板。

效果图：

axml:跟官网不同的是又增加了content的列表循环，基本上一看就知道了。

  1. <view class="a-collapse">
  2.     <view a:for={{panels}}>
  3.       <view
  4.         class="a-collapse-title"
  5.         onTap="{{onTitleTap}}"
  6.         data-index={{index}}
  7.       >
  8.         {{item.title}}
  9.         <view class="{{item.expanded ? 'a-collapse-title-arrow a-collapse-title-arrow-up' : 'a-collapse-title-arrow'}}" />
  10.       </view>
  11.       <view class="a-collapse-content" a:if={{item.expanded}}>
  12.       <view class="a-collapse-content" a:for={{item.content}}>
  13.         {{item}}
  14.         </view>
  15.       </view>
  16.     </view>
  17.   </view>
acts: 

  1. .a-collapse {
  2.   border-top: 1px solid #ddd;
  3.   background-color: #fff;
  4.   color: #000;
  5. }
  6.  
  7. .a-collapse-title,
  8. .a-collapse-content {
  9.   border-bottom: 1px solid #ddd;
  10. }
  11.  
  12. .a-collapse-title {
  13.   position: relative;
  14.   height: 88rpx;
  15.   line-height: 88rpx;
  16.   padding: 0 60rpx 0 30rpx;
  17.   font-size: 34rpx;
  18. }
  19.  
  20. .a-collapse-title-arrow {
  21.   position: absolute;
  22.   top: 30rpx;
  23.   right: 30rpx;
  24.   width: 30rpx;
  25.   height: 30rpx;
  26.   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='26' viewBox='0 0 16 26' xmlns='http://www.w3.org/2000/svg'><path d='M2 0L0 2l11.5 11L0 24l2 2 14-13z' fill='%23C7C7CC' fill-rule='evenodd'/></svg>");
  27.   background-size: contain;
  28.   background-repeat: no-repeat;
  29.   background-position: 50% 50%;
  30.   transform: rotate(90deg);
  31. }
  32. .a-collapse-title-arrow-up {
  33.   transform: rotate(270deg);
  34. }
  35.  
  36. .a-collapse-content {
  37.   padding: 20rpx;
  38.   font-size: 30rpx;
  39. }
js: 
  1. Page({
  2.   data: {
  3.     collapseData: {
  4.       onTitleTap: 'handleTitleTap',
  5.       panels: [{
  6.         title: 'Title 1',
  7.         content: ['Content 1','Content 2','Content 3','Content 4','Content 5'],
  8.         expanded: true,
  9.       }, {
  10.         title: 'Title 2',
  11.         content: ['Content 2'],
  12.         expanded: false,
  13.       },{
  14.         title: 'Title 3',
  15.         content: ['Content 3'],
  16.         expanded: false,
  17.       }, {
  18.         title: 'Title 4',
  19.         content: ['Content 4'],
  20.         expanded: false,
  21.       },{
  22.         title: 'Title 5',
  23.         content: ['Content 5'],
  24.         expanded: false,
  25.       }, {
  26.         title: 'Title 6',
  27.         content: ['Content 6'],
  28.         expanded: false,
  29.       },{
  30.         title: 'Title 7',
  31.         content: ['Content 7'],
  32.         expanded: false,
  33.       }, {
  34.         title: 'Title 8',
  35.         content: ['Content 8'],
  36.         expanded: false,
  37.       }],
  38.     },
  39.   },
  40.   handleTitleTap(e) {
  41.     const { index } = e.target.dataset;
  42.     const panels = this.data.collapseData.panels;
  43.     // android does not supprt Array findIndex
  44.     panels[index].expanded = !panels[index].expanded;
  45.     this.setData({
  46.       collapseData: {
  47.         ...this.data.collapseData,
  48.         panels: [...panels],
  49.       },
  50.     });
  51.   },
  52. });
二：下拉菜单：

效果图：

axml：

  1. <template name="DropdownSelect">
  2.     <view a:if="{{listData}}" class="a-dropdown-wrapper {{active ? 'expand' : ''}}">
  3.         <view id="a-dropdown-nav" class="a-dropdown-nav">
  4.             <block a:for={{listData}}>
  5.                 <view
  6.                     class="a-dropdown-nav-item {{ active && selectedNav ===index ? 'active' : ''}}"
  7.                     hover-class="a-dropdown-nav-item-hover"
  8.                     onTap="_onNavItemTap"
  9.                     data-index={{index}}
  10.                 >
  11.                     <text>{{item.nav}}</text>
  12.                     <view class="triangle"></view>
  13.                 </view>
  14.             </block>
  15.         </view>
  16.  
  17.         <scroll-view scroll-y="{{true}}" class="a-dropdown-contents">
  18.             <block a:for={{listData}} a:for-item="list" a:for-index="parentIndex">
  19.                 <view hidden="{{selectedNav !== parentIndex}}">
  20.                     <view class="a-dropdown-list-items {{active? 'show' : ''}}">
  21.                         <block a:for={{list.data}} >
  22.                             <view
  23.                                 class="a-dropdown-list-item {{index !== (list.data.length - 1) ? '': 'last'}} 
  24.                                 {{index === list.selectedItem ? 'selected': ''}}"
  25.                                 hover-class="a-dropdown-list-item-hover"
  26.                                 onTap="{{list.onListItemTap || '_onListItemTap'}}"
  27.                                 catchTap="{{list.onListItemTap || '_catchListItemTap'}}"
  28.                                 data-index={{index}}
  29.                                 data-parentIndex={{parentIndex}}
  30.                                 data-title={{item.title}}>
  31.                                 <view class="a-dropdown-list-item-line 
  32.                                 {{item.textMode ? 'a-dropdown-list-item-line-' + item.textMode : ''}}">
  33.                                     <image a:if={{item.thumb}} class="a-dropdown-list-item-thumb" 
  34.                                     src="{{item.thumb}}" mode="scaleToFill" />
  35.                                     <text class="a-dropdown-list-item-content">{{item.title}}</text>
  36.                                     <view a:if={{item.extra}} class="a-dropdown-list-item-extra" >{{item.extra}}</view>
  37.                                     <view class="a-dropdown-list-item-check"/>
  38.                                     <view class="a-dropdown-list-item-bottom" />
  39.                                 </view>
  40.                             </view>
  41.                         </block>
  42.                     </view>
  43.                 </view>
  44.             </block>
  45.         </scroll-view>
  46.  
  47.         <view class="a-dropdown-placeholder"></view>
  48.         <view class="a-dropdown-bg" onTap="_catchBgTap"></view>
  49.     </view>
  50. </template>
acss：这里的background-image用的都是 阿里巴巴的矢量图标库里的图标然后转化为svg的格式加载的。 

  1. .a-dropdown-wrapper {
  2.     position: relative;
  3.     display: flex;
  4.     flex-direction: column;
  5.     width: 100%;
  6.     height: 100rpx;
  7. }
  8.  
  9. .a-dropdown-wrapper.expand {
  10.     position: fixed;
  11.     height: 100%;
  12.     z-index: 99;
  13. }
  14.  
  15. .a-dropdown-nav {
  16.     display: flex;
  17.     position: relative;
  18.     border-bottom: 1px solid #ddd;
  19.     background: #fff;
  20.     min-height: 100rpx;
  21.     z-index: 99;
  22. }
  23.  
  24. .a-dropdown-nav-item {
  25.     flex: 1;
  26.     text-align: center;
  27.     height: 100rpx;
  28.     line-height: 100rpx;
  29. }
  30.  
  31. .a-dropdown-nav-item-hover {
  32.     background: rgba(0, 0, 0, 0.03);
  33. }
  34.  
  35. .a-dropdown-nav-item.active {
  36.     color: #f76a24;
  37. }
  38.  
  39. .triangle {
  40.     width: 0;
  41.     height: 0;
  42.     border-left: 10rpx solid transparent;
  43.     border-right: 10rpx solid transparent;
  44.     border-top: 10rpx solid #000;
  45.     border-bottom: 0;
  46.     vertical-align: middle;
  47.     display: inline-block;
  48. }
  49.  
  50. .a-dropdown-nav-item.active .triangle {
  51.     border-bottom: 10rpx solid #f76a24;
  52.     border-top: 0;
  53. }
  54.  
  55. .a-dropdown-contents {
  56.     max-height: 100%;
  57.     z-index: 2;
  58. }
  59.  
  60. .a-dropdown-list-items {
  61.     height: 0;
  62.     overflow: hidden;
  63.     background: #fff;
  64.     position: relative;
  65.     z-index: 98;
  66. }
  67.  
  68. .a-dropdown-list-items.show {
  69.     height: auto;
  70. }
  71.  
  72. .a-dropdown-list-items .a-dropdown-list-item {
  73.     display: flex;
  74.     font-size: 30rpx;
  75.     line-height: 1.5;
  76.     color: #333333;
  77.     min-height: 88rpx;
  78.     align-items: center;
  79.     padding-left: 30rpx;
  80.     background: #fff;
  81. }
  82.  
  83. .a-dropdown-list-item.selected {
  84.     color: #f76a24;
  85. }
  86.  
  87. .a-dropdown-list-item .a-dropdown-list-item-bottom {
  88.     display: block;
  89.     position: absolute;
  90.     width: 100%;
  91.     border-bottom: 1px solid #ddd;
  92.     left: 0;
  93.     bottom: 0;
  94.     right: auto;
  95.     top: auto;
  96. }
  97.  
  98. .a-dropdown-list-item .a-dropdown-list-item-thumb {
  99.     width: 44rpx;
  100.     height: 44rpx;
  101.     margin-right: 30rpx;
  102. }
  103.  
  104. .a-dropdown-list-item .a-dropdown-list-item-line {
  105.     position: relative;
  106.     display: flex;
  107.     flex: 1;
  108.     align-items: center;
  109.     align-self: stretch;
  110.     padding-right: 30rpx;
  111.     min-height: 88rpx;
  112.     overflow: hidden;
  113. }
  114.  
  115. .a-dropdown-list-item .a-dropdown-list-item-content {
  116.     flex: 1;
  117.     font-size: .34rem;
  118.     text-align: left;
  119.     line-height: 1.5;
  120.     width: auto;
  121.     overflow: hidden;
  122.     text-overflow: ellipsis;
  123.     white-space: nowrap;
  124.     padding-top: .14rem;
  125.     padding-bottom: .14rem;
  126. }
  127.  
  128. .a-dropdown-list-item.last .a-dropdown-list-item-bottom {
  129.     border-bottom: none;
  130. }
  131.  
  132. .a-dropdown-list-item .a-dropdown-list-item-line-wrap .a-dropdown-list-item-content {
  133.     white-space: normal;
  134. }
  135.  
  136. .a-dropdown-list-item.a-dropdown-list-item-hover {
  137.     background-color: #ddd;
  138. }
  139.  
  140. .a-dropdown-list-item-check {
  141.     display: block;
  142.     width: 35rpx;
  143.     height: 35rpx;
  144.     margin-left: 16rpx;
  145.     background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1500636672907" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1435" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350"><defs><style type="text/css"></style></defs><path d="M824.66816 299.58144 429.54752 694.70208l-190.32064-190.32064c-8.00768-8.00768-20.95104-8.00768-28.95872 0s-8.00768 20.95104 0 28.95872l204.8 204.8c3.9936 3.9936 9.23648 6.00064 14.47936 6.00064s10.48576-2.00704 14.47936-6.00064l409.6-409.6c8.00768-8.00768 8.00768-20.95104 0-28.95872S832.65536 291.57376 824.66816 299.58144z" p-id="1436" fill="#f76a24"></path></svg>');
  146.     background-size: contain;
  147.     background-repeat: no-repeat;
  148.     background-position: 50% 50%;
  149.     transition: transform 0.3s;
  150.     visibility: hidden;
  151. }
  152.  
  153. .a-dropdown-list-item.selected .a-dropdown-list-item-check {
  154.     visibility: visible;
  155. }
  156.  
  157. .a-dropdown-placeholder {
  158.     min-height: 150rpx;
  159.     z-index: 1;
  160.     flex: 1;
  161. }
  162.  
  163. .a-dropdown-bg {
  164.     opacity: 0;
  165.     transition: opacity linear 0.1s;
  166. }
  167.  
  168. .expand .a-dropdown-bg {
  169.     position: fixed;
  170.     top: 0;
  171.     left: 0;
  172.     width: 100%;
  173.     height: 100%;
  174.     background: rgb(0, 0, 0);
  175.     opacity: 0.4;
  176.     z-index: 1;
  177. }

三：通用的错误页：这没什么好说的，看图就知道了。

效果图：

四：宫格

效果图：


axml：

  1.     <view class="grid">
  2.         <block a:for="{{list}}">
  3.             <view
  4.             style="width:{{100/(columnNum || 4)}}%;padding-top:{{100/(columnNum || 4)}}%;" 
  5.             class="grid-item" onTap="handleItemTap"
  6.             data-index={{index}}>
  7.                 <view class="grid-item-wrapper">
  8.                     <image src="{{item.icon}}" class="grid-icon" mode="aspectFit" />
  9.                     <text class="grid-text">{{item.text}}</text>
  10.                 </view>
  11.             </view>
  12.         </block>
  13.     </view>
acss： 

  1. .grid {
  2.     display: flex;
  3.     flex-direction: row;
  4.     flex-wrap: wrap;
  5. }
  6.  
  7. .grid-item {
  8.     text-align: center;
  9.     position: relative;
  10.     background-color: white;
  11.     position: relative;
  12. }
  13.  
  14. .grid-item-wrapper {
  15.     position: absolute;
  16.     left: 0;
  17.     top: 0;
  18.     width: 100%;
  19.     height: 100%;
  20.     display: flex;
  21.     justify-content: center;
  22.     align-items: center;
  23.     flex-direction: column;
  24. }
  25.  
  26. .grid-icon {
  27.     width: 30%;
  28.     height: 30%;
  29. }
  30.  
  31. .grid-text {
  32.     color: #000;
  33.     font-size: 28rpx;
  34.     line-height: 1;
  35.     margin-top: 28rpx;
  36. }
j s: 
  1. Page({
  2.     data: {
  3.         grid: {
  4.             list: [
  5.                 {
  6.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  7.                     "text": "1"
  8.                 },
  9.                 {
  10.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  11.                     "text": "2"
  12.                 },
  13.                 {
  14.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  15.                     "text": "3"
  16.                 },
  17.                 {
  18.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  19.                     "text": "4"
  20.                 },
  21.                 {
  22.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  23.                     "text": "5"
  24.                 },
  25.                 {
  26.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  27.                     "text": "6"
  28.                 },
  29.                 {
  30.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  31.                     "text": "7"
  32.                 },
  33.                 {
  34.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  35.                     "text": "8"
  36.                 },
  37.                 {
  38.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  39.                     "text": "9"
  40.                 },
  41.                 {
  42.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  43.                     "text": "10"
  44.                 },
  45.                 {
  46.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  47.                     "text": "11"
  48.                 },
  49.                 {
  50.                     "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
  51.                     "text": "12"
  52.                 }
  53.             ],
  54.             columnNum: 4
  55.         }
  56.     },
  57.     handleItemTap(e) {
  58.         my.showToast({
  59.           content: `第${e.currentTarget.dataset.index}个Item`,
  60.           success: (res) => {
  61.             
  62.           },
  63.         });
  64.     }
  65. })
五：列表：基本上个人中心啊设置啊这些界面就用这个就够了。

效果图：


axml： 
  1.     <scroll-view scroll-y>
  2.         <view>
  3.             <view class="a-list">
  4.                 <block a:if={{header}}>
  5.                     <view class="a-list-header">{{header}}</view>
  6.                 </block>
  7.                 <view a:if={{data}} class="a-list-items">
  8.                     <block a:for={{data}}>
  9.                         <view
  10.                             class="a-list-item {{index !== (data.length - 1) ? '': 'last'}} 
  11.                             am-list-item-{{item.align || 'middle'}}"
  12.                             hover-class="a-list-item-hover"
  13.                             onTap="{{onItemTap}}"
  14.                             data-index={{index}}
  15.                         >
  16.                 <view class="a-list-item-line {{item.textMode ? 'a-list-item-line-' + item.textMode : ''}}">
  17.                 <image a:if={{item.thumb}} class="a-list-item-thumb" src="{{item.thumb}}" mode="scaleToFill" />
  18.                 <text class="a-list-item-content">{{item.title}}</text>
  19.                 <view a:if={{item.extra}} class="a-list-item-extra" >{{item.extra}}</view>
  20.                 <view a:if={{item.arrow}} class="a-list-arrow a-list-arrow-{{item.arrow}}" />
  21.                 <view class="a-list-item-bottom" />
  22.                             </view>
  23.                         </view>
  24.                     </block>
  25.                 </view>
  26.             </view>
  27.         </view>
  28.     </scroll-view>
acss： 
  1. .a-list {
  2.     box-sizing: border-box;
  3. }
  4.  
  5. .a-list .a-list-header {
  6.     padding: 30rpx 30rpx 18rpx;
  7.     font-size: 28rpx;
  8.     color: #888;
  9.     display: inline-block;
  10.     width: 100%;
  11.     box-sizing: border-box;
  12. }
  13.  
  14. .a-list .a-list-items .a-list-item {
  15.     display: flex;
  16.     font-size: 30rpx;
  17.     line-height: 1.5;
  18.     color: #333333;
  19.     min-height: 88rpx;
  20.     align-items: center;
  21.     padding-left: 30rpx;
  22.     background: #fff;
  23. }
  24.  
  25. .a-list .a-list-item .a-list-item-bottom {
  26.     display: block;
  27.     position: absolute;
  28.     width: 100%;
  29.     border-bottom: 1px solid #ddd;
  30.     left: 0;
  31.     bottom: 0;
  32.     right: auto;
  33.     top: auto;
  34. }
  35.  
  36. .a-list .a-list-item .a-list-item-thumb {
  37.     width: 44rpx;
  38.     height: 44rpx;
  39.     margin-right: 30rpx;
  40. }
  41.  
  42. .a-list .a-list-item .a-list-item-line {
  43.     position: relative;
  44.     display: flex;
  45.     flex: 1;
  46.     align-items: center;
  47.     align-self: stretch;
  48.     padding-right: 30rpx;
  49.     min-height: 88rpx;
  50.     overflow: hidden;
  51. }
  52.  
  53. .a-list .a-list-item.am-list-item-top .a-list-item-line {
  54.     align-items: flex-start;
  55. }
  56.  
  57. .a-list .a-list-item.am-list-item-middle .a-list-item-line {
  58.     align-items: center;
  59. }
  60.  
  61. .a-list .a-list-item.am-list-item-bottom .a-list-item-line {
  62.     align-items: flex-end;
  63. }
  64.  
  65. .a-list .a-list-item .a-list-item-content {
  66.     flex: 1;
  67.     flex: 1;
  68.     color: #000;
  69.     font-size: .34rem;
  70.     text-align: left;
  71.     line-height: 1.5;
  72.     width: auto;
  73.     overflow: hidden;
  74.     text-overflow: ellipsis;
  75.     white-space: nowrap;
  76.     padding-top: .14rem;
  77.     padding-bottom: .14rem;
  78. }
  79.  
  80. .a-list .a-list-item.last .a-list-item-bottom{
  81.     border-bottom: none;
  82. }
  83.  
  84. .a-list .a-list-item .a-list-item-extra {
  85.     flex-basis: 36%;
  86.     color: #888;
  87.     font-size: 32rpx;
  88.     text-align: right;
  89.     line-height: 1.5;
  90.     width: auto;
  91.     overflow: hidden;
  92.     text-overflow: ellipsis;
  93.     white-space: nowrap;
  94.     padding-top: .14rem;
  95.     padding-bottom: .14rem;
  96. }
  97.  
  98. .a-list .a-list-item .a-list-item-line-wrap .a-list-item-content, .a-list .a-list-item .a-list-item-line-wrap .a-list-item-extra {
  99.     white-space: normal;
  100. }
  101.  
  102. .a-list .a-list-item.a-list-item-hover {
  103.     background-color: #ddd;
  104. }
  105.  
  106. .a-list .a-list-arrow {
  107.     display: block;
  108.     width: 30rpx;
  109.     height: 30rpx;
  110.     margin-left: 16rpx;
  111.     background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="26" viewBox="0 0 16 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="UI-KIT_基础元件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="9.9基础元件" transform="translate(-5809.000000, -8482.000000)" fill="#C7C7CC"><polygon id="Disclosure-Indicator" points="5811 8482 5809 8484 5820.5 8495 5809 8506 5811 8508 5825 8495"></polygon></g></g></svg>');
  112.     background-size: contain;
  113.     background-repeat: no-repeat;
  114.     background-position: 50% 50%;
  115.     visibility: hidden;
  116.     transition: transform 0.3s;
  117. }
  118.  
  119. .a-list .a-list-arrow.a-list-arrow-horizontal {
  120.     visibility: visible;
  121. }
  122.  
  123. .a-list .a-list-arrow.a-list-arrow-vertical {
  124.     visibility: visible;
  125.     transform: rotate(90deg);
  126. }
  127.  
  128. .a-list .a-list-arrow.a-list-arrow-vertical-up {
  129.     visibility: visible;
  130.     transform: rotate(270deg);
  131. }

js： 
  1. Page({
  2.   ...list,
  3.   data: {
  4.     listData: {
  5.       onItemTap: 'handleListItemTap',
  6.       header: 'list1',
  7.       data: [
  8.         {
  9.           title: '标题文字',
  10.           extra: '基本使用'
  11.         },
  12.         {
  13.           thumb: 'https://zos.alipayobjects.com/rmsportal/NTuILTPhmSpJdydEVwoO.png',
  14.           title: '标题图片',
  15.           arrow: 'horizontal',
  16.         },
  17.         {
  18.           title: '标题文字',
  19.           arrow: 'horizontal',
  20.           extra: '带箭头'
  21.         },
  22.         {
  23.           thumb: 'https://zos.alipayobjects.com/rmsportal/NTuILTPhmSpJdydEVwoO.png',
  24.           title: '标题文字',
  25.           arrow: 'horizontal',
  26.           extra: '完整使用'
  27.         },
  28.         {
  29.           title: '标题文字不换行很长很长很长很长很长很长很长很长很长很长',
  30.           arrow: 'horizontal',
  31.         },
  32.         {
  33.           title: '标题文字换行很长很长很长很长很长很长很长很长很长很长',
  34.           arrow: 'horizontal',
  35.           textMode: 'wrap'
  36.         },
  37.         {
  38.           title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
  39.           extra: '没有箭头',
  40.           textMode: 'wrap'
  41.         },
  42.         {
  43.           title: '标题文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
  44.           extra: '子元素垂直对齐',
  45.           textMode: 'wrap',
  46.           align: 'top'
  47.         },
  48.       ]
  49.     },
  50.   },
  51.   handleListItemTap(e) {
  52.     my.showToast({
  53.       content: `第${e.currentTarget.dataset.index}个Item`,
  54.       success: (res) => {
  55.  
  56.       },
  57.     });
  58.   }
  59. })
六：标签：demo里只有3个标签，如果加多了的话，就不适用了，这里只需要将外层的display：flex，改成 flex
效果图：


axml： 
  1. <view class="container">
  2.     <view class="mt-24"><text>事故类别：</text></view>
  3.     <view class="tag-list">
  4.         <block a:for="{{tags}}">
  5.   <view class="a-tag {{props.selected ? 'a-tag-active' : 'a-tag-normal'}}" onTap="{{props.onChange}}" data-selected="{{props.selected}}">
  6.           <text class="tag">{{props.label}}<text>
  7.   </view>  
  8.         </block>
  9.     </view>
  10.     <view class="mt-24">
  11.         <text>您选择的是: {{selectedLables}}</text>
  12.     </view>
  13. </view>

acss： 
  1. .a-tag {
  2.     display: inline-block;
  3.     position: relative;
  4.     font-size: 28rpx;
  5.     text-align: center;
  6.     padding: 0 30rpx;
  7.     height: 50rpx;
  8.     line-height: 50rpx;
  9.     border-radius: 6rpx;
  10.     box-sizing: border-box;
  11.     margin: 20rpx;
  12. }
  13.  
  14. .a-tag-normal {
  15.     background-color: #fff; 
  16.     color: #888;
  17.     border: 1px solid #ddd;
  18. }
  19.  
  20. .a-tag-active {
  21.     background-color: #fff;
  22.     color: #108ee9;
  23.     border: 1px solid #108ee9;
  24. }
  1. .container {
  2.     padding: 0 20rpx;
  3. }
  4.  
  5. .mt-24 {
  6.     margin-top: 24rpx;
  7. }
  8.  
  9. .tag-list {
  10.     //display: flex;   将这里去掉就好了
  11.     //justify-content: space-between;
  12.  
  13.     flex-wrap: wrap;
  14.    
  15.     margin-top: 24rpx;
  16. }




j s:





 

 

 
 
  1. Page({
  2.     data: {
  3.         selectedLables: ',疾病医疗,',
  4.         tags: [
  5.             {
  6.                 label: '意外医疗',
  7.                 selected: false,
  8.                 onChange: 'onTagChange1',
  9.             },
  10.             {
  11.                 label: '疾病医疗',
  12.                 selected: true,
  13.                 onChange: 'onTagChange2',
  14.             },
  15.             {
  16.                 label: '疾病住院',
  17.                 selected: false,
  18.                 onChange: 'onTagChange3',
  19.             },
  20.             {
  21.                 label: '疾病住院',
  22.                 selected: false,
  23.                 onChange: 'onTagChange4',
  24.             },
  25.             {
  26.                 label: '疾病住院',
  27.                 selected: false,
  28.                 onChange: 'onTagChange5',
  29.             },
  30.             {
  31.                 label: '疾病住院',
  32.                 selected: false,
  33.                 onChange: 'onTagChange6',
  34.             },
  35.             {
  36.                 label: '疾病住院',
  37.                 selected: false,
  38.                 onChange: 'onTagChange7',
  39.             }, {
  40.                 label: '疾病住院',
  41.                 selected: false,
  42.                 onChange: 'onTagChange8',
  43.             },
  44.  
  45.         ]
  46.     },
  47.     onTagChange1(e) {
  48.         this.onTagChange(e.target.dataset.selected, 0);
  49.     },
  50.     onTagChange2(e) {
  51.         this.onTagChange(e.target.dataset.selected, 1);
  52.     },
  53.     onTagChange3(e) {
  54.         this.onTagChange(e.target.dataset.selected, 2);
  55.     },
  56.     onTagChange4(e) {
  57.         this.onTagChange(e.target.dataset.selected, 3);
  58.     },
  59.     onTagChange5(e) {
  60.         this.onTagChange(e.target.dataset.selected, 4);
  61.     },
  62.     onTagChange6(e) {
  63.         this.onTagChange(e.target.dataset.selected, 5);
  64.     },
  65.     onTagChange7(e) {
  66.         this.onTagChange(e.target.dataset.selected, 6);
  67.     },
  68.     onTagChange8(e) {
  69.         this.onTagChange(e.target.dataset.selected, 7);
  70.     },
  71.     onTagChange(selected, index) {
  72.         const tempTag = [].concat(this.data.tags);
  73.         tempTag[index].selected = !selected;
  74.         const labels = tempTag.map((item) => item.selected ? item.label : '').join(',');
  75.         this.setData({
  76.             tags: tempTag,
  77.             selectedLables: labels,
  78.         });
  79.     }
  80. })
以上几个都是常用到的模板，具体模板在 
 这里，下载就可以了。 

 

 
 
 


                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/88131
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号