微信小程序下拉筛选菜单

微信小程序下拉筛选菜单


最近在做一个社交商城的微信小程序项目,碰到下拉筛选菜单,按自己的想法写了一个,写的不好忘各位大佬指教,哈哈~
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="radioChange">
      <view wx:for="{{brandDown}}" wx:key="this" class='brand-down {{brandFlag?"brand-show":""}}' data-item='{{item.value}}' data-index='{{index}}'>
        <label  class='radio'>
          <radio color="#F46458" value="{{item.name}}" checked="{{item.checked}}"/>
          <text>{{filter.abbreviationEight(item.value)}}</text>
        </label >
      </view>
    </radio-group>
  </scroll-view>
</view>

wxss:

.screen{
  position: fixed;
  top: 88rpx;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.screen>.screen-name{
  flex: 1;
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  line-height: 100rpx;
}
.screen>.screen-name>.iconfont{
  font-size: 12rpx;
  margin-left: 8rpx;
}

.drop-down-background{
  position: fixed;
  top: 188rpx;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
.drop-down-flex{
  position: fixed;
  top: 188rpx;
  left: 0;
  width: 100%;
  z-index: 222;
  max-height: 100%;
  overflow: hidden;
}
.drop-down{
  width: 100%;
  padding: 0 24rpx;
  background: #fff;
  height: 0rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #666;
  transition: all 300ms;
  overflow: hidden;
}
.down-active{
  color: #F46458;
}
.down-show{
  height: 88rpx;
}
.iconfontAnimation{
  transform: rotate(180deg);
  transition: all 300ms;
}
.screen-color>text{
  color: #F46458;
}

/* 品牌下拉 */
.brand{
  width: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.brand-down{
  width: 50%;
  padding-left: 24rpx;
  height: 0rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #666;
  transition: height 300ms;
  overflow: hidden;
}
.radio{
  display: flex;
  align-items: center;
  width: 100%;
}
.brand-down>.radio>radio{
  margin-right: 24rpx;
}
.radio:nth-child(odd){
  border-right: 2rpx solid rgba(0, 0, 0, 0.1);
}
.brand-show{
  height: 100rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchResult:false,
    screen:"综合",
    screenDown: { screenDown:["综合","价格升序","价格降序"],screen:0},
    screenFlag:false,//控制综合下拉框是否显示
    screenColor: false,
    brandFlag:false,
    brandDown: [
      { name: '火星人', value: '火星人' },
      { name: '美达', value: '美达', checked: 'true' },
      { name: 'DFSD', value: 'DFSD' },
      { name: 'WANGJIAL', value: 'WANGJIAL' },
      { name: '东方', value: '东方' },
      { name: '火星人(marssenna)', value: '火星人(marssenna)' },
      { name: '大学新村', value: '大学新村' },
      { name: '大学新村', value: '大学新村' },
      { name: '大学新村', value: '大学新村' },
      { name: '大学新村大学新村大学新村大学新村', value: '大学新村大学新村大学新村大学新村' },
    ],
    brand:0,
    brandColor: false,//控制品牌下拉框是否显示
    brandText:"品牌",
    salesColor:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  screenShow: function () {//综合下拉
    if (this.data.screenFlag){
      this.setData({
        screenFlag : !this.data.screenFlag,
        brandFlag: false,
      })
    }else{
      this.setData({
        screenFlag: !this.data.screenFlag,
        brandFlag: false,
      })
    }
  },
  screenChoice:function(e){//综合下拉选择子项
    console.log(e)
    this.setData({
      screen: e.currentTarget.dataset.item,
      "screenDown.screen": e.currentTarget.dataset.index,
      screenFlag: false,
      screenColor:true
    })
  },
  handletouchtart: function (event) {//点击透明背景隐藏下拉
    this.setData({
      screenFlag: false,
      brandFlag: false
    })
  },

  brandShow: function () {//品牌下拉
    if (this.data.brandFlag) {
      this.setData({
        brandFlag: !this.data.brandFlag,
        screenFlag: false,
      })
    } else {
      this.setData({
        brandFlag: !this.data.brandFlag,
        screenFlag: false,
      })
    }
  },
  radioChange: function (e) {//品牌选择
    console.log(e)
    this.setData({
      brandText: e.detail.value,
      brandFlag: false,
      brandColor: true
    })
  },
  salesNumber:function(){//销量
    if (this.data.salesColor){
      this.setData({
        salesColor: "",
        screenFlag: false,
        brandFlag: false,
      })
    }else{
      this.setData({
        salesColor: "#F46458",
        screenFlag: false,
        brandFlag: false,
      })
    }
    
  },
 })

在这里插入图片描述在这里插入图片描述最终全部选择后的效果就是这样啦啦啦~

  • 8
    点赞
  • 70
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值