微信小程序实现列表条件筛选

本文实例为大家分享了微信小程序实现列表条件筛选的具体代码,供大家参考,具体内容如下

最近一个旅游项目,关于筛选框的代码

wxml文件

<view class='chooseList'>
      <view class="nav">
    <view class="nav-son {{shownavindex == 1? 'active' : ''}}" bindtap="listqy" data-nav="1">
      <view class="content">酒店类型</view>
      <view class="icon"></view>
    </view>
    <view class="nav-son borders {{shownavindex == 2? 'active' : ''}}" bindtap="list" data-nav="2">
      <view class="content">价格</view>
      <view class="icon"></view>
    </view>
    <!-- <view class="nav-son {{shownavindex == 3? 'active' : ''}}" bindtap="listpx" data-nav="3">
      <view class="content">排序</view>
      <view class="icon"></view>
    </view> -->
  </view>
 
  <view class="quyu {{qyopen ? 'slidown' : 'slidup'}} {{qyshow ? 'disappear':''}}">
 
    <view class="qy quyu-left">
      <view class="{{select1 == index ? 'current' : ''}}" wx:for="{{cityleft}}" wx:key='{{item}}' bindtap="selectleft" data-city='{{index}}'>
        {{index}}
      </view>
    </view>
    <view class="qy quyu-center">
      <view class="{{select2 == index ? 'current2' : ''}}" wx:for="{{citycenter}}" bindtap="selectcenter" data-value='{{item}}' data-city='{{index}}'>
        {{index}}
        <image src='../../images/istrue.png' style="{{select2 == index?'display:block':'display:none'}}"></image>
      </view>
            <!-- 如果选择是早餐,展示筛选按钮 -->
            <view style="border-style: none;" wx:if='{{isshowradio}}'>
                <radio-group class="radio-group" bindchange="radioChange">
                    <label class="radio" wx:for="{{breakfastlist}}">
                        <radio value="{{item.value}}" checked="{{item.checked}}" />
                        {{item.value}}
                    </label>
                </radio-group>
            </view>
    </view>
    <view class='form-btn'>
      <button class='btn-reset' bindtap='quyuEmpty'>重置</button>
      <button class='btn-submit' bindtap='submitFilter'>确定</button>
    </view>
  </view>

js文件:

点击酒店类型,展示筛选酒店的条件

listqy: function (e) {
        console.log('触发时机---点击酒店类型的时候')
    if (this.data.qyopen) {
            console.log(this.data.qyopen)
      this.setData({
        qyopen: false,
        nzopen: false,
        nzshow: true,
        qyshow: false,
        isfull: false,
        shownavindex: 0
      })
    } else {
      this.setData({
        qyopen: true,
        nzopen: false,
        nzshow: true,
        qyshow: false,
        isfull: true,
        shownavindex: e.currentTarget.dataset.nav
      })
    }
  },

点击一级菜单,展示对应的二级菜单

selectleft: function (e) {
    console.log('用户选中左边菜单栏的索引值是:' + e.target.dataset.city);
        if (e.target.dataset.city === '床型、早餐') {
            console.log('哈哈')
            this.setData({
                isshowradio: true // 如果是早餐和床型的话,就让选择早餐的按钮显示
            })
        } else {
            this.setData({
                isshowradio: false
            })
        }
    this.setData({
      citycenter: this.data.cityleft[e.currentTarget.dataset.city],
      select1: e.target.dataset.city,
      select2: ''
    });
  },

点击二级菜单

selectcenter: function (e) {
        console.log(e.target.dataset.value)
        console.log('用户选中右边边菜单栏的索引值是:' + e.target.dataset.value, this.data.select1);
        let _this = this
        if (_this.data.select1 === '酒店类型') {
            _this.data.type = e.target.dataset.city
            console.log(_this.data.type)
        }
        if (_this.data.select1 === '设施') {
            _this.data.facility = e.target.dataset.city
            console.log(_this.data.facility)
        }
        if (_this.data.select1 === '地理位置') {
            _this.data.maxdistance = e.target.dataset.value
            console.log(_this.data.maxdistance)
        }
        if (_this.data.select1 === '床型、早餐') {
            _this.data.cbedtype = e.target.dataset.city
            console.log(_this.data.cbedtype)
        }
    this.setData({
      select2: e.target.dataset.city
    });
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现日期时间筛选器

    开发微信小程序过程中,有个需求需要用到日期时间筛选器,查看微信官方文档后,发现官方文档的picker筛选器只能单独支持日期或者是时间,所以为了实现需求自己参考企业微信封装了个日期时间筛选器组件. 原理 筛选器的实现,我参考的是小程序官方方式,通过半屏弹窗(mp-half-screen-dialog)结合picker_view进行日期.时间的选择,最终在选择时间后,通过事件触发返回一个change事件,其中参数值为毫秒级时间戳. 实现 1.弹窗的显隐: 在组件的 properties 中传入一个

  • 微信小程序实现下拉筛选功能

    最近开发应项目需求实现一个类似与贝壳找房里面的下拉筛选功能,在这里分享给有同样需求的大家,互相学习学习 这是主要功能实现,我把它封装成了组件,在对应的地方使用,就可以实现贝壳找房相同的效果 好了,废话不多说,直接上代码吧 wxml: <!--筛选栏--> <view class="cxj-contents">   <view class="cxj-menu">     <view class="flex-view{

  • 微信小程序实现列表条件筛选

    本文实例为大家分享了微信小程序实现列表条件筛选的具体代码,供大家参考,具体内容如下 最近一个旅游项目,关于筛选框的代码 wxml文件 <view class='chooseList'>       <view class="nav">     <view class="nav-son {{shownavindex == 1? 'active' : ''}}" bindtap="listqy" data-nav=&qu

  • 微信小程序 教程之条件渲染

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:if 在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块: <view wx:if="{{condition}}"> True </view> 也可以用wx:elif和wx:el

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序wxml列表渲染原理解析

    这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{

  • 微信小程序多列表渲染数据开关互不影响的实现

    最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家 <!--pages/list/list.wxml--> <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

  • 微信小程序实现列表滚动头部吸顶的示例代码

    本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记 demo 地址: https://github.com/iotjin/Jh_weapp 效果图: 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position

  • 微信小程序实现列表的横向滑动方式

    微信小程序原生方式实现列表的横向滑动的两种方法: 效果图: 方式一:简单样式实现 父元素设置: white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-space:nowrap; 实现代码:

  • 微信小程序文章列表功能完整实例

    本文实例讲述了微信小程序文章列表功能.分享给大家供大家参考,具体如下: 没有服务器接口数据的情况下玩一玩. list.wxml <view> <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000" easing-function="

  • 微信小程序虚拟列表的实现示例

    目录 前言 分析 初始渲染方法 初步优化 进一步优化 方法二 前言 大部分小程序都会有这样的需求,页面有长列表,需要下拉到底时请求后台数据,一直渲染数据,当数据列表长时,会发现明显的卡顿,页面白屏闪顿现象. 分析 请求后台数据,需要不断的setData,不断的合并数据,导致后期数据渲染过大 渲染的DOM 结构多,每次渲染都会进行dom比较,相关的diff算法比较耗时都大 DOM数目多,占用的内存大,造成页面卡顿白屏 初始渲染方法 /* * @Descripttion: * @version: *

  • 微信小程序实现列表项左滑删除效果

    本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下 效果 图片 WXML <view class="container"> <!-- 收货地址 --> <view class="address"> <view class="left"> <view class="icon"> <image src="../../i

随机推荐