如何设置上拉菜单 Vant ActionSheet 上拉菜单

如何设置上拉菜单

上拉菜单是一种常见的用户界面元素，它可以帮助用户快速找到所需的信息。在Android应用开发中，它也是一个重要的部分。本文将介绍如何在Android应用中设置上拉菜单。

首先，我们需要在布局文件中添加一个Spinner控件，它是Android上拉菜单的基本元素。例如：

<Spinner 
    android:id="@+id/spinner" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"/>

然后，我们需要创建一个Adapter来存储上拉菜单中显示的数据。Adapter可以是ArrayAdapter、SimpleCursorAdapter、CursorAdapter或者其他适配器。例如：

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
        android.R.layout.simple_spinner_item, data);

最后，我们需要将这个adapter与Spinner进行绑定：

spinner.setAdapter(adapter);

这样就可以在Android应用中设置上拉菜单了。此外，还可以使用setOnItemSelectedListener()方法来监听用户选择的内容：

spinner.setOnItemSelectedListener(new OnItemSelectedListener() {  

    @Override  

    public void onItemSelected(AdapterView parent, View view, int position, long id) {  

        // do something  

    }  

    @Override  

    public void onNothingSelected(AdapterView parent) {  

        // do something else  

    }   }); 
Vant ActionSheet 上拉菜单
引入
import Vue from "vue";
import { ActionSheet } from "vant";

Vue.use(ActionSheet);
代码演示
基础用法
ActionSheet通过actions数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
import { Toast } from "vant";

export default {
  data() {
    return {
      show: false,
      actions: [
        { name: "选项" },
        { name: "选项" },
        { name: "选项", subname: "描述信息" }
      ]
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    }
  }
}
展示取消按钮
设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单
<van-action-sheet
  v-model="show"
  :actions="actions"
  cancel-text="取消"
  @cancel="onCancel"
/>
import { Toast } from "vant";

export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    onCancel() {
      this.show = false;
      Toast("cancel");
    }
  }
}
展示描述信息
设置description属性后，会在选项上方显示描述信息
<van-action-sheet
  v-model="show"
  :actions="actions"
  description="这是一段描述信息"
/>
选项状态
可以将选项设置为加载状态或禁用状态，或者通过color设置选项颜色
<van-action-sheet
  v-model="show"
  :actions="actions"
  cancel-text="取消"
  @cancel="onCancel"
/>
export default {
  data() {
    return {
      show: false,
      actions: [
        { name: "选项", color: "#07c160" },
        { loading: true },
        { name: "禁用选项", disabled: true }
      ]
    };
  }
}
自定义面板
通过插槽可以自定义菜单的展示内容，同时可以使用title属性展示标题栏
<van-action-sheet v-model="show" title="标题">
  <div class="content">内容</div>
</van-action-sheet>

<style>
.content {
  padding: 16px 16px 160px;
}
</style>
API
Props
参数
说明
类型
默认值
actions
菜单选项
Action[]
[]
title
顶部标题
string
-
cancel-text
取消按钮文字
string
-
description v2.2.8
选项上方的描述信息
string
-
close-icon v2.2.13
关闭 图标名称 或图片链接
string
cross
duration v2.0.3
动画时长，单位秒
number | string
0.3
round v2.0.9
是否显示圆角
boolean
true
overlay
是否显示遮罩层
boolean
true
lock-scroll
是否锁定背景滚动
boolean
true
lazy-render
是否在显示弹层时才渲染节点
boolean
true
close-on-click-action
是否在点击选项后关闭
boolean
false
close-on-click-overlay
是否在点击遮罩层后关闭
boolean
true
safe-area-inset-bottom
是否开启 底部安全区适配
boolean
true
get-container
指定挂载的节点，用法示例
string | () => Element
-
Action 数据结构
actions属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
键名
说明
类型
name
标题
string
subname
二级标题
string
color
选项文字颜色
string
className
为对应列添加额外的 class
any
loading
是否为加载状态
boolean
disabled
是否为禁用状态
boolean
Events
事件名
说明
回调参数
select
选中选项时触发，禁用或加载状态下不会触发
item: 选项对应的对象, index: 选择对应的索引
cancel
取消按钮点击时触发
-
click-overlay
点击遮罩层时触发
-
open
打开菜单时触发
-
opened
打开菜单且动画结束后触发
-
close
关闭菜单时触发
-
closed
关闭菜单且动画结束后触发
-
常见问题
引入时提示 dependencies not found？
在 1.x 版本中，上拉菜单的组件名为Actionsheet，从 2.0 版本开始更名为ActionSheet，请注意区分。



实例演示