微信小程序实现下拉筛选

这篇具有很好参考价值的文章主要介绍了微信小程序实现下拉筛选。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序下拉选择搜索,微信小程序,小程序

不多说直接上代码

1、WXML代码:

<view class="container">

  <view class="goods-type">
    <view class="select-content">
      <view class="select-border" bindtap="showSelectBox">
          <text>{{chooseItem}}</text>
          <text class="arrow"></text>
      </view>
      <view class="select-box" wx:if="{{selectBox}}">
          <view class="select-item" bindtap="chooseSelectItem" data-name="分类一">分类一</view>
          <view class="select-item" bindtap="chooseSelectItem" data-name="分类二">分类二</view>
          <view class="select-item" bindtap="chooseSelectItem" data-name="分类三">分类三</view>
      </view>
    </view>
  </view>
  
</view>

2、 WXSS代码:

.container {
  width: 100%;
  min-height: 100vh;
  background-color: rgba(238, 239, 241, 1)
}

.goods-type {
  height: 80rpx;
  background-color: #fff;
  padding: 0 20rpx;
}

.select-content {
  position: relative
}

.select-border {
  width: calc(50% - 20rpx);
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f55095;
  padding: 0 10rpx
}

.select-border .arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8.7px 5px 0 5px;
  border-color: #f55095 transparent transparent transparent;
}

.select-box {
  background-color: #fff;
  padding: 0 10rpx;
  width: calc(50% - 20rpx);
  position: absolute;
  z-index: 99;
  overflow: hidden;
  border: 1rpx solid #f55095;
  border-top: none;
}

.select-item {
  height: 60rpx;
  line-height: 60rpx;
}

.select-item:last-child {
  border: none;
}

3、JS代码:文章来源地址https://www.toymoban.com/news/detail-561404.html

Page({

  /**
   * 页面的初始数据
   */
  data: {

    selectBox: false,
    chooseItem: '全部分类'

  },

  //选择下拉选项
  chooseSelectItem: function(e){
    let name = e.currentTarget.dataset.name;
    this.setData({
      selectBox: false,
      chooseItem: name
    })
  },

  //显示隐藏下拉列表
  showSelectBox: function(){
    this.setData({
      selectBox: !this.data.selectBox
    })
  }
})

到了这里,关于微信小程序实现下拉筛选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序--下拉选择框组件封装,可CV直接使用

            接到的项目需求,查看ui设计图后,由于微信小程序官方设计的下拉选择框不符合需求,而且常用的第三方库也没有封装类似的,所以选择自己自定义组件。在此记录一下,方便日后复用。         ui设计图如下:                   微信官方提供的选择框         对比发现

    2024年02月05日
    浏览(49)
  • uniapp 微信小程序 自定义弹框+picker下拉选择列表+输入表单:拒绝-选择理由弹窗

    效果: 1、template 2、data: 3、methods: 4、style

    2024年01月20日
    浏览(63)
  • 微信小程序封装自定义van-dropdown-item 下拉选择框

    1.vant weapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容,限制了各位大神的操作,接下来我们先来了解他的使用在去封装自己的自定义 这是官方自己的效果! 下面来看看我们自己封装的组件 2.还能自定义搜索框等等是不是很奈斯! 接下来我们在

    2024年02月11日
    浏览(52)
  • 微信小程序实现筛选的功能

    在页面加载的时候,显示最原始的数据,当我们点击按钮的时候,触发筛选的功能,只显示符合条件的数据,再次点击的时候取消筛选的功能,显示原本的数据 在数据的显示过程中,可以设置一个临时的数组,在筛选的时候将临时数组清空,取消筛选的时候再将数值重新赋值

    2024年02月14日
    浏览(40)
  • 微信小程序组件 —— 带搜索功能的选择器

    微信小程序组件 —— 带搜索功能的选择器 效果 组件 search-picker 文件 wxml 文件: wxss 文件: 注:/colorui/icon.wxss 文件来自 ColorUI 。 js 文件: 使用 wxml 文件: js 文件: 参考:https://blog.csdn.net/cwin8951/article/details/116160189

    2024年02月16日
    浏览(38)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(66)
  • 微信小程序实现下拉刷新

    (1)把\\\"backgroundTextStyle\\\":“light\\\"改为\\\"backgroundTextStyle”:“dark” (2)添加\\\"enablePullDownRefresh\\\":true,开启下拉刷新。 1.在app.js中增加两个生命周期函数 1、首先在页面的json文件中添加设置:  “enablePullDownRefresh”: true  2、在js文件中写一个onRefresh()生命周期: 3、在onPullDownRefresh

    2024年02月13日
    浏览(48)
  • 【微信小程序】下拉刷新功能实现

    微信小程序开发系列 在开发微信小程序中经常会需要下拉页面进行更新要页面数据的功能,微信小程序提供了onPullDownRefresh函数。该函数作用是监听用户下拉动作。 监听用户下拉刷新事件。 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh: 可以通过wx.startPullD

    2024年02月12日
    浏览(50)
  • 实现微信小程序下拉刷新功能

    方法一:全局设置下拉刷新功能      1、在app.json的\\\"window\\\"中进行配置         (1)把\\\"backgroundTextStyle\\\":“light\\\"改为\\\"backgroundTextStyle”:“dark”         (2)添加\\\"enablePullDownRefresh\\\":true,开启下拉刷新。       2、在app.js中增加两个生命周期函数   方法一:全局设置下拉刷新

    2024年02月13日
    浏览(47)
  • 微信小程序实现下拉简单展示接口数据

    在.js文件中这样写,代码如下: 在wxml文件中这样写,代码如下: 在.json文件中记得添加如下代码,打开下拉功能 \\\"window\\\":{     \\\"backgroundTextStyle\\\":\\\"light\\\",     \\\"navigationBarBackgroundColor\\\": \\\"#282A36\\\",     \\\"navigationBarTitleText\\\": \\\"Linux\\\",     \\\"navigationBarTextStyle\\\":\\\"white\\\",      \\\"enablePullDo

    2024年01月20日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包