接上次写的筛选【小程序产品筛选，根据不同的分类筛选，价格区间，区域等筛选产品】，优化

最新推荐文章于 2021-12-07 17:13:43 发布
最新推荐文章于 2021-12-07 17:13:43 发布
阅读量1.1k 收藏 19
点赞数 4
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38197886/article/details/117819614
版权

筛选优化 类目配置 数据格式 筛选条件 交互修复
关键词由CSDN通过智能技术生成

因为之前写的筛选存在一个地区的占位，所以当删除地区筛选的时候会报错，后面检查了一下，是因为循环的时候是用index+1去绑定id值的，不太合理，删除一个地区之后很多地方都得改，所以重新做了下优化，筛选类目可自由配置，数据格式按照后台逻辑去设计的，谢谢参考！
ui：
在这里插入图片描述
在这里插入图片描述

后面放代码：

<view class="school_head">

  <view class="search"></view>

  <view class="flex-j-a select">

    <view class="flex-j-a {{item.color}}" wx:for="{{classification}}" wx:key="id"
      bindtap="{{selectId==item.id?'change_sel_c':'change_sel'}}" data-selectId="{{item.id}}">{{item.name}}

      <image wx:if="{{selectId==(index+1)}}" catchtap="{{selectId==(index+1)?'change_sel_c':'change_sel'}}"
        src="/img/techno/t_triangle.png" data-selectId="{{(index+1)}}"></image>

      <image wx:else catchtap="{{selectId==(index+1)?'change_sel_c':'change_sel'}}" src="/img/techno/b_triangle.png"
        data-selectId="{{(index+1)}}"></image>

    </view>

    <view class="flex-j-a" bindtap="change_sel" data-selectId="5">筛选

      <image src="/img/techno/b_triangle.png" catchtap="change_sel" data-selectId="5"></image>

    </view>

  </view>

  <scroll-view scroll-x="true" class="selct_li" wx:if="{{select_show}}">

    <view class="selct_item" wx:for="{{select_arr}}" wx:key="id" data-id="{{item.id}}">{{item.title}}

      <image src="/img/techno/close.png" catchtap="delete_sel" data-id="{{item.id}}"></image>

    </view>

    <view class="selct_item" wx:if="{{select_arr.length>0}}" bindtap="delete_sel_a">清除筛选</view>

  </scroll-view>

  <view class="select_content" wx:else>

    <view class="select_box" wx:for="{{classification}}" wx:key="id" wx:if="{{selectId==item.id}}">

      <view class="select_124">

        <view wx:for="{{classification[index].data}}" wx:key="id" data-id="{{item.id}}" bindtap="get_classifId"
          data-title="{{item.title}}" class="{{item.color}}">{{item.title}}

        </view>

      </view>
    </view>

  </view>

</view>

<view class="model" wx:if="{{show_model}}" bindtap="hide_model" bindtouchmove='hide_model'></view>

<view class="centent">

  <view class="cent_item"></view>

  <view class="cent_item"></view>

  <view class="cent_item"></view>

  <view class="cent_item"></view>

  <view class="cent_item"></view>

  <view class="cent_item"></view>

  <view class="cent_item"></view>

  <view class="cent_item"></view>

</view>

var that;

