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


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 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
JS中的函数与对象的创建方式
May 12 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
php汉字转拼音的示例
2014/02/27 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
python实现代理服务功能实例
2013/11/15 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python字符串,数值计算
2016/10/05 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python PyTorch预训练示例
2018/02/11 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
python 操作excel表格的方法
2020/12/05 Python
python 通过exifread读取照片信息
2020/12/24 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
社区文化建设方案
2014/05/02 职场文书
护士先进个人总结
2015/02/13 职场文书
Python爬取某拍短视频
2021/06/11 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL