随笔分类 -  uni-app

学习uni-app
uniapp中使用uni-transition
摘要：安装uni-transition 过渡动画插件 在页面中<uni-transition mode-class="fade" :show="true"></uni-transition>包裹的内容将有淡入效果 阅读全文
posted @ 2022-01-05 10:56 生如夏花死如秋叶 阅读(3508) 评论(0) 推荐(0)
制作tab选项卡滚动到屏幕边缘变为固定吸顶可以使用粘性布局
摘要：css position除了relative，absolute，fixed以外还有粘性布局sticky。 粘性布局需要设定一个top（例如top：0），当页面元素滚动到达设定的top值时，页面元素会变为fixed固定，未到达top值时页面元素是relative 代码示例 <template> <vi 阅读全文
posted @ 2021-11-25 09:24 生如夏花死如秋叶 阅读(457) 评论(0) 推荐(0)
uni-app中使用侦听器和计算属性
摘要：侦听器watch 类型：{ [key: string]: string | Function | Object | Array } 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch() ，遍历 watch 对象的每一 阅读全文
posted @ 2021-07-09 11:05 生如夏花死如秋叶 阅读(1236) 评论(0) 推荐(0)
uni-app中使用列表渲染v-for
摘要：在 v-for 里使用数组 v-for 指令可以实现基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 第一个参数 item 则是被迭代的数组元素的别名。 第二个参数，即当前项 阅读全文
posted @ 2021-07-09 09:47 生如夏花死如秋叶 阅读(9831) 评论(0) 推荐(0)
uni-app中使用条件渲染
摘要：条件渲染有v-if和v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多，不管初始条件是什 阅读全文
posted @ 2021-07-09 09:14 生如夏花死如秋叶 阅读(689) 评论(0) 推荐(0)
uni-app中view组件使用
摘要：view是视图容器。 它类似于传统html中的div，用于包裹各种元素内容。 属性名类型默认值说明 hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation Boolean fals 阅读全文
posted @ 2021-07-07 16:19 生如夏花死如秋叶 阅读(1028) 评论(0) 推荐(0)
uni-app中使用底部导航栏
摘要：打开./pages.json文件 在其中找到属性tabBar 例如: "tabBar": { "color": "#7A7E83", "selectedColor": "#007AFF", "borderStyle": "black", "backgroundColor": "#F8F8F8", " 阅读全文
posted @ 2021-07-07 11:16 生如夏花死如秋叶 阅读(1179) 评论(0) 推荐(0)
uni-app中配置全局属性globalStyle
摘要：打开./pages.json文件 在其中找到属性globalStyle 例如: "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBa 阅读全文
posted @ 2021-07-07 10:40 生如夏花死如秋叶 阅读(2032) 评论(0) 推荐(0)
uni-app引入animate.css动画库
摘要：将animate.css放入根目录下的common目录中 打开根目录下的App.vue 在style中引入animate.css <style> /* 引入动画库 */ @import './common/animate.css'; </style> 在需要使用动画的标签中加入对应的class <v 阅读全文
posted @ 2021-07-06 18:11 生如夏花死如秋叶 阅读(742) 评论(0) 推荐(0)
uni-app引入阿里图标库
摘要：在阿里图标库中的项目设置中将字体格式中的Base64勾选 从阿里图标下载图标压缩包 找到iconfont.css文件 将iconfont.css中src:url()只保留Base64格式 例如: @font-face {font-family: "iconfont"; src:url('data:a 阅读全文
posted @ 2021-07-06 18:00 生如夏花死如秋叶 阅读(2976) 评论(0) 推荐(0)
uni-app引入官方css样式库
摘要：在项目根目录建立common目录 将官方css样式库uni.css放入common目录(新建官方Hello uni-app项目后在对应目录中找到) 打开根目录的App.vue文件 在style标签引入css <style> /* uni.css - 通用组件、模板样式库，可以当作一套ui库应用 */ 阅读全文
posted @ 2021-07-06 17:27 生如夏花死如秋叶 阅读(962) 评论(0) 推荐(0)