admin/danyang-match
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(discover): chip-targeted filter panel — scroll to + highlight target section

Browse Source 
- Each filter chip (年龄/学历/婚姻) carries data-target pointing to its section
- openFilterPanel receives TouchEvent, maps target to section id, sets panelScrollTo + panelHighlight
- Panel uses scroll-view scroll-into-view with scroll-with-animation for smooth scroll
- Targeted section gets pink outline highlight via .hl class
- Non-targeted sections remain normally visible for context
This commit is contained in:
Codex
2026-09-14 11:27:52 +08:00
parent adfa4ff31e
commit 22325ec2b0
3 changed files with 54 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniapp/pages/discover/discover.wxml
+39 -37
View File
@@ -19,9 +19,9 @@
<view class="filter-chips">
<view class="filter-chip {{!hasActiveFilter ? 'active' : ''}}" bindtap="onResetFilter">推荐</view>
<view class="filter-chip {{applied.regionCode === '321181' ? 'active' : ''}}" bindtap="onTopRegionTap">丹阳本地</view>
<view class="filter-chip {{applied.minAge !== 18 || applied.maxAge !== 60 ? 'active' : ''}}" bindtap="openFilterPanel">年龄</view>
<view class="filter-chip {{!!applied.educationCode ? 'active' : ''}}" bindtap="openFilterPanel">学历</view>
<view class="filter-chip {{!!applied.maritalStatus ? 'active' : ''}}" bindtap="openFilterPanel">婚姻</view>
<view class="filter-chip {{applied.minAge !== 18 || applied.maxAge !== 60 ? 'active' : ''}}" bindtap="openFilterPanel" data-target="age">年龄</view>
<view class="filter-chip {{!!applied.educationCode ? 'active' : ''}}" bindtap="openFilterPanel" data-target="education">学历</view>
<view class="filter-chip {{!!applied.maritalStatus ? 'active' : ''}}" bindtap="openFilterPanel" data-target="marital">婚姻</view>
</view>
</scroll-view>
</view>
@@ -30,47 +30,49 @@
<block wx:if="{{showFilter}}">
<view class="filter-mask" bindtap="closeFilterPanel"></view>
<view class="filter-panel-wrap">
<!-- 年龄范围 -->
<view class="filter-section">
<view class="filter-heading">
<text class="filter-label">年龄范围</text>
<text class="filter-value">{{tempMinAge}}–{{tempMaxAge}} 岁</text>
<scroll-view scroll-y class="filter-scroll-wrap" scroll-into-view="{{panelScrollTo}}" scroll-with-animation>
<!-- 年龄范围 -->
<view id="sec-age" class="filter-section {{panelHighlight === 'age' ? 'hl' : ''}}">
<view class="filter-heading">
<text class="filter-label">年龄范围</text>
<text class="filter-value">{{tempMinAge}}–{{tempMaxAge}} 岁</text>
</view>
<slider class="range-slider" min="18" max="60" value="{{tempMinAge}}" activeColor="#FF4F91"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMinAgeChange" />
<slider class="range-slider" min="18" max="60" value="{{tempMaxAge}}" activeColor="#7B63D9"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMaxAgeChange" />
</view>
<slider class="range-slider" min="18" max="60" value="{{tempMinAge}}" activeColor="#FF4F91"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMinAgeChange" />
<slider class="range-slider" min="18" max="60" value="{{tempMaxAge}}" activeColor="#7B63D9"
backgroundColor="#E9EAF2" block-size="18" bindchange="onMaxAgeChange" />
</view>
<!-- 地区 -->
<view class="filter-section">
<text class="filter-label">地区</text>
<view class="tag-group">
<view wx:for="{{regions}}" wx:key="code"
class="tag {{tempRegionCode === item.code ? 'selected' : ''}}"
bindtap="onPanelRegionTap" data-code="{{item.code}}">{{item.label}}</view>
<!-- 地区 -->
<view id="sec-region" class="filter-section {{panelHighlight === 'region' ? 'hl' : ''}}">
<text class="filter-label">地区</text>
<view class="tag-group">
<view wx:for="{{regions}}" wx:key="code"
class="tag {{tempRegionCode === item.code ? 'selected' : ''}}"
bindtap="onPanelRegionTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
</view>
<!-- 学历 -->
<view class="filter-section">
<text class="filter-label">学历</text>
<view class="tag-group">
<view wx:for="{{educations}}" wx:key="code"
class="tag {{tempEducationCode === item.code ? 'selected' : ''}}"
bindtap="onPanelEducationTap" data-code="{{item.code}}">{{item.label}}</view>
<!-- 学历 -->
<view id="sec-education" class="filter-section {{panelHighlight === 'education' ? 'hl' : ''}}">
<text class="filter-label">学历</text>
<view class="tag-group">
<view wx:for="{{educations}}" wx:key="code"
class="tag {{tempEducationCode === item.code ? 'selected' : ''}}"
bindtap="onPanelEducationTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
</view>
<!-- 婚姻状态 -->
<view class="filter-section">
<text class="filter-label">婚姻状态</text>
<view class="tag-group">
<view wx:for="{{maritalStatuses}}" wx:key="code"
class="tag {{tempMaritalStatus === item.code ? 'selected' : ''}}"
bindtap="onPanelMaritalTap" data-code="{{item.code}}">{{item.label}}</view>
<!-- 婚姻状态 -->
<view id="sec-marital" class="filter-section {{panelHighlight === 'marital' ? 'hl' : ''}}">
<text class="filter-label">婚姻状态</text>
<view class="tag-group">
<view wx:for="{{maritalStatuses}}" wx:key="code"
class="tag {{tempMaritalStatus === item.code ? 'selected' : ''}}"
bindtap="onPanelMaritalTap" data-code="{{item.code}}">{{item.label}}</view>
</view>
</view>
</view>
</scroll-view>
<view class="filter-actions">
<ui-button variant="ghost" size="md" block bind:tap="onResetFilter">重置</ui-button>