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

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

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

本组件功能类似于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 点击取消按钮时触发 - -


目录
打赏
0
1
1
0
22
分享
相关文章
|
4月前
|
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
197 10
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
144 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
124 0
|
7月前
|
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
164 0
|
7月前
uniapp 安装插件 uView (多平台快速开发的UI框架)
uniapp 安装插件 uView (多平台快速开发的UI框架)
340 0
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
154 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
90 7
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
112 7
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
137 7
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
145 7

热门文章

最新文章

相关课程

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等