前言

实战篇内容参考：
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: {// 标签传递内容 stringname: String,// 标签传递内容为 objectcell: 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"]},location: {type: String,value: "left",options: ["left", "right"]},icon: String,iconSize: {type: String,value: "20"},iconColor: {type: String,value: "#3683D6"},image: String,iconStyle: {type: String,value: "size:20;color:#3683D6"},height: Number},methods: {handleTap() {// 禁用点击事件if (this.data.disable) return;let e = {name: this.data.name,cell: this.data.cell,select: this.data.select};this.triggerEvent("tagtap", e, {bubbles: !0,composed: !0})}}
});

2、list选择器wxml骨架文件

list选择器主要功能是点击列表。主要由整体一个布局中，左侧布局、右侧布局组成。由于需要自定义的左右布局，因此将左右布局使用template来编写。可以进行复用。
其中主要包括tag、badge、icon、image组件。
包括一些外部样式、list组件的点击事件处理方法tapcell()。

（1）tag表示标记或选择的标签，体现为自定义可点击的颜色文本块。
（2）badge表示文字上方的提示标记。数字或是红点标记。
（3）icon即为图标。

<!--components/list/list.wxml-->
<view class="x-list x-class" hover-class="{{isHover?'x-list-hover':''}}" hover-start-time="20" hover-stay-time="50"  style="{{gap?'padding:0 '+gap+'rpx;':''}} {{leftGap?'padding-left:'+leftGap+'rpx':''}} {{rightGap?'padding-right:'+rightGap+'rpx':''}}" mut-bind:tap="tapcell" data-url="{{url}}" data-link-type="{{linkType}}"><!-- left -->// 左侧文集徽标可选<x-badge wx:if="{{(badgeCount > 0 || dotBadge ) && badgePosition ==='left'}}" value="{{badgeCount}}" dot="{{dotBadge}}" max-count="{{badgeMaxCount}}" number-type="{{badgeCountType}}"><template is="cell-left-main" data="{{image,icon,title,desc,tagContent,tagPosition,tagColor,tagShape,tagPlain,iconSize,iconColor}}" /></x-badge><template is="cell-left-main" data="{{image,icon,title,desc,tagContent,tagPosition,tagColor,tagShape,tagPlain,iconSize,iconColor}}" wx:else /><!-- right -->// 左侧文集徽标可选<x-badge x-class="badge-right" wx:if="{{(badgeCount > 0 || dotBadge ) && badgePosition ==='right'}}" value="{{badgeCount}}" dot="{{dotBadge}}" max-count="{{badgeMaxCount}}" number-type="{{badgeCountType}}"><template is="cell-right-main" data="{{rightDesc,tagContent,tagPosition,isLink,tagColor,tagShape,tagPlain}}" /></x-badge><template is="cell-right-main" data="{{rightDesc,tagContent,tagPosition,isLink,tagColor,tagShape,tagPlain}}" wx:else />
</view>// 左边布局的模板骨架文件
<template name="cell-left-main"><view class="left-section "><image wx:if="{{image}}" class="x-image x-class-image x-image-class" src="{{image}}" mode="aspectFit|aspectFill|widthFix" /><x-icon wx:elif="{{icon}}" x-class="x-icon x-class-icon x-icon-class" name="{{icon}}" size="{{iconSize}}" color="{{iconColor}}" /><view class="x-text"><view class="x-class-content x-content-class">{{title}}</view><view class="x-desc x-class-desc x-desc-class" wx:if="{{desc}}">{{desc}}</view></view><x-tag size="mini"  shape="{{tagShape}}" bg-color="{{tagColor}}" x-class="cell-tag" wx:if="{{tagContent && tagPosition ==='left' && !tagPlain}}">{{tagContent}}</x-tag><x-tag size="mini" shape="{{tagShape}}" plain="{{tagPlain}}" font-color="{{tagColor}}" x-class="cell-tag" wx:elif="{{tagContent && tagPosition ==='left' && tagPlain}}">{{tagContent}}</x-tag><slot name="left-section"></slot></view>
</template>// 右边布局的模板骨架文件
<template name="cell-right-main"><view class="right-section x-class-right x-right-class"><slot name="right-section"></slot><x-tag size="mini" shape="{{tagShape}}" bg-color="{{tagColor}}" x-class="cell-tag" wx:if="{{tagContent && tagPosition ==='right' && !tagPlain }}">{{tagContent}}</x-tag><x-tag size="mini" shape="{{tagShape}}" plain="{{tagPlain}}" font-color="{{tagColor}}" x-class="cell-tag" wx:if="{{tagContent && tagPosition ==='right' && tagPlain }}">{{tagContent}}</x-tag><view class="x-text" wx:if="{{rightDesc}}">{{rightDesc}}</view><x-icon x-class="x-link-icon-class" size="26" color="#8c98ae" name="right" wx:if="{{isLink}}" /></view>
</template>

