uniapp中uview组件库TopTips 顶部提示使用方法

简介: uniapp中uview组件库TopTips 顶部提示使用方法

该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景。

#平台差异说明

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

#基本使用

该组件通过ref调用,使用简单,只需title参数设置显示的内容即可

注意:不要在onLoad中调用,应在onReady生命周期调用,因为onLoad生命周期组件尚未创建完成

<template>
  <u-top-tips ref="uTips"></u-top-tips>
</template>
 
<script>
  export default {
    onReady() {
      this.$refs.uTips.show({
        title: '铁马冰河入梦来',
        type: 'success',
        duration: '2300'
      })
    }
  }
</script>

#自定义导航栏使用本组件的问题

注意: 只有使用了自定义导航栏才需要注意如下事项,否则无需在意,不用处理。

由于本组件是预先将组件隐藏于导航栏底部,调用时显示,内部已兼容处理H5,APP,小程序等的系统导航栏高度问题。

但是如果您是使用了自定义导航栏的话,组件内部不知道您的自定义导航栏高度是多少,可能会显示有误,所以您需要传入一个navbar-height参数(单位为px)。

需要注意的是,这个navbar-height参数是您自定义导航栏的整个高度,比如在APP和各家小程序上,是“导航栏”+“状态栏”的高度,H5中,“状态栏”无法自定义,高度为0。

温馨提示

uView 有推出Navbar 自定义导航栏组件,此组件有一个height参数(单位px,默认44),这个高度是不包含状态栏的高度的, 所以您使用uView的自定义导航栏组件的话,您还需要通过"uni.getSystemInfoSync().statusBarHeight"(字节跳动小程序不支持)去获得状态栏的高度, 加上你需要的导航栏高度(也即uView的navbar组件的height),即为需要传入u-top-tips组件的navbar-height参数值。

使用uView自定导航栏可进行如下处理,如果是其他的UI框架的导航栏或者自己做的导航栏组件,请以此类推,也能不需要下面的处理。

<template>
  <view class="wrap">
    <u-navbar title="文章列表"></u-navbar>
    <u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
    <u-button @click="showTips">弹出Tips</u-button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      // 状态栏高度,H5中,此值为0,因为H5不可操作状态栏
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      // 导航栏内容区域高度,不包括状态栏高度在内
      navbarHeight: 44
    };
  },
  methods: {
    showTips() {
      this.$refs.uTips.show({
        title: '雨打梨花深闭门,忘了青春,误了青春'
      });
    }
  }
};
</script>
 
<style lang="scss" scoped>
  .wrap {
    padding: 40rpx;
  }
</style>

#主题设置

可以通过配置type参数设置显示的背景颜色:

  • type值可选的有primary(默认)、successinfowarningerror

#显示时间设置

  • duration值设置显示的时间,单位ms:

#API

#Methods

需要注意的是,这里的参数是通过ref调用的,调用方法如上方"基本使用"中所示

参数 说明 类型 默认值 可选值
title 要显示的内容 String - -
type 主题选择 String primary success / info / warning / error
duration 显示的时间,单位ms String | Number -

#Props

需要注意到是,这里的参数是需要通过props调用的,只有使用了自定义导航栏才需要配置,见上方说明。

参数 说明 类型 默认值 可选值
navbar-height 导航栏高度(包含状态栏高度在内),单位PX String | Number - -
z-index z-index String | Number 975 -


相关文章
|
13天前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
24 4
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的试题库管理系统附带文章源码部署视频讲解等
20 1
|
17天前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
32 2
|
17天前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
19 1
|
17天前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
24 1
|
17天前
|
JavaScript
uniapp+uView 【详解】录音,自制音频播放器
uniapp+uView 【详解】录音,自制音频播放器
34 0
|
17天前
uniapp【组件封装】时间戳格式化为星期
uniapp【组件封装】时间戳格式化为星期
14 0
|
17天前
|
数据库
uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)
uniapp 【专题详解 -- 时间】云数据库时间类型设计,时间生成、时间格式化渲染(uni-dateformat 组件的使用)
14 0
|
17天前
uniapp 新建组件
uniapp 新建组件
11 0
|
17天前
uniapp 安装插件 uView (多平台快速开发的UI框架)
uniapp 安装插件 uView (多平台快速开发的UI框架)
21 0

热门文章

最新文章