效果图
小程序分组实现。
实现
代码结构如下图图：
文件目录说明如下：
│ 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│└─utilshttp-rest.js//Restful接口封装util.js//一些简单的工具集
核心代码
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}}'>{{Name}}</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}}'>{{Name}}</text></block></view></view></view></block></view>
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;}
由于篇幅原因就不赘述了，源码： /download/she_lock/10560024 下载导入即可运行。
