TabBar
- uni.hideTabBar()
隐藏tab - uni.showTabBar()
显示tab
https://uniapp.dcloud.io/api/ui/tabbar?id=hidetabbar
系统信息
uni.getSystemInfo(OBJECT)
获取系统信息
-
statusBarHeight: 状态栏的高度 -
platform:客户端平台，值域为：ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
手机是否是刘留海屏可以通过statusBarHeight判断，
- 刘海屏为44
- 全面屏为20
https://uniapp.dcloud.io/api/system/info?id=getsysteminfo
uni.getSystemInfoSync()
获取系统信息同步接口。
https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
图片预览
uni.previewImage(OBJECT)
imgMap(i, currentId) {
uni.previewImage({
current: currentId, // 图片索引
urls: this.imageList[i], // 图片数组
});
},
https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject
元素滚动到顶部固定悬浮
Popup 弹出层
https://ext.dcloud.net.cn/plugin?id=329
生命周期函数
onLoad onShow
获取页面
- getApp() 函数用于获取当前应用实例，一般用于获取globalData 。
- getCurrentPages() 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
$getAppWebview()
https://uniapp.dcloud.io/collocation/frame/window?id=getapp
uniapp 页面跳转
uni.navigateTo({
url: '/pages/info/index',
});
https://blog.csdn.net/zhuoganliwanjin/article/details/81781327
u-navbar 自定义导航栏
https://www.uviewui.com/components/navbar.html
u-sticky 吸顶
https://www.uviewui.com/components/sticky.html
swiper 轮播图
swiper实现轮播
https://uniapp.dcloud.io/component/swiper
scroll-view 滚动视图
// toView是data数据
// 可以写一个点击事件，修改toView值，就会滚动到对应id的view
// scroll() 是重置toView的值
<scroll-view style="height: 100%;" scroll-y="true" :scroll-into-view="toView" bindscroll="scroll">
<view :id="'view'+sindex" v-for="(sitem, sindex) in cateList" :key="sindex">
</view>
</scroll-view>
scroll-into-view: 内容够多才有效果，可实现点击切换内容
可参考https://blog.csdn.net/liyi1009365545/article/details/89438743
https://uniapp.dcloud.io/component/scroll-view
rich-text 富文本
<rich-text >hszz</rich-text>
https://uniapp.dcloud.io/component/rich-text
https://www.jianshu.com/p/a0e3b8b59049
客服按钮
// open-type='contact' 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息
// send-message-title="客服" 会话内消息卡片标题，open-type="contact"时有效
<button class='contact-btn' open-type='contact' send-message-title="客服" send-message-img="" >
<view class="xs row-between title">
人工客服(9:00-21:00) <u-icon name="arrow-right"></u-icon>
</view>
</button>
https://uniapp.dcloud.io/component/button?id=button
图片组件 u-image/ image
<u-image width="100vw" src="@/static/images/xingqiu-image.png" mode="widthFix"></u-image>
<image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
@error="imageError"></image>
mode: 图片裁剪、缩放的模式
- scaleToFill: 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
- aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
- aspectFill: 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
- widthFix: 宽度不变，高度自动变化，保持原图宽高比不变
https://uniapp.dcloud.io/component/image
https://www.uviewui.com/components/image.html
u-mask 遮罩层
//通过show参数配置是否显示遮罩
//遮罩被点击时，会发送一个click事件，如不需要此事件，请设置mask-click-able参数为false
<template>
<u-mask :show="show" @click="show = false"></u-mask>
</template>
https://www.uviewui.com/components/mask.html
uni.showModal 提示交互弹框
https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
NumberBox 数字输入框
https://www.bookstack.cn/read/uniapp-component/4abbbae6afcb8f7b.md
uniapp设置缓存
- uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
})
- uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
https://uniapp.dcloud.io/api/storage/storage?id=setstorage
mescroll-uni 下拉刷新(插件市场组件)
// upCallback 下拉后上拉的触发事件
<mescroll-uni ref="mescrollRef" bg-color="#fff" top="0rpx" @down="downCallback" @up="upCallback" textNoMore="-- END --">
</mescroll-uni>
http://www.mescroll.com/uni.html
https://ext.dcloud.net.cn/plugin?id=4094#detail
网友评论