Page({
  data: {
    select_show: true,

    show_model: false,

    selectId: 0,

    classification: [{
        name: '驾照类型',

        color: "f4",
        id:1,
        data: [{
            title: 'A1',

            id: 11,

            color: "f4"

          },

          {
            title: 'A2',

            id: 12,

            color: "f4"

          },

          {
            title: 'A3',

            id: 13,

            color: "f4"

          },

          {
            title: 'B1',

            id: 14,

            color: "f4"

          },

          {
            title: 'B2',

            id: 15,

            color: "f4"

          },

          {
            title: 'B3',

            id: 16,

            color: "f4"

          },

          {
            title: 'C1',

            id: 17,

            color: "f4"

          },

          {
            title: 'C2',

            id: 18,

            color: "f4"

          },

          {
            title: 'C3',

            id: 19,

            color: "f4"

          },

          {
            title: 'C4',

            id: 110,

            color: "f4"

          },

          {
            title: 'D',

            id: 111,

            color: "f4"

          },

          {
            title: 'E',

            id: 112,

            color: "f4"

          },

        ]

      },

      {
        name: '距离',

        color: "f4",
        id:2,
        data: [{
            title: '1km以内',

            id: 21,

            color: "f4"

          },

          {
            title: '1-3km',

            id: 22,

            color: "f4"

          },

          {
            title: '3-5km',

            id: 23,

            color: "f4"

          },

          {
            title: '5-10km',

            id: 24,

            color: "f4"

          },

          {
            title: '10km以上',

            id: 25,

            color: "f4"

          },

        ]

      },

      // {
      //   name: '区域',

      //   color: "f4",
      //   id:3,
      //   data: []

      // },
      {
        name: '价格',

        color: "f4",
        id:4,
        data: [{
            title: '2.5k以内',

            id: 41,

            color: "f4"

          },

          {
            title: '2-3k',

            id: 42,

            color: "f4"

          },

          {
            title: '3-5k',

            id: 43,

            color: "f4"

          },

          {
            title: '5-10k',

            id: 44,

            color: "f4"

          },

          {
            title: '10k以上',

            id: 45,

            color: "f4"

          },

        ]

      },

    ],

    select_arr: [

    ],

  },

  change_sel_c: function () {
    that.setData({
      select_show: true,

      show_model: false,

      selectId: 0

    })

  },

  change_sel: function (e) {
    if (e.target.dataset.selectid != 5) {
      that.setData({
        select_show: false,

        show_model: true,

        selectId: e.target.dataset.selectid

      })

      var old_select_arr = that.data.select_arr;

      var old_classification = that.data.classification;
        old_select_arr.forEach((item,i)=>{
          if (item.id.toString()[0] == that.data.selectId) {
            old_classification.forEach((j,index)=>{
              if(j.id==that.data.selectId){
                old_classification[index].data.forEach((f,indexs)=>{
                  old_classification[index].data[indexs].color = "f4";
                  if(item.id == old_classification[index].data[indexs].id){
                    old_classification[index].data[indexs].color = "b5";
                  }
                })
              }
            })
            that.setData({
              classification: old_classification
            })
          }
        })
    } else {
      that.setData({
        select_show: true,

        show_model: false,

        selectId: 0,

      })

      wx.setStorageSync('select_arr', that.data.select_arr);

      wx.navigateTo({
        url: 'screen',

      })

    }

  },

  hide_model: function () {
    that.setData({
      select_show: true,

      show_model: false,

      selectId: 0,

    })

  },

  get_classifId: function (e) {
    var th_id = e.target.dataset.id;

    var th_title = e.target.dataset.title;

    console.log(th_id + ":" + th_title);

    var old_select_arr = that.data.select_arr;

    var th_num = 0;
    if (old_select_arr.length == 0) {
      old_select_arr.push({
        id: th_id,

        title: th_title

      })

      that.setData({
        select_arr: old_select_arr

      })

      that.hide_model();

      return;

    }

    for (var i = 0; i < old_select_arr.length; i++) { //遍历所选的数组

      // 下面限制单选，，要多选的话把下面if去掉

      if (old_select_arr[i].id.toString()[0] == that.data.selectId) {
        // 如果所选的有当前打开的数组里面的,替换之前的，，

        old_select_arr.splice(i, 1, {
          id: th_id,

          title: th_title

        });

      } else {
        th_num++;

        if (th_num == old_select_arr.length) {
          old_select_arr.push({
            id: th_id,

            title: th_title

          })

        }

      }

    }

    that.setData({
      select_arr: old_select_arr

    })

    that.hide_model();

  },

  delete_sel: function (e) {
    var th_id = e.target.dataset.id;

    var old_select_arr = that.data.select_arr;

    for (var i = 0; i < old_select_arr.length; i++) {
      if (th_id == old_select_arr[i].id) {
        old_select_arr.splice(i, 1)

      }

    }

    var old_classification = that.data.classification;
    old_classification.forEach((j,index)=>{
      if(j.id==th_id){
        old_classification[index].data.forEach((f,indexs)=>{
          old_classification[index].data[indexs].color = "f4";
        })
      }
    })
    // for (var j = 0; j < old_classification[th_id.toString()[0] - 1].data.length; j++) {
    //   old_classification[th_id.toString()[0] - 1].data[j].color = "f4";

    // }

    that.setData({
      select_arr: old_select_arr,

      classification: old_classification

    })

  },

  delete_sel_a: function () {
    var old_classification = that.data.classification;

    for (var i = 0; i < old_classification.length; i++) {
      for (var j = 0; j < old_classification[i].data.length; j++) {
        old_classification[i].data[j].color = "f4";

      }

    }

    that.setData({
      select_arr: [],

      classification: old_classification

    })

  },

  onLoad: function (options) {
    that = this;

    that.setData({
      select_arr: []

    })

    wx.setStorageSync('select_arr', []);

    // wx.setNavigationBarTitle({
    // title: options.title,

    // })

  },

  onShow: function () {
    that.setData({
      select_arr: wx.getStorageSync('select_arr')

    })

  },

})

