效果图
小程序分组实现。
实现
代码结构如下图图:
文件目录说明如下:
│ 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 //一些简单的工具集
核心代码
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>
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;
}
由于篇幅原因就不赘述了,源码: https://download.csdn.net/download/she_lock/10560024 下载导入即可运行。