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


Posted in Javascript onApril 25, 2019

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

实现的效果图:

合并状态:

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

首先下面是目录结构: 

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

下面是实现的具体代码:

.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: "目的地"
  })
 }
})

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

Javascript 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js更优雅的兼容
Aug 12 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
axios实现简单文件上传功能
Sep 25 Javascript
Vue组件通信的几种实现方法
Apr 25 #Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 #Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 #Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 #Javascript
详解Vue项目中实现锚点定位
Apr 24 #Javascript
微信小程序中使用echarts的实现方法
Apr 24 #Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 #Javascript
You might like
input file获得文件根目录简单实现
2013/04/26 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python序列化与数据持久化实例详解
2019/12/20 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
党支部换届选举方案
2014/05/08 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
网络妈妈观后感
2015/06/08 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
python实现简易名片管理系统
2021/04/11 Python
mysql数据库入门第一步之创建表
2021/05/14 MySQL
React如何创建组件
2021/06/27 Javascript