.school_head {
  width: 100%;
  /* height: 200rpx; */
  top: 0;
  left: 0;
  background: #fff;
  position: fixed;
  z-index: 99;
  border-top: 1rpx solid #f2f2f2;
  border-bottom: 1rpx solid #f2f2f2;
}

.model {
  width: 100%;
  height: 100%;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.3;
  z-index: 88;
}

.search {
  width: 92%;
  height: 62rpx;
  margin: 20rpx auto;
  background: #e6e6e6;
  padding: 0 28rpx;
  justify-content: flex-start;
}

.search image {
  width: 28rpx;
  height: 28rpx;
}

.search input {
  height: 62rpx;
  width: 100%;
  font-size: 28rpx;
  padding-left: 15rpx;
}

.centent {
  margin-top: 267rpx;
  width: 100%;
  padding-bottom: 50rpx;
}

.cent_item {
  padding-left: 20rpx;
  padding-right: 20rpx;
  height: 140rpx;
  margin: 30rpx 0;
  position: relative;
  padding-bottom: 20rpx;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}

.cent_item:last-child {
  border-bottom: none;
}

.cent_item .school-img {
  width: 180rpx;
  height: 120rpx;
  float: left;
}

.school-info {
  margin-left: 20rpx;
  float: left;
}

.school-name {
  font-size: 30rpx;
}

.school-pingjia {
  height: 45rpx;
  line-height: 45rpx;
}

.school-price {
  font-size: 26rpx;
}

.itembox {
  display: flex;
  align-items: center;
}

.scorePin {
  font-size: 26rpx;
  font-weight: bold;
}

.star {
  width: 30rpx;
  height: 30rpx;
  margin: 0 5rpx;
  vertical-align: middle;
}

.location {
  position: absolute;
  right: 20rpx;
  top: 21rpx;
  font-size: 24rpx;
}

.distince {
  position: absolute;
  right: 20rpx;
  top: 58rpx;
  font-size: 14rpx;
}

.applay {
  width: 200rpx;
  font-size: 20rpx;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  color: #008bc1;
  text-align: right;
}

.flex-j-a.b5 {
  color: #57b28d;
}

.select view {
  height: 60rpx;
  padding: 0 15rpx;
  flex: 1;
}

.select view>image {
  width: 22rpx;
  height: 11rpx;
  display: block;
  margin-left: 7rpx;
}

.select_content {
  width: 100%;
  padding: 20rpx;
}

.select_box {
  width: 100%;
}

.select_124 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.select_124>view {
  width: 150rpx;
  height: 53rpx;
  line-height: 53rpx;
  text-align: center;
  font-size: 26rpx;
  background: #f4f5f9;
  border-radius: 7rpx;
  margin: 1.5%;
  color: #000;
  flex: 0 0 22%;
}

