微信小程序实现单列下拉菜单效果

接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列。也把代码尽可能的简单化了。

实现的效果图:

合并状态:

首先下面是目录结构: 

下面是实现的具体代码:

.wxml

<!--选择框-->
<view class="product-list">
 <!--条件选择-->
 <view class="choice-bar">
  <view bindtap="opens" data-item="1" class="chioce-item" hover-class="click-once-opaque">{{start}}
   <image class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image>
  </view>
  <view class="sorting-list{{!isstart?' chioce-list-hide':' chioce-list-show'}}">
   <view wx:for="{{slist}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-once" wx:key="userInfoListId" >{{item.name}}</view>
  </view>
 </view>
</view>

.wxss

.product-list {
 width: 100%;
 box-sizing: border-box;

}

.choice-bar {
 position: fixed;
 display: flex;
 width: 100%;
 font-size: 14px;
 background-color: #fff;
 /**z-index: 0;**/
}
.chioce-item {
 background-color: #fff;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 20rpx;
 width: 100%;
 height: 80rpx;
 border-top: 1rpx solid #ddd;
 border-bottom: 1rpx solid #ddd;
 border-left: 1rpx solid #ddd;
 /*border-right: 1rpx solid #ddd;*/
}

.icon-chioce {
 height: 30rpx;
 width: 30rpx;
}
.district-list,.sorting-list,.filter-list {
 margin-top: 2rpx;
 position: absolute;
 top: 80rpx;
 left: 0;
 width: 100%;
 background-color: #fff;
 z-index: -1;
 font-size: 14px;
 border-bottom: 1rpx solid #ddd;
}
.chioce-list-hide {
 display: none !important;
}
.chioce-list-show {
 /**top: 80rpx;**/
 animation: slide 500ms;
}

.sorting-item {
 height: 80rpx;
 line-height: 80rpx;
 padding: 0 40rpx;
 border-bottom: 1rpx solid #ddd;
}

.js

Page({
 data: {
  start: "起始地",
  slist: [
   { id: 1, name: "第一类" },
   { id: 1, name: "第二类" },
   { id: 1, name: "第三类" },
   { id: 1, name: "第四类" },
   { id: 1, name: "第五类" },
  ],
  isstart: false,
  openimg: "/images/list/list.png",
  offimg: "/images/list/list1.png"
 },
 opens: function (e) {
  switch (e.currentTarget.dataset.item) {
   case "1":
    if (this.data.isstart) {
     this.setData({
      isstart: false,
     });
    }
    else {
     this.setData({
      isstart: true,
     });
    }
    break;
  }
 },
 onclicks1: function (e) {
  var index = e.currentTarget.dataset.index;
  let name = this.data.slist[index].name;
  this.setData({
   isstart: false,
   isfinish: false,
   isdates: false,
   start: this.data.slist[index].name,
   finish: "目的地"
  })
 }
})

以上所述是小编给大家介绍的微信小程序单列下拉菜单详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序CSS3动画下拉菜单效果

    微信小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个 思路 利用列表来存储菜单项,在外面套一个view元素作为外框,将其设置为overflow:hidden,使用CSS3动画逐渐改变外层view元素的高度,当高度为0时,里面嵌套的列表元素被完全隐藏,相当于菜单关闭.而当view元素的高度大于列表元素的高度时,相当于菜单显示. 效果图 wxml button按钮用于触发菜单的打开和关闭,first_click参数使用户第一次点击按钮之前菜单不可见,state参数用于控制菜单的打开和关闭状态

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序实现下拉菜单切换效果

    本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序实现顶部下拉菜单栏

    本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //终点缓存的五个城市 endcitys: [], //用户选择省份之后对应的城市和县城 endkeys: {}, //用户选择县城 town: [], //所有车长 commanders: cityData.get

  • 微信小程序实现单列下拉菜单效果

    接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构:  下面是实现的具体代码: .wxml <!--选择框--> <view class="product-list"> <!--条件选择--> <view class="choice-b

  • 微信小程序 action-sheet 反馈上拉菜单简单实例

    微信小程序 action-sheet 反馈上拉菜单简单实例 看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti

  • 微信小程序picker组件下拉框选择input输入框的实例

    微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

  • 微信小程序自定义select下拉选项框组件的实现代码

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

  • 微信小程序自定义select下拉选项框的方法

    本文实例为大家分享了微信小程序自定义select下拉选项框的具体代码,供大家参考,具体内容如下 第一步:创建组件所需的文件 第二步:开始配置组件 select.json {   "component": true,   "usingComponents": {     "select": "./select"   } } 第三步:自定义组件样式及js select.wxml <view class='com-select

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 微信小程序实现列表下拉刷新上拉加载

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown

随机推荐