微信小程序下拉筛选菜单

最新推荐文章于 2025-06-16 18:48:25 发布

原创

最新推荐文章于 2025-06-16 18:48:25 发布 · 7.5k 阅读

75 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #下拉菜单 #筛选菜单

微信小程序下拉筛选菜单

最近在做一个社交商城的微信小程序项目，碰到下拉筛选菜单，按自己的想法写了一个，写的不好忘各位大佬指教，哈哈~
ps:因为后端还没有数据所以筛选功能还没做，但是基本功能实现后做筛选也很简单啦~
wxml:

<view wx:if="{
   
   {!searchResult}}">
  <view class='screen'>
    <view class='screen-name {
   
   {screenColor?"screen-color":""}}' bindtap='screenShow'>
      <text>{
   
   {
   
   screen}}</text>
      <text class='iconfont iconsanjiaoxing1 {
   
   {screenFlag?"iconfontAnimation":""}}'></text>
    </view>
    <view class='screen-name' style='color:{
   
   {salesColor}}' bindtap='salesNumber'>销量</view>
    <view class='screen-name {
   
   {brandColor?"screen-color":""}}' bindtap='brandShow'>
      <text>{
   
   {
   
   filter.abbreviationSix(brandText)}}</text>
      <text class='iconfont iconsanjiaoxing1 {
   
   {brandFlag?"iconfontAnimation":""}}'></text>
    </view>
  </view>
  <!-- 点击综合按钮后展示的下拉框 -->
  <!-- 下拉框透明背景 -->
  <view class='drop-down-background' hidden='{
   
   {!screenFlag}}' bindtouchstart='handletouchtart'></view>
  <view class='drop-down-flex'>
    <view wx:for="{
   
   {screenDown.screenDown}}" wx:key="this" class='drop-down {
   
   {screenDown.screen==index?"down-active":""}} {
   
   {screenFlag?"down-show":""}}' data-item='{
   
   {item}}' data-index='{
   
   {index}}' bindtap='screenChoice'>
      <text>{
   
   {
   
   item}}</text>
      <text class='iconfont iconbianzu5' wx:if='{
   
   {screenDown.screen==index?true:false}}'></text>
    </view>
  </view>
   <!-- 点击品牌按钮后展示的下拉框 -->
  <!-- 下拉框透明背景 -->
  <view class='drop-down-background' hidden='{
   
   {!brandFlag}}' bindtouchstart='handletouchtart'></view>
  <scroll-view scroll-y class='drop-down-flex'>
    <radio-group class="brand" bindchange="rad