微信小程序|上拉、下拉菜单

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

在使用小程序的时候基本的页面的一般都是很简洁的，所以会有一些菜单来做简单的诠释说明，或者是提供一些选项。这些菜单的弹出方式一般是向上和向下，那么如何来设置这些上下拉的菜单呢？

解决方案

上下拉菜单在微信小程序中起提示、选项的功能，当点击它时会弹出属于这个菜单的相应选项。使用vant组件库，将dist文件提前下载好然后保存到项目中。在小程序中调用组件库，并在正确引用就可以实现了菜单功能了。

一、下拉菜单

(1)在json中调用van-tab组件。

"usingComponents": {     "van-dropdown-menu": "/dist/dropdown-menu/index", "van-dropdown-item": "/dist/dropdown-item/index",   }

表 1 json代码

(2)在js中对菜单进行设置。

option：设置菜单内容；

value：设置菜单内容的排列顺序。

Page({ data: {     option1: [       { text: '白色；S', value: 0 },       { text: '白色；M', value: 1 },       { text: '白色；L', value: 2 }     ],     value1: 0,   }, });

表 2 js代码

(3)在wxml中实现。

Active-color设置选中状态颜色；

Value设置排列顺序；

Option菜单内容。

active-color="#ee0a24">

表 3 wxml代码

图 1 效果图

二、上拉菜单

(1)在json中调用van-tab组件。

"usingComponents": {     "van-action-sheet": "/dist/action-sheet/index"   }

表 4 json代码

(2)在js中对菜单进行设置。

name：设置菜单选项；

subname：设置副标题；

color：设置颜色。

Page({ data: { show: false, actions: [ { name: '选项' }, { name: '选项' }, { name: '选项', subname: '副文本', openType: 'share' } ] }, onClose() { this.setData({ show: false }); }, onSelect(event) { console.log(event.detail); } });

 表 5 js代码

(3)在wxml中实现。

:设置上来菜单；

bind:select="onSelect" ：选中选项时触发，禁用或加载状态下不会触发；

bind:close="onClose" ：关闭时触发。

show="{{ show }}" actions="{{ actions }}" bind:close="onClose" bind:select="onSelect" />

表 6 wxml代码

图 2 效果图

结语

设置上下拉菜单可以使小程序界面简洁，在设置菜单的时候要注意对菜单内容和排列顺序设置正确。菜单跟其他的组件有一点点不同菜单一般是在js里面进行配置，可以根据需要在js中对菜单进行设置。菜单设置的标签有很多，需要理解记忆并运用。

END

实习编辑   |   王文星

责       编   |   江汪霖

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！