.select_124 .b5 {
  background: #57b28d;
  color: #fff;
}

.selct_li {
  width: 100%;
  height: 53rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}

.selct_item {
  width: 128rpx;
  height: 53rpx;
  border-radius: 6rpx;
  background: #f4f5f9;
  text-align: center;
  line-height: 52rpx;
  margin-right: 20rpx;
  display: inline-block;
  position: relative;
}

.selct_item image {
  width: 20rpx;
  height: 20rpx;
  position: absolute;
  right: 0;
  top: 0;
}

.addr_box {
  /* border: 1px solid red; */
}

.addr_sel {
  border-bottom: #f2f2f2 1px solid;
}

.addr_sel view {
  min-width: 170rpx;
  line-height: 55rpx;
  float: left;
  text-align: center;
  font-size: 30rpx;
}

.addr_sel .addr_sure {
  width: 111rpx;
  height: 48rpx;
  float: right;
  line-height: 48rpx;
  text-align: cnter;
  font-size: 28rpx;
  background: rgb(77, 162, 253);
  color: #fff;
  border-radius: 5rpx;
}

.addr_option {
  /* padding-left: 170rpx; */
}

.addr_item_box {
  width: 170rpx;
}

.addr_item {
  min-width: 170rpx;
  padding: 0 10rpx;
  line-height: 52rpx;
  font-size: 24rpx;
  text-align: center;
}

后面是跳转的第二页（screen）：

<view class="fiexd_left">
  <view wx:key="item" wx:for="{{classification}}" class="{{selectId==item.id?'color':'none'}} scr_nav" data-selectId="{{item.id}}" bindtap="{{selectId==item.id?'change_sel_c':'change_sel'}}">{{item.name}}</view>
</view>
<view class="fixed_right">
  <scroll-view class="scroll-view" scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true">
    <view  wx:key="item" wx:for="{{classification}}" id="toView_{{item.id}}" class="scroll_sel" wx:for-index="idx" wx:for-item="item">
      <text>{{item.name}}</text>
      <!-- <view wx:if="{{idx==2}}" class="select_box">
        <view>地区选择</view>
      </view> -->
      <view class="select_box">
        <view  wx:key="item" wx:for="{{item.data}}" bindtap="{{items.color=='f4'?'get_classifId':'get_classifId_close'}}" wx:for-item="items" data-id="{{items.id}}" data-title="{{items.title}}" data-idx="{{item.id}}" class="{{items.color}}">{{items.title}}</view>
      </view>
    </view>
    <!-- 下面是多余的，，便于滚动 -->
    <view id="toView_5" class="scroll_sel">占位</view>
  </scroll-view>
  <view class="right_bottom flex-j-a">
    <view class="reset" bindtap="reset">重置</view>
    <view class="shux"></view>
    <view class="submit" bindtap="submit">确定</view>
  </view>
</view>

