微信小程序类ExpandableListView分组实现_小程序list-view

效果图

小程序分组实现。

实现

代码结构如下图图：

文件目录说明如下：

│  app.js		
│  app.json
│  app.wxss
│  project.config.json
│  
├─constants
│      restApi.js		//存放api
│      
├─images			//图片
│      arrow-down.png
│      arrow-right.png
│      arrow-up.png
│      
├─pages
│  ├─ExpandableListView		//选择图书馆页面
│  │      ExpandableListView.js
│  │      ExpandableListView.json
│  │      ExpandableListView.wxml
│  │      ExpandableListView.wxss
│  │      
│  └─index				//首页
│          index.js
│          index.json
│          index.wxml
│          index.wxss
│          
└─utils
        http-rest.js			//Restful接口封装
        util.js				//一些简单的工具集
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

核心代码

ExpandableListView.xml

<!--pages/ExpandableListView/ExpandableListView.wxml-->
<view class='container'>

    <form bindsubmit="formSubmit">
        <view class='search'>
            <input class='search_input' name='search_data' placeholder="请输入图书馆名称"></input>
            <view class='search_btn_wrap'>
                <button formType="submit" class='search_btn'> </button>
            </view>
        </view>
    </form>


    <view class='result-box' hidden='{{search_data ? false: true}}'>
        <block wx:for="{{search_data}}" wx:for-index="idxsearch" wx:for-item="search">
            <text catchtap='selectLib' class='library-item' data-idxlib='{{idxsearch}}'>{{search.orgName}}</text>
        </block>
    </view>


    <block wx:for="{{provinces}}" wx:for-index="idx" wx:for-item="item">

        <view class='province'>

            <view class='province-sub' catchtap="showChilds" data-param="{{idx}}">
                <text class='province-sub-name' catchtap='showChilds' data-param="{{idx}}">{{item.areaName}}</text>
                <image class='province-sub-img' data-param="{{idx}}" src='{{isShowFrom == idx ? "/images/arrow-up.png" : "/images/arrow-down.png"}}' catchtap='showChilds'></image>
            </view>

            <view class="{{isShowFrom == idx ? '' : 'tui-hide'}}">
                <view class='library-box'>
                    <block wx:for="{{librarys}}" wx:for-index="idxlib" wx:for-item="lib">
                        <text catchtap='selectLib' class='library-item' data-idxlib='{{idxlib}}'>{{lib.orgName}}</text>
                    </block>
                </view>
            </view>
        </view>
    </block>

</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

ExpandableListView.wxss

/* pages/ExpandableListView/ExpandableListView.wxss */

.province {
    margin: 0rpx 10rpx;
    overflow: hidden;
    width: 100%;
}

.tui-hide {
    display: none;
}

.province-sub {
    width: 100%;
    height: 91rpx;
    background-color: #eee;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #fff;
}

.province-sub-name {
    margin-left: 34rpx;
    font-size: 30rpx;
    color: #282828;
}

.province-sub-img {
    width: 26rpx;
    height: 15rpx;
    margin-right: 34rpx;
}

.library-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
}

.library-item {
    height: 90rpx;
    width: 100%;
    line-height: 90rpx;
    padding-left: 97rpx;
    font-size: 30rpx;
    color: #656565;
    border-bottom: 1rpx solid #eee;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.search {
    width: 690rpx;
    height: 88rpx;
    border: 3rpx solid #11d5ef;
    border-radius: 40rpx;
    background-color: #fff;
    margin-top: 24rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.search_btn {
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
}

.result-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
}
.search_btn_wrap {
    margin-right: 30rpx;
    margin-left: 6rpx;
    width: 53rpx;
    height: 50rpx;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAyCAYAAAD845PIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU3NTAyRUJDNzlENjExRThBRTg4OENBMTc0ODEwN0VFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU3NTAyRUJENzlENjExRThBRTg4OENBMTc0ODEwN0VFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTc1MDJFQkE3OUQ2MTFFOEFFODg4Q0ExNzQ4MTA3RUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTc1MDJFQkI3OUQ2MTFFOEFFODg4Q0ExNzQ4MTA3RUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6mxhOYAAAD8ElEQVR42tSZz0tUURTH3wxiBjUqtisNMjPLhRBmEVhqKQppy9lGkJLRj0XrXIdQWZoF1T/QwhKs1BEMUjQUF1kptSjdBJblBOls7Bz83jxcZkbf3DvznANf5t03753zPu/+Ps8XDAadBCyXVE06RTpEKibtIGWTfpP+kGZIH0jDpBBp0UmRZbi8vo7UQqonbYtxTTa0G+CXSSukV6QHpH7SajKh/Ju87jhpHA92Lg5QLOPrm3D/GPx5BpVF6iS9JZVr/zFkG6mBVEjKIfnwW4jzbbhOWjn8dcK/dfPF6VP5pBekMnFumfSY1EGadRHnAOkK6YIGMkVqJM2loqZK8DYlUC/pIPrIrMs4s7ivGH6UlSFOSbKh9qAz56McweDAb/SrYbxv8NMMv6pF9CNuUqCy8CZVgDD6xkPLzf4R/IbFi+y11cd0qHbR5CIY6UJJGqRC8B8RTbHdNtQx0iVRvkoaSvI8OYQ4yi7ZGO4VlA8jmg/lHlJ3ihYA3Rhl1XPctgVVK+ahZe3tpcJ4uP+L4wrSGRtQLeLcE4xSqTQeVZ9qzdAIKhcjkbK7jjfWIY4b8FwJQ9WQMlF+l8DEastmsC508Dw1JlCVovza8dYGxHGlCVSpKI96DCXjl5pA7Rfljx5DyfiFJlDZovzDY6gFcZxjAhUQ5SWPocLiOGACtWTDkSXbaeMF+5EoUZbnMdQucfzLBOqztjn00mT8LyZQ77WVupcmV+jTJlBvRLnWYyi5kB02gQqJjRqvkIs8AipCfLVBDZlAcea0T5y75hGUjNvnGGR0/WKjpuw8qSDFQAWIq6zLxn6qHyt0tu0ebD/uIS7buLawTRhqFbtdlePmhEhzioA4TqOtWtITL6OaQ960VScZqFrbHLLJjJYxFNsNZy0VrDZqPSabtQ2sCv4zo6wqBkzAdChOfpwlzYu1GI9EFy0Dsb+X2lrPGli0tPM8JuE5UWOcoX1O2mthlOuBP/U56Lu2OjcG88fZrJ0QTdFBZ/5Eup/ABF2E+zgP0STOT2HCrYqxgE0ILN73qTmsxbrEqMi57lYkZzhJctNZ+6q4T2xbAijX4/8xXN/qrOfKV+GX/XN6bIJ02haYb5PffDn4HdJRC/2J56HrpJEo/x0hDcbY9S5gbThlUlN6QqQCfY371opLkAjuq4OfkRjXqRpbNKkxtx+yB6BcDPUnSYed9a/zAXT6MPrPtOP+6/wEakTFiQYWt8YyEmxC/IDPoGSYEZjf2bqmwFw3xa0MtRmwwWhgWx1qI7C8aGDpAOUaLF2gXIGlE9RG89h/sHSDYpvcAOxWOkLFA+PzwXSFigY2iT73M52hJFhIAfHJfwIMAErU4uDIwrA4AAAAAElFTkSuQmCC');
}

.search_input {
    margin-left: 30rpx;
    width: 100%;
	font-size: 30rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

由于篇幅原因就不赘述了，源码： https://download.csdn.net/download/she_lock/10560024 下载导入即可运行。