微信小程序UI之旅：标签流组件的简单实现

效果图

image.png

github传送门：https://github.com/albert-lii/wx-abui/tree/master/abui/widgets/ab-label-flow
demo传送门：https://github.com/albert-lii/wx-abui/tree/master/pages/mainex

自定义属性和方法

属性	描述
src	数据源（数组）

方法	描述
labeltap	标签点击监听

使用示例

<view class="container">
   <ab-label-flow class="label-flow" src="{{labels}}" bindlabeltap="labelTap"/>
</view>

.label-flow {
  margin-top: 30rpx;
  background: tan;
  padding-top: 18rpx;
  padding-left: 20rpx;
}

const LABEL_SOURCE = require('../../utils/label_flow_source.js');

Page({

  data: {
    labels: LABEL_SOURCE.labels
  },
  /**
   * 标签点击监听
   */
  labelTap: function (e) {
    wx.showToast({
      icon: 'none',
      title: e.detail.dataset.item.name,
      duration: 1200
    });
  }
})

{
  "navigationBarTitleText": "abui",
  "usingComponents": {
    "ab-label-flow": "../../abui/widgets/ab-label-flow/ab-label-flow"
  }
}

源码

• ab-label-flow.wxml

<view class="label">
  <view class="label-item" wx:for="{{src}}" wx:for-index="index" wx:for-item="item" wx:key="{{index}}" hover-class="label-item__hover" hover-stay-time="100" bindtap="_labelTap" data-index="{{index}}" data-item="{{item}}">
    {{item.name}}
  </view>
</view>

• ab-label-flow.wxss

.label {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
}

.label-item {
  position: relative;
  height: 51rpx;
  line-height: 51rpx;
  padding-left: 21rpx;
  padding-right: 21rpx;
  margin-right: 20rpx;
  margin-bottom: 18rpx;
  font-size: 25rpx;
  color: #2e2e2e;
  text-align: center;
  background-color: white;
  border-radius: 4px;
}

.label-item__hover {
  color: white;
  background-color: #2e2e2e;
}

• ab-label-flow.js

Component({
  options: {
    multipleSlots: true 
  },

  properties: {
    // 数据源
    src: {
      type: Array
    }
  },

  methods: {
    /**
     * 标签点击监听
     */
    _labelTap: function(e) {
      this.triggerEvent('labeltap', e.currentTarget);
    }
  }
})

• ab-label-flow.json

{
  "component": true,
  "usingComponents": {}
}