3、list选择器js代码

js代码主要是很多外部传入的properties，以及列表点击事件处理tapcell，点击之后跳转到指定的url。

// components/list/list.js
import hover from '../behaviors/hover'Component({// 定义组件之间关系的，暂时用不到relations: {'../list/list': {type: 'parent', // 关联的目标节点应为子节点linked() {// 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后},linkChanged() {// 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后},unlinked() {// 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后}}},options: {multipleSlots: true},// 基本不使用外部样式externalClasses: ['x-class','x-class-icon','x-icon-class','x-class-image','x-image-class','x-class-right','x-right-class','x-class-content','x-content-class','x-class-desc','x-desc-class','x-link-icon-class'],/*** 组件的属性列表*/properties: {// 是否显示点击效果 默认开启isHover: {type: Boolean,value: true},icon: String,iconColor: {// 默认橘色图标type: String,value: '#FFA020'},image: String,// 定义该list标题title: String,// 定义底部的描述desc: String,tagPosition: {type: String,value: 'left'},tagContent: String,tagShape: {type: String,value: 'square'},tagColor: String,tagPlain: Boolean,badgePosition: {type: String,value: 'left'},// 红点徽标dotBadge: Boolean,badgeCount: Number,badgeMaxCount: {type: Number,value: 99},badgeCountType: {type: String,value: 'overflow'},// 右侧描述文本内容rightDesc: String,// 左右距离list两侧边界距离  gap: Number,// 距离list边界左边距离leftGap: Number,rightGap: Number,// 是否显示跳转图标isLink: {type: Boolean,value: true,},// 跳转类型linkType: {type: String,value: 'navigateTo'},// 跳转路径url: String},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {tapcell: function (e) {const {linkType,url} = e.currentTarget.dataset;if (url) {wx[linkType]({url});}this.triggerEvent('listtap', {e}, { bubbles: true, composed: true });}}
})

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

微信小程序|开发实战篇之二
开发实战篇之二前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...
微信小程序|开发实战篇之一
开发实战篇之一前言 1.通用方法的封装 2.数据获取方法的封装 2.1 抽离classic.js中的request()方法 2.2 组件数据传递 3.movie组件的创建 3.1 组件代码开发 3. ...
微信小程序|开发实战篇之四
开发实战篇之四前言 1.用户页面my的开发 1.1 my.wxml骨架文件 1.2 my页面的布局和样式分析 1.2.1 从原型页面来分析: 1.2.2 继续分析每个大组件中的小组件布局: 1.3 ...
微信小程序|开发实战篇之三
开发实战篇之三前言 1.使用Promise获取多个异步方法的结果 2.高阶组件-search 2.1 search组件的基本结构 2.1.1 search组件的骨架index.wxml文件 2.1. ...
微信小程序|开发实战篇之七-steps进度条组件
开发实战篇之七前言 0.知识点补充 0.1 $emit()函数 0.2 wxs 0.3 ⚡组件间关系 1.steps进度条组件 1.1.step进度条单元的骨架文件wxml 1.2.step进度条单 ...
微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
微信小程序|开发实战篇之五-slide-view滑动菜单组件
开发实战篇之五前言 1.微信小程序操作dom元素 1.1 slide-view组件的wxml骨架文件 1.1.1 涉及movable-view组件属性 1.2 slide-view组件的js文件 1 ...
微信小程序|开发实战篇之request请求（单个、多个参数，json对象，header）
开发实战篇之request请求前言 1.发送单个.多个参数的request 2.发送JSON对象的request 3.发送header的request 前言小程序发送网络请求常会遇到的问题: 请求 ...
微信小程序|开发实战篇之九-image-picker图片选择器组件及其子组件
开发实战篇之九前言 1.grid格子组件 1.1 grid骨架文件wxml 1.2 grid的js文件分析 1.3 grid-item的wxml文件分析 1.4 grid-item的wxss文件分析 ...

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

开发实战篇之八

前言

1、list选择器组件

1.1 子组件—tag标签组件

1.1.1 tag的骨架文件wxml

1.1.2 tag的js文件

2、list选择器wxml骨架文件

3、list选择器js代码

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

最新文章

热门文章