uni-app(2)
常用组件:
1.uni-card
链接:uni-app官网
组件属性:
代码块:
<template><view><uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" extra="2022" note="tips"><view>Uniapp</view><view>React</view><view>Java</view></uni-card><uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" extra="2022":isFull="true" note="tips"><view>Uniapp</view><view>React</view><view>Java</view></uni-card><uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" extra="2022" note="tips" cover="../../static/logo.png"><view>Uniapp</view><view>React</view><view>Java</view></uni-card><uni-card :isShadow="true" title="title" thumbnail="../../static/logo.png" extra="2022" note="tips"><view>Uniapp</view><view>React</view><view>Java</view><image slot="cover" src="../../static/logo.png"></image></uni-card></view>
</template> <script>export default {}
</script><style scoped></style>
效果:
2.uni-badge 数字角标
链接:uni-app官网
组件属性:
代码块:
<template><view style="display: flex;flex-direction: column;align-items: center;"><uni-badge size="small" :text="100" absolute="rightBottom" type="primary"><button type="default">右下</button></uni-badge><uni-badge text="1"></uni-badge><uni-badge text="2" type="purple" @click="bindClick"></uni-badge><uni-badge text="3" type="primary" :inverted="true"></uni-badge><!-- html代码中都是字符串类型,而JS代码中才有数据类型的概念, string,boolean ,number --><!-- offset="[10,10]" 此处的[10,10]是字符串类型 --><!-- :ffset="[10,10]" 此处的[10,10]是数组类型 , :属性名="js代码范围"--><uni-badge text="10" type="warning" absolute="rightTop" :offset="[10,10]" isDot=""><image src="../../static/logo.png"style="width: 100px;height: 100px;border: 1px solid red;" mode=""></image></uni-badge></view>
</template><script>
export default {};
</script><style scoped></style>
效果:
3.uni-dateformat 日期格式化
链接:uni-app官网
组件属性:
代码块:
<template><view><view>{{now}}</view><uni-dateformat :date="now" /><view><uni-dateformat :date="now" format="yyyy年MM月dd日 hh:mm:ss" /></view><view><uni-dateformat :threshold="[4e5,9e5]" :date="before30000" format="yyyy年MM月dd日 hh:mm:ss" /></view></view>
</template><script>export default {data() {return {now: new Date().getTime(),before30000: new Date().getTime()-500000};},}
</script><style scoped></style>
效果:
<view>标签可以代表一行~~
4.uni-collapse 折叠栏
链接:uni-app官网
属性:
手风琴模式:即当多个折叠栏时,每次点击后只会显示一个折叠栏下效果
代码段:
<template><view><uni-collapse :accordion="true"><uni-collapse-item title="水浒传" thumb="/static/logo.png" :showAnimation="true"><view style="background-color: aquamarine;padding: 10px;">水浒传</view></uni-collapse-item><uni-collapse-item title="三国演义" disabled="" :showArrow="false">三国演义</uni-collapse-item><uni-collapse-item title="西游记">西游记</uni-collapse-item><uni-collapse-item title="红楼梦">红楼梦</uni-collapse-item></uni-collapse></view>
</template><script>export default {}
</script><style scoped></style>
效果:
5.uni-notice-bar 通告栏
链接:uni-app官网
属性:
代码块:
<template><view><uni-notice-bar@getmore="getmore()"showIconshowCloseshowGetMore:scrollable="true":speed="50"color="green"single=""text="欢迎来到河南省信阳市商城县"></uni-notice-bar></view>
</template><script>
export default {methods: {getmore() {alert('hello');}}
};
</script><style scoped></style>
效果:
点击事件: alert("hello")
6.uni-list 列表
链接:uni-app官网
属性:见官网
代码块:
<template><view><uni-list><uni-list-item clickable title="微信安全中心" note="如果您有什么问题的话,请点击微信安全中心"></uni-list-item><uni-list-item title="微信号" rightText="hello kitte"></uni-list-item><uni-list-item showBadge badgeText="77" title="支付" thumb="/static/logo.png" thumbSize="sm" showArrow></uni-list-item><uni-list-item title="蓝牙" :note="blueStatus ? '已开启' : '已关闭'" showSwitch :switchChecked="blueStatus" @switchChange="blueChanged"></uni-list-item><uni-list-item title="测试" note="考试" thumb="/static/logo.png" direction="column"></uni-list-item><uni-list-item direction="column"><view slot="header">header</view><view slot="body">body</view><view slot="footer">footer</view></uni-list-item></uni-list></view>
</template><script>
export default {data() {return {blueStatus: true};},methods: {blueChanged(event) {console.log(event), (this.blueStatus = event.value);}}
};
</script><style scoped></style>
效果:
uni-app(2)相关推荐
- 切换 uniapp_万能前端框架uni app初探03:底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- uni app map 地图 漂浮问题及方案
uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
- uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
- HBuilder X ——Uni app 学习笔记(一)
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- uni App+H5 实现人脸识别
uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
- uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等 媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
- uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
最新文章
- 对 Python 开发者而言,IPython 仍然是 Jupyter Notebook 的核心
- 《系统集成项目管理工程师》必背100个知识点-99云计算
- android实现语音合成
- 让人生成功的49个细节
- securecrt如何保存操作日志
- ZOJ3805Machine(二叉树左右子树变换)
- javacript 字典
- 新手入门HTML5开发,你必须先搞懂这6个问题
- GDI+简单现实文字旋转
- html绘制圆形和弧形的代码,html5 canvas用来绘制弧形的代码实现
- 《推荐系统实践》(一)好的推荐系统
- Thief-Book:上班摸鱼看小说必备神器
- 双频段AP wps同时开启并通过智能手机、windows端连接问题
- unity3d api 中文文档_unity3D游戏开发工程师完整简历范文
- 基于Vue移动音乐webapp跨域获取QQ音乐歌单接口
- 使用live-server踩过的坑
- sunspot solr
- Zoom WebTeam面经
- 数据库原理—关系数据库
- BLAST+使用方法
热门文章
- 西南计算机基础知识作业答案,西南大学2019年秋[0483]《计算机应用基础》作业资料参考答案...
- 沃尔玛中国迎来首位女性CEO;默克旗下基金投资中国人工智能芯片初创公司 | 美通企业日报...
- java object大小_在Java中,确定对象object大小的最佳方法是什么? - Break易站
- centos7.2 安装破解版jira7.2.4
- 共享微型(格子)酒店售货机方案分析
- 静态旅游网站(PC端)
- 是什么对模拟信号测量回路隔离,保证输出的安全可靠?——BM系列隔离式安全栅
- 探探php模板下载,C3+H5+jQuery仿探探APP手机滑动切换特效
- 研报精选230219
- 下列均是未来计算机的发展趋势,下列 ( ) 均是未来计算机的发展趋势。