本次工程整体比较复杂
1.在wxml层面可以分为三个模块
- 搜索框
<view class="search-flex {{scrolltop>200?'tophide':''}}"> <view class="search-bar"> <input type="text" maxlength="12" placeholder="请输入关键字查询" bindinput="inputSearch"></input> <button class="search-btn" bindtap="submitSearch" wx:if="{{showsearch}}">搜索</button> </view>
- 筛选框,多级筛选框并与js中内容相映射
<view class="filter-flex"> <view class="filter-tab"> <text bindtap="setFilterPanel" data-findex="1" class="{{showfilterindex==1?'active':''}}">审计类别</text> </view> <view class="filter-content" wx:if="{{showfilter}}"> <view class="filter-panel" wx:if="{{showfilterindex==1}}"> <view class="filter-panel-left"> <view wx:for="{{filterdata.sort}}" wx:key="{{item.id}}" bindtap="setSortIndex" data-sortindex="{{index}}" data-sortid="{{item.id}}" class="{{sortindex==index?'active':''}}">{{item.title}}</view> </view> <view class="filter-panel-right"> <view wx:for="{{filterdata.sort[sortindex].subsort}}" wx:key="{{item.id}}" bindtap="setSubsortIndex" data-subsortindex="{{index}}" data-subsortid="{{item.id}}" class="{{subsortindex==index?'active':''}}">{{item.title}}</view> </view> </view> <view class="filter-panel" wx:if="{{showfilterindex==2}}"> <view class="filter-panel-left"> <view wx:for="{{filterdata.city}}" wx:key="{{item.id}}" bindtap="setCityIndex" data-cityindex="{{index}}" data-cityid="{{item.id}}" class="{{cityindex==index?'active':''}}">{{item.title}}</view> </view> <view class="filter-panel-right"> <view wx:for="{{filterdata.city[cityindex].subcity}}" wx:key="{{item.id}}" bindtap="setSubcityIndex" data-subcityindex="{{index}}" data-subcityid="{{item.id}}" class="{{subcityindex==index?'active':''}}">{{item.title}}</view> </view> </view> </view> <view class="filter-shadow" wx:if="{{showfilter}}" bindtap="hideFilter"></view> </view>
审计项目 滚动显示,动态变化
<scroll-view class="container-body" scroll-y="true" scroll-top="{{scrolltop}}" bindscroll="scrollHandle" lower-threshold="50" bindscrolltolower="scrollLoading">
<view class="service-list">
<navigator class="service-item" wx:for="{{servicelist}}" wx:key="{{item.id}}" url="../shenjidetail/shenjidetail?id={{item.id}}&i={{item.i}}">
<view class="service-text">
<view class="service-tite">{{item.name}}</view>
<view class="service-tags">
<text>{{item.tag}}</text>
</view>
</view>
</navigator>
</view>
<view class="gototop {{scrolltop>200?'active':''}}" bindtap="goToTop"></view>
</scroll-view>