var app = getApp();
var that;
Page({
  data: {
    select_arr: [],
    selectId: 1,
    toView: 'toView_1',
    // 自己修改类型数据的时候，外层类型绑定一个id，子集data也要绑定一个id，data.id的第一个数字应该和类型id相同
    // 比如 驾照类型id=1，驾照A1的id=11，第一个数字都等于1
    // screen的classification类似数组和school应该是一致的，不然那对应不上，当然你可以用一个变量js保存它们
    classification: [{
        name: '驾照类型',
        color: "f4",
        id:1,
        data:[{
          title: 'A1',

          id: 11,

          color: "f4"

        },

        {
          title: 'A2',

          id: 12,

          color: "f4"

        },

        {
          title: 'A3',

          id: 13,

          color: "f4"

        },

        {
          title: 'B1',

          id: 14,

          color: "f4"

        },

        {
          title: 'B2',

          id: 15,

          color: "f4"

        },

        {
          title: 'B3',

          id: 16,

          color: "f4"

        },

        {
          title: 'C1',

          id: 17,

          color: "f4"

        },

        {
          title: 'C2',

          id: 18,

          color: "f4"

        },

        {
          title: 'C3',

          id: 19,

          color: "f4"

        },

        {
          title: 'C4',

          id: 110,

          color: "f4"

        },

        {
          title: 'D',

          id: 111,

          color: "f4"

        },

        {
          title: 'E',

          id: 112,

          color: "f4"

        },

      ]
      },
      {
        name: '距离',
        color: "f4",
        id:2,
        data: [{
            title: '1km以内',
            id: 21,
            color: "f4"
          },
          {
            title: '1-3km',
            id: 22,
            color: "f4"
          },
          {
            title: '3-5km',
            id: 23,
            color: "f4"
          },
          {
            title: '5-10km',
            id: 24,
            color: "f4"
          },
          {
            title: '10km以上',
            id: 25,
            color: "f4"
          },
        ]
      },
      // {
      //   name: '区域',
      //   color: "f4",
      //   id:3,
      //   data: []
      // },
      {
        name: '价格',
        color: "f4",
        id:4,
        data: [{
            title: '2.5k以内',
            id: 41,
            color: "f4"
          },
          {
            title: '2-3k',
            id: 42,
            color: "f4"
          },
          {
            title: '3-5k',
            id: 43,
            color: "f4"
          },
          {
            title: '5-10k',
            id: 44,
            color: "f4"
          },
          {
            title: '10k以上',
            id: 45,
            color: "f4"
          },
        ]
      },
    ],
  },
  change_sel: function(e) {
    that.setData({
      selectId: e.target.dataset.selectid,
      toView: "toView_" + e.target.dataset.selectid
    })
  },
  //获取驾照类型列表
  getDriverTypes() {
    var that = this;
    wx.http({
      url: '/driverType/findAll',
      method: 'POST'
    }).then(data=>{
      console.log(data)
    })
  },
  onLoad: function(options) {
    var that = this;
    this.getDriverTypes();
    that.setData({
      select_arr: wx.getStorageSync('select_arr')
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },
  submit:function(){
    var that = this;
    wx.setStorageSync('select_arr', that.data.select_arr);
    wx.navigateBack({
      change:true
    })
  },
  reset:function(){
    var that = this;
    wx.setStorageSync('select_arr', []);
    that.onShow();
  },
  get_classifId_close:function(e){//第二次点击，删除本个
    var that = this;
    var th_id = e.target.dataset.id;
    var old_select_arr = that.data.select_arr;
    for (var i = 0; i < old_select_arr.length;i++){
      if (old_select_arr[i].id == th_id){
        old_select_arr.splice(i, 1);
      }
    }
    that.setData({
      select_arr: old_select_arr
    })
    that.get_color();
  },
  get_classifId: function(e) {
    var that = this;
    var th_id = e.target.dataset.id;
    var th_title = e.target.dataset.title;
    var th_idx = e.target.dataset.idx;
    console.log(th_id + ":" + th_title);
    var old_select_arr = that.data.select_arr;
    var th_num = 0;
    if (old_select_arr.length == 0) {
      old_select_arr.push({
        id: th_id,
        title: th_title
      })
      that.setData({
        select_arr: old_select_arr
      })
      that.get_color();
      return;
    }
    for (var i = 0; i < old_select_arr.length; i++) { //遍历所选的数组
      // 下面限制单选，，要多选的话把下面if去掉
      if (old_select_arr[i].id.toString()[0] == th_idx) {
        // 如果所选的有当前打开的数组里面的,替换之前的，，
        old_select_arr.splice(i, 1, {
          id: th_id,
          title: th_title
        });
      } else {
        th_num++;
        if (th_num == old_select_arr.length) {
          old_select_arr.push({
            id: th_id,
            title: th_title
          })
        }
      }
    }
    that.setData({
      select_arr: old_select_arr
    })
    that.get_color();
  },
  onShow: function() {
    that = this;
    that.setData({
      select_arr: wx.getStorageSync('select_arr')
    })
    that.get_color();
  },
  get_color: function() {
    var that = this;
    var old_classification = that.data.classification;
    var old_select_arr = that.data.select_arr;
    old_classification.forEach((item,i)=>{
      item.data.forEach((items,j)=>{
        items.color = 'f4';
      })
    })
    old_select_arr.forEach((item,i)=>{
      old_classification.forEach((cla,j)=>{
        if(item.id.toString()[0]==cla.id){
          cla.data.forEach((claData)=>{
            if(item.id==claData.id){
              claData.color = 'b5'
            }
          })
        }
      })
    })
    that.setData({
      classification: old_classification
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

.fiexd_left{
height: 100%;
width: 24%;
background: #F4F5F9;
position: fixed;
padding-top: 30rpx;
z-index: 10;
top: 0;
left: 0;
}
.fixed_right{
border-top: 1rpx solid #F4F5F9;
height: 100%;
width: 76%;
background: #fff;
position: fixed;
z-index: 10;
top: 0;
right: 0;
padding: 30rpx 26rpx;
}
.scr_nav{
  padding: 0 30rpx;
  line-height: 65rpx;
  font-size: 30rpx;
  background: #F4F5F9;
  color: #000;
}
.color.scr_nav{
  background: #fff;
  color: #59B38E;
}
.fixed_right .right_bottom{
  position: absolute;
  bottom: 40rpx;
  right: 26rpx;
  width: calc((100% - 52rpx));
  height: 86rpx;
}
.scroll-view{
  width: 100%;
  height: calc((100% - 126rpx));
}
.scroll-view .scroll_sel{
  width: 100%;
}
.scroll_sel>text{
  font-size: 24rpx;
  color: #666666;
}
.select_box {
  display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 30rpx;
}
.select_box view{
height: 53rpx;
margin: 10rpx 2%;
background: #F4F5F9;
font-size: 24rpx;
text-align: center;
line-height: 53rpx;
flex: 0 0 29.33%;
border-radius: 7rpx;
}
.select_box .b5{
  color: #fff;
background: #57B28D;
}
#toView_5{
  height: 500rpx;
}
.right_bottom .reset,.right_bottom .submit{
  width: calc((100% - 10rpx)/2);
  height: 86rpx;
  text-align: center;
  font-size: 32rpx;
  line-height: 86rpx;
  letter-spacing: 2rpx;
}
.right_bottom .reset{
  border-radius: 45rpx 0 0 45rpx;
  background: #F4F5F9;
}
.right_bottom .shux{
  width: 10rpx;
  height: 100%;
  background: #fff;
}
.right_bottom .submit{
  border-radius: 0 45rpx 45rpx 0;
  background: #57B28D;
  color: #fff;
}
洛查丹玛斯
关注
专栏目录
微信小程序开发中的数据筛选和搜索功能
2401_85258012的博客
06-02 383
例如，我们假设有一个名为"products"的数组，包含了多个产品信息，每个产品都有以下属性：name、price、category。例如，我们假设有一个名为"products"的数组，包含了多个产品信息，每个产品都有以下属性：name、price、category。用户可以根据自己的需要，选择价格区间进行筛选，或者输入关键字进行搜索，以找到所需的数据。接下来，我们需要在页面中添加一个按钮，用户可以点击该按钮来触发筛选操作。接下来，我们需要在页面中添加一个按钮，用户可以点击该按钮来触发搜索操作。
微信小程序级联筛选
08-10
需要的可已下载来看非常有用
微信小程序筛选插件下拉筛选插件
08-10
微信小程序筛选插件，下拉筛选插件
微信小程序筛选插件，下拉筛选插件
04-19
仿美团搜索筛选功能，小程序筛选插件，下拉筛选插件
微信小程序筛选框
qq_57985179的博客
10-25 3178
不废话，直接上代码 wxml： <!-- 筛选和排序框 --> <view class="sreenBigBox"> <view class="sreenBox"> <view class="sreenItems"> <view class='sreen ' bindtap="sreenShow">筛选<image class='head {{sreenShow&&"rotating"}}' sr
小程序筛选（可多选），进来看吧，是你想要的吗
梁小茹的博客
12-07 3164
功能：可进行多选，点击全部，其他取消选中，点击每一个item ,进行选中和取消 套用即可 没有无用代码！ 直接看代码，举一个例子 wxml <!-- 经营项目 --> <view> //title:经营项目 <view style="margin: 32rpx 108rpx 32rpx 32rpx;font-size: 32rpx;">{{dropDownMenuSourceData[0].detailList[0].title}}
微信小程序demo：电影评分：根据条件筛选结果
03-15
本项目是一个微信小程序的示例，名为"电影评分"，它允许用户根据特定条件筛选电影评分结果，从而帮助用户快速找到符合自己口味的电影。 在这款小程序中，开发者可能使用了微信开发者工具（WXML和WXSS）来构建用户...
微信小程序 - 筛选侧边栏 - 全选与反全选
12-30
例如，在电商小程序中，用户可能可以通过品牌、价格区间、销量等选项进行筛选，快速找到心仪的商品。 三、全选与反全选功能实现 1. **全选**：全选功能允许用户一次性选中所有选项。在微信小程序中，这通常通过一个...
房产交易类房源列表筛选小程序模板
最新发布
10-26
常见的筛选条件包括：价格区间、地理位置（区域、商圈、地铁站）、房屋类型（公寓、别墅、商住两用等）、房型（一室、两室、三室等）、装修状况（毛坯、简装、精装、豪装）等。用户可以根据自身需求选择相应条件进行...
微信小程序-筛选导航-源码
11-04
本源码为装修类微信小程序--筛选导航源码，多级导航，装修类的筛选，包括风格，面积，户型。。
微信小程序下拉筛选菜单WXDropDownMenu组件
03-29
先来看下效果图： (此图片来源于网络，如有侵权，请联系删除! ) 思路与步骤： 布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单，初始隐藏、position为absolute，使用z-index浮出页面层 /*总菜单容器*/ .menu {      display: block;     height: 38px; }   /*一级菜单*/ .menu dt {     font-size: 15px;     float: left;     /*hac
wxDropDownMenu:微信小程序 一个简单的多列筛选菜单组件
04-28
wxDropDownMenu 一个简单的多列筛选菜单微信小程序组件 说明 一直想找一个成熟的可以直接用的多列筛选菜单的组件，都不太符合自己的想法。 干脆基于一个demo自己封装成一个组件，满足自己的需求。 css不太会写，经供参考。 效果 感谢 **Inspired by **
小程序多条件查询
01-25
多条件查询列表，快捷，简单易懂，粘贴复制即可使用，使用于各种场景
微信小程序demo：乡居网：条件筛选列表，tab菜单，谷歌统计
03-15
比较完整的demo了， 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
房源信息列表筛选小程序模板.zip
01-22
开发房源信息列表筛选小程序模板涉及到的知识点包括：微信小程序的开发环境搭建、WXML和WXSS的语法、JavaScript编程、数据结构和算法（如数组的filter方法）、地图API的使用、UI设计和用户体验优化、后端接口的调用...
小程序产品筛选，根据不同的分类筛选，价格区间，区域等筛选产品
qq_38197886的博客
08-08 7752
产品有多个属性，多个分类，每个分类有不同的类型和区间，可更具单个分类筛选，也可以根据多个分类共同筛选，主要就是要找出筛选的分类和分类属性： 我这个是筛选驾校的，，其他的也可以自定义产品：下面是ui： 跨界面回传筛选参数，： 选驾校页面：wxml：school.wxml <view class="school_head"> <view class="searc...
小程序简单筛选
hql1024的博客
02-24 933
<view class="line" wx:for="{{menu_list}}" wx:key data-index="{{index}}" data-type="{{item.type}}" bindtap="getchoose"> <view class="{{index == choose ? 'choose' :''}}">{{item.option}}&l...
微信小程序房源筛选模板源码解析
资源摘要信息:"微信小程序-房源信息列表筛选小程序模板源码.zip" 本资源是针对微信小程序平台开发的一套房源信息列表筛选模板的源码。该模板适用于房地产开发商、中介平台以及需要展示房源信息的商家使用。它允许...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值