uniapp中uview组件库丰富的ActionSheet 操作菜单使用方法

目录

#平台差异说明

#基本使用

#配置顶部的提示信息和底部取消按钮

#如何知道点了第几项

#API

#Props

#Event


本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。

本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

  • 通过list设置需要显示的菜单,该值为一个数组,元素为对象,对象至少要提供text属性,另外可选的有fontSize(字体大小),color(颜色),disabled(是否禁用,1.5.6引入), subText(描述信息,1.6.8引入)

  • 通过v-model绑定一个值为布尔值的变量控制组件的弹出与收起,v-model的值是双向绑定的

    <template> <view> <u-action-sheet :list="list" v-model="show"></u-action-sheet> <u-button @click="show = true">打开ActionSheet</u-button> </view> </template> <script> export default { data() { return { list: [{ text: '点赞', color: 'blue', fontSize: 28, subText: '感谢您的点赞' }, { text: '分享' }, { text: '评论' }], show: false } } } </script>

#配置顶部的提示信息和底部取消按钮

  • tips参数为一个对象类型,属性可以设置textfontSize(字体大小),color(颜色),文本内容将会显示组件的上方,起提示作用。

  • cancel-btn参数配置是否显示底部的取消按钮,默认显示

    <template> <u-action-sheet :list="list" v-model="show" :tips="tips" :cancel-btn="true"></u-action-sheet> </template> <script> export default { data() { return { tips: { text: '在水一方', color: '#909399', fontSize: 24 }, list: [{ text: '点赞', color: 'blue', fontSize: 28 }], show: true } } } </script>

#如何知道点了第几项

click回调事件带有一个index值,这个索引值为传递的list数组的索引值,根据回调事件,能获得点击了 第几项和该项的内容

<template>
	<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				show: true
			}
		},
		methods: {
			click(index) {
				console.log(`点击了第${index + 1}项,内容为:${this.list[index].text}`)
			}
		}
	}
</script>

#API

#Props

注意:props中没有控制组件弹出与收起的参数,因为这是通过v-model绑定变量实现的,见上方说明。

参数 说明 类型 默认值 可选值
list 按钮的文字数组,见上方文档示例 Array<Object> [ ] -
tips 顶部的提示文字,见上方文档示例 Object - -
cancel-btn 是否显示底部的取消按钮 Boolean true false
border-radius 弹出部分顶部左右的圆角值,单位rpx Number \ String 0 -
mask-close-able 点击遮罩是否可以关闭 Boolean true false
safe-area-inset-bottom 是否开启底部安全区适配 Boolean false true
z-index z-index Number \ String 1075 -
cancel-text 1.3.0 取消按钮的提示文字 String 取消 -

#Event

事件名 说明 回调参数 版本
click 点击ActionSheet列表项时触发 index: 点击了第几个,从0开始 -
close 点击取消按钮时触发 - -
相关推荐
瑶琴AI前端2 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料17 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23417 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds2 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app