微信小程序中的上拉、下拉菜单功能

2023-07-28 18:38:14 66

问题描述

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

解决方案

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

一、下拉菜单

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

"usingComponents":{

"van-dropdown-menu":"/dist/dropdown-menu/index",

"van-dropdown-item":"/dist/dropdown-item/index",
}

表1json代码

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

option：设置菜单内容；

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

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

表2js代码

(3)在wxml中实现。

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

Value设置排列顺序；

Option菜单内容。

表3wxml代码

图1效果图

二、上拉菜单

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

"usingComponents":{

"van-action-sheet":"/dist/action-sheet/index"

}

表4json代码

(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);
}
});

表5js代码

(3)在wxml中实现。

:设置上来菜单；

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

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

表6wxml代码

图2效果图

结语

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

到此这篇关于微信小程序中的上拉、下拉菜单功能的文章就介绍到这了,更多相关微信小程序上拉下拉菜单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序中的上拉、下拉菜单功能

热门推荐

随机推荐