微信小程序|开发实战篇之八-list列表组件及其子组件

最新推荐文章于 2025-10-12 11:06:36 发布

原创

最新推荐文章于 2025-10-12 11:06:36 发布 · 5.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文介绍了一个基于微信小程序的List选择器组件与Tag标签组件的开发实战，详细解析了组件的WXML骨架文件与JS逻辑代码。涵盖组件属性配置、事件监听及自定义布局等方面。

开发实战篇之八

前言
1、list选择器组件
- 1.1 子组件---tag标签组件
- - 1.1.1 tag的骨架文件wxml
  - 1.1.2 tag的js文件
2、list选择器wxml骨架文件
3、list选择器js代码

前言

实战篇内容参考：
1、Lin Ui开源组件源码分析。https://doc.mini.talelin.com/
2、开发过程遇到问题。

1、list选择器组件

1.1 子组件—tag标签组件

在这里插入图片描述

1.1.1 tag的骨架文件wxml

<view style="display:flex">
  <view class="x-tag {
   
   {type==='touch'?'x-tag-touch':''}} {
   
   {plain?'x-tag-plain-'+ size:'x-tag-'+size}} {
   
   {disable?'x-tag-disable':''}} {
   
   {select?'select x-select-class':'x-class'}} {
   
   {plain?'x-tag-plain':''}} {
   
   {'x-tag-'+size+'-'+ shape}}" style="{
   
   {height?'line-height:'+height+'rpx;height:'+height+'rpx;':''}}{
   
   {plain?'color:'+fontColor+';border-color:'+fontColor:'background-color:'+bgColor+';color:'+fontColor}}" mut-bind:tap="handleTap">
    <view class="{
   
   {location==='left'?'content':'content-x'}}" style="{
   
   {iconName?'line-height:0':''}}">
      <x-icon wx:if="{
   
   {icon}}" style="{
   
   {location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" name="{
   
   {icon}}" size="{
   
   {iconSize}}" color="{
   
   {iconColor}}"/>
      <image style="{
   
   {location==='left'?'margin-right:5rpx':'margin-left:5rpx'}}" wx:if="{
   
   {image}}" src="{
   
   {image}}" class="{
   
   {'tag-image-'+size}} x-image-class"></image>
      <slot/>
    </view>
  </view>
</view>

分析：

骨架文件主要是最外部一个view采用flex布局；
然后view作为整个标签的容器。可以设置该标签的type类型；是否镂空plain属性；是否禁用disable；是否可以点击select，与disable的区别就是样式上还有参数名的不同；背景、字体的颜色、高度等；
设置mut-bind:tap监听事件。表示互斥事件，与其他mut-bind:tap函数不会同时响应。具体参考：互斥事件响应。
然后是一个view表示icon组件容器。设置icon的类型、位置、颜色。

1.1.2 tag的js文件

import validator from "../behaviors/validator";
Component({
   
   
  externalClasses: ["x-class", "x-select-class", "x-image-class"],
  behaviors: [validator],
  properties: {
   
   
    // 标签传递内容 string
    name: String,
    // 标签传递内容为 object
    cell: Object,
    // 标签类型touch有最小宽度，reading宽度由文本长度决定
    type: {
   
   
      type: String,
      value: "touch",
      options: ["reading", "touch"]
    },
    bgColor: String,
    fontColor: String,
    disable: Boolean,
    shape: {
   
   
      type: String,
      value: "square",
      options: ["square", "circle"]
    },
    // 标签是否点击
    select: Boolean,
    // 标签是否镂空
    plain: Boolean,
    size: {
   
   
      type: String,
      value: "medium",
      options: ["large", "medium", "mini", "super-mini"]
    },
    locat

最低0.47元/天解锁文章