效果图

小程序分组实现。

实现

代码结构如下图图：

文件目录说明如下：

│  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}}'>{{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 下载导入即可运行。

微信小程序类ExpandableListView分组实现相关推荐

关于微信小程序通讯录人名分组的实现
引言最近实现的一个小程序需要制作一个通讯录,我参考的标准肯定是微信的界面啊,下面介绍一下我界面的实现和操作页面实现我发现vant里面的indexBar能够实现这个界面功能文字转拼音实现分组我 ...
微信小程序类快递自动填写收发货地址功能
开发场景获取当前位置信息或者某地的行政区划信息或者街道信息,实现类似电商平台填写收货地址功能. 技术选型微信小程序JavaScript SDK 微信小程序插件确定业务逻辑及页面设计以简洁大气为 ...
3分钟搞定微信小程序类美团用户商家距离计算
前言小程序实操,距离计算总结. 思路一共有两种方法,各有利弊: 1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算; 2.利用腾讯地图位置服务cal ...
微信小程序类目审核加急通道开放了
开发小程序的伙伴都知道,腾讯审核有多麻烦,时间也拉得比较长,导致很多时候审核需要好长时间,今天去刷公众号的时候,发现他发布了小程序开发者开放"类目加急通道",的通知,我们一起来看看 ...
微信小程序类美团用户商家距离计算
前言小程序实操,距离计算总结. 思路一共有两种方法,各有利弊: 1.利用小程序的wx.getLocation 方法得到用户的经纬度,然后用已知的商家的经纬进行计算; 2.利用腾讯地图位置服务cal ...
即构微信小程序直播组件是什么？有哪些功能？哪些小程序类目可以使用？
即构直播助手是微信官方认证的微信小程序插件,为开发者提供便捷.强大的微信小程序音视频直播服务. 即构直播助手除了包含微信小程序下的音视频推拉流能力,还支持iOS.Android.Windows.Web ...
基于scrapy以Django为后端的校园资讯采集的微信小程序
USCCampusEastStreet 一个采用scrapy爬虫以Django为后端的微信小程序项目地址:https://github.com/WGowi/USCCampusEastStreet 文 ...
uniApp 实现微信小程序和app视频播放flv格式视频监控
测试要在真机测试,微信开发者工具不能测试 video 支持 App平台: 支持本地视频(mp4/flv).网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp). 小程序: l ...
实现微信小程序直播的2种方式｜7大场景解决方案
ZEGO 微信小程序直播SDK 可以在微信小程序中提供实时音视频直播服务,从而实现电商直播/在线教育/在线问诊/视频客服等各种业务场景.但是由于微信小程序的官方限制,在某些场景下需要额外使用 ZEGO ...

微信小程序类ExpandableListView分组实现

效果图

实现

核心代码

微信小程序类ExpandableListView分组实现相关推荐

最新文章

热门文章