1.属性
1.rpx:即响应式px,一种根据屏幕宽度自适应的动态单位。
2.@import:导入外联样式表。
3.page:相当于body节点。
4.全局样式：定义在app.vue中的样式，作用于每个页面。
5.局部样式：在pages目录下的vue文件中定义的样式，只作用于对应的页面，会覆盖app.vue中相同的选择器。
6.v-bind:数据绑定
<image v-bind:src="imgUrl" mode="aspectFit"></image>
<script>
export default {
data() {
return {
imgUrl:"../../static/img_mv.jpg",
}
},
}
</script>
7.v-for:绑定数组
<view v-for="(item,index) in arr":key="item.id">
序号：{{index}},名字：{{item.name}}，年龄{{item.age}}
</view>
<script>
export default {
data() {
return {
arr:[
{
name:"宋小宝",
age:20,
id:1
},{
name:"刘能",
age:20,
id:2
}
]
}
},
}
</script>
8.@click:事件绑定
<view>
<button type="primary" @click="clickHandle(20,$event)">按钮</button>
</view>
<script>
export default {
data() {
return {
}
},
methods: {
clickHandle(num,e) {
alert(20)
}
},
}
</script>
9.overflow:hidden清除浮动
overflow：hidden作用
1.超出变宽部分隐藏,即内容溢出隐藏.
2.清除浮动,即不给父元素设置高度的时候,其内部元素浮动后会导致下面的元素顶上去,这是因为子元素浮动后,子元素脱离标准流,不占位,父元素检测不到子元素的大小,从而高度为0.
3.解决给子元素设置margin-top的时候,父元素也会下降的问题.
10.letter-spacing:20px:设置字体间距
11.display属性
1.display:flex弹性布局
弹性布局（display:flex;）属性详解
基本概念:采用flex布局的元素,称为flex容器,简称'容器'.它的所有子元素自动成为容器成员,成为flex项目,简称'项目'.
2.display:block块级元素,特点:
1.每个块级元素都是从新的一行开始,并且其后面的元素也灵气一行.
2.元素的宽高,行高以及顶和底部边距都可设置.
3.元素的宽高在不设置的情况下,是它本身容器的100%(和父元素的宽度一致),除非设置一个宽度.
3.display:inline行内元素,特点:
1.和其它元素都在一行上.
2.元素的宽高,行高以及顶和底部边距都不可设置.
3.元素的宽度就是它包含的文字或图片的宽度,不可改变.
12.box-sizing:border-box
盒子模型是指：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）
属性作用:没有设置box-sizing:border-box属性,宽高会加上padding和border的值,需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽度.加了该属性后,padding和border的值就不会再影响元素的宽度,相当于把padding和border的值都算在content里面,盒子模型会自动根据padding和border的值来调整content的值,就不再需要手动计算调整.
2.生命周期
1.应用生命周期，在app.vue文件中配置
2.页面生命周期，在页面中配置
3.刷新
1.开启下拉刷新
方法一：在pages.json里，找到当前页面的pages节点，并在style选项中开启enablePullDownRefresh.
{
"path" : "pages/lsit/lsit",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": true
}
}
方法二：通过调用uni.startPullDownRefresh方法来开启下拉刷新。
<template>
<view>
<view>这是列表页</view>
<view v-for="item in list">{{item}}</view>
<button @click="pullDown">刷新</button>
</view>
</template>
<script>
export default {
data() {
return {
list:[]
}
},
onPullDownRefresh() {
console.log('出发了下拉刷新');
setTimeout(()=>{
this.list=['前端','java','ui','测试','大数据']
uni.stopPullDownRefresh()
},1500)
},
methods: {
pullDown(){
uni.startPullDownRefresh()
}
}
}
</script>
<style>
</style>
2.关闭下拉刷新,调用uni.stopPullDownRefresh()
3.上拉刷新onReachBottom(),与下拉刷新同级
{
"path" : "pages/lsit/lsit",
"style" :
{
"navigationBarTitleText": "",
"onReachBottomDistance": 200 <!--页面上拉触底事件触发时,距页面底部距离-->
}
}
<script>
export default {
onReachBottom() {
this.list=[...this.list,...['前端','java','ui','测试','大数据','测试','大数据']]
}
}
</script>
4.数据缓存
<template>
<view>
<button type="primary" @click="setStorage">存储数据</button>
<button type="primary" @click="getStorage">获取数据</button>
<button type="primary" @click="removeId">移除数据</button>
</view>
</template>
<script>
export default {
data() {
return {
list: []
}
},
methods: {
setStorage() {
// 异步缓存
uni.setStorage({
key:'id',
data:80,
success() {
console.log('存储成功');
}
})
// 同步缓存
uni.setStorageSync('id',100)
},
getStorage(){
// 异步获取
uni.getStorage({
key:'id',
success(res) {
alert(res.data)
}
})
// 同步获取
const res=uni.getStorageSync('id')
console.log(res)
},
removeId(){
// 异步删除
uni.removeStorage({
key:'id',
success() {
console.log('移除成功');
}
})
// 同步删除
uni.removeStorageSync('id')
}
},
}
</script>
<style>
</style>
5.图片上传和图片预览
<template>
<view>
<button type="primary" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" mode="aspectFit" @click="previewImg(item)"></image>
</view>
</template>
<script>
export default {
data() {
return {
imgArr:[]
}
},
methods: {
//图片上传
chooseImg(){
uni.chooseImage({
count:5,
success:res=>{
this.imgArr=res.tempFilePaths
}
})
},
//图片预览
previewImg(res){
uni.previewImage({
current:res,
urls:this.imgArr,
loop:true,
indicator:'number'
})
}
}
}
</script>
<style>
</style>
6.条件注释实现跨段兼容
条件注释是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台，已实现不同的效果。
写法：以#ifdef+平台标识开头，以#endif结尾。
平台标识：
<template>
<view>
<!--#ifdef H5-->
<view>我希望只在h5页面中看见</view>
<!--#endif-->
<!--#ifdef MP-WEIXIN-->
<view>我希望只在微信小程序页面中看见</view>
<!--#endif-->
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
// #ifdef H5
console.log('我希望在h5中打印');
// #endif
// #ifdef MP-WEIXIN
console.log('我希望在微信小程序中打印');
// #endif
}
}
</script>
<style>
/*h5中的样式*/
/* #ifdef H5*/
view{
color: hotpink;
}
/* #endif */
/*小程序中的样式*/
/* #ifdef MP-WEIXIN */
view{
color: #0000FF;
}
/* #endif */
</style>
7.页面跳转
<template>
<view>
<button @click="goDetail">跳转详情页</button>
<button @click="goMessage">跳转信息页</button>
<button @click="redirectToDetails">跳转详情页并关闭当前页面</button>
</view>
</template>
<script>
export default {
data() {
return {}
},
onUnload() {
console.log('销毁')
},
methods: {
//普通页面跳转
goDetail() {
uni.navigateTo({
url: '/pages/details/details'
})
},
//tab页面跳转
goMessage() {
uni.switchTab({
url: '/pages/message/message'
})
},
//跳转页面后关闭当前页面
redirectToDetails(){
uni.redirectTo({
url:'/pages/details/details'
})
}
}
}
</script>
<style>
</style>
1.你好
8.页面通讯
uni-app官网 (dcloud.net.cn)
1.触发全局自定义事件
uni.$emit('updateNum',10)
2.接收全局自定义事件
uni.$on('updateNum',(num)=>{
this.num+=num
})
