专栏首页算法与编程之美微信小程序|下拉菜单

微信小程序|下拉菜单

问题描述

下拉菜单的运用:

下拉菜单在各类网页,app或者小程序中都是比较常见的输入控件。下拉菜单的下拉选项的多少可以根据自身需求进行调节,常运用于时间范围选择,地点区域选择,价格区间选择,等等。提供下拉菜单的目的是帮助用户更快更准确的选择相关条件。下拉菜单的运用可以简化页面设计,节约空间,在一定程度上简化设计。其缺点可能就是相比于单项选项卡还不够直观,用户每次想要查看所选选项时都必须打开菜单对选项进行比较。

解决方案

基本框架:

微信小程序中是没有html中的下拉标签的,所以要实现下拉菜单功能就必须自己动手写拉。在index.wxml文件中,我们需要写好下拉菜单的基础框架,使用view创建下拉选择的菜单,这里创建三个菜单,需要注意的是要加上data-name属性,用于下面实现选择菜单后显示在选择框里。分别通过bindtap给“请选择”的view绑定bindShowMsg方法,给菜单的view绑定mySelect方法,用于在js中实现控制。其中bindtap就是点击事件在.wxml文件绑定。

<viewclass='list-msg2'bindtap='bindShowMsg'>

上述代码就是在一个组件的属性上添加bindtap并赋予一个值(一个函数名)。当点击该组件时, 会触发相应的函数执行。在后台.js文件中定义tapMessage函数.

index.wxml文件代码如下:

<viewclass='list-msg'> <viewclass='list-msg1'> <text>选择日期</text> </view><!--下拉框 --> <viewclass='list-msg2'bindtap='bindShowMsg'> <text>{{tihuoWay}}</text> <imagestyle='height:20rpx;width:20rpx;'src='/images/down.png'></image> </view><!-- 下拉需要显示的列表 --> <viewclass="select_box"wx:if="{{select}}"> <viewclass="select_one"bindtap="mySelect"data-name="近两日">近两日</view> <viewclass="select_one"bindtap="mySelect"data-name="近一周">近一周</view> <viewclass="select_one"bindtap="mySelect"data-name="全部记录">全部记录</view> </view></view>

样式调整:

小程序里的样式设置与HTML基本类似,就不一一介绍了。这里我们就简单介绍一下@keyframes规则。在index.wxss文件中我们使用了如下代码,其作用是实现下拉过度效果,使用@keyframes动画实现菜单的渐变打开和关闭动画。

@keyframesmyfirst { from { height:0rpx; } to { height:210rpx; }}

使用@keyframe实现下拉过度效果,以百分比来规定改变发生的时间,或者通过关键词“from” 和 “to”,等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。

js方法:

在index.js页面,编写两个方法,一个是bindShowMsg ()方法,另一个是mySelect方法,用于实现当选择了下拉的菜单后显示菜单内容。代码如下:

Page({ /* 页面的初始数据 */ data: { select: false, tihuoWay: '近两日' }, /*生命周期函数--监听页面加载 */ onLoad: function (options) { }, bindShowMsg() { this.setData({ select: !this.data.select }) }, mySelect(e) { var name = e.currentTarget.dataset.name this.setData({ tihuoWay: name, select: false }) }, /*用户点击右上角分享 */ onShareAppMessage: function () { }})

编译小程序,预览小程序运行后的效果:

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|宫格导航设计

    首先要熟悉小程序的开发流程:在js里提供数据,在wxml里绑定数据,在wxss里添加样式。

    算法与编程之美
  • 微信小程序|scroll-view组件

    小程序的视图容器组件分为五个组件,分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件,如图2.1。这里介绍sc...

    算法与编程之美
  • 微信小程序|利用for循环解决内容变更问题

    学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这...

    算法与编程之美
  • 如何通过Java代码判断当前的环境是否支持JRE 9

    JDK9已经出来有一段时间了,因此很多流行的Java应用纷纷增添了对JDK9乃至JDK10的支持,比如Tomcat。

    Jerry Wang
  • 9.2 grep(中)

    grep用法 grep -n 'root' /etc/passwd grep -nv 'nologin' /etc/passwd grep '[0-9]'/et...

    运维小白
  • 用代码判断当前系统是否支持某个版本的feature

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog.c...

    Jerry Wang
  • springCloud - 第11篇 - Eureka 注册中心集群的实现

    eureka 作为整个微服务项目的注册中心,到目前为止,在我的系统中一直是单节点的,这样并不能作到高可用。

    微风-- 轻许--
  • 7909:统计数字

    7909:统计数字 查看 提交 统计 提问 总时间限制:1000ms内存限制:65536kB描述 某次科研调查时得到了n个自然数,每个数均不超过15000000...

    attack
  • Java 大神面试经验

    1、 尽量不要讲假话(容易露馅),但是也不能全盘而出,面试也是一场谈判,大家都会藏着点的,善于保护自己的缺点(给面试官一个好印象,可以抬高薪资),get到对方的...

    lyb-geek
  • 带你解读NVIDIA Jetson官网最新更新资料

    GPUS Lady

扫码关注云+社区

领取腾讯云代金券