1.uni-app种的样式
- rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750px恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会等比放大。
- 使用
@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;表示语句结束 - 支持基本常用的选择器class,id,element等
- 在
uni-app
中不能使用*
选择器。 page
相当于body
节点- 定义在App.vue中的样式为全局样式,作用于每一个页面,在pages目录下的vue文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖App.vue中相同的选择器。
uni-app
支持使用字体图标,使用方式与普通web
项目相同,需要注意以下几点:- 字体文件小于40kb,
uni-app
会自动将其转化为base64格式; - 字体文件大于等于40kb,需开发者自己转换,否则使用将不生效;
- 字体文件的引用路径推荐以~@开头的绝对路径。
- 字体文件小于40kb,
@font-face{
font-family:text1-icon;
src:url('~@/static/iconfont.ttf')
}
1.1使用图标
<template>
<view>
<view>样式的学习</view>
<view class="box1">
测试文字
<text>123</text>
</view>
<view class="iconfont icon-tupian"> </view>
</view>
</template>
<script>
</script>
<style lang="scss">
@import url("./a.css");
.box1{
width: 750rpx;
height: 750rpx;
background: $global-color;
font-size: 30rpx;
text{
color: pink;
}
}
</style>
2.uni-app中的数据绑定
在页面中需要定义数据,和我们之前的vue一模一样,直接在data中定义数据即可。
export default{
data(){
return{
msg:'hello-uni'
}
}
}
插值表达式的使用
- 利用插值表达式渲染基本数据
<view> {{msg}}</view>
- 在插值表达式中使用三元运算
<view>{{flag?’我是真的‘:'我是假的'}}</view>
- 基本运算
<view>{{1+1}}</view>
3.v-bind动态绑定属性
在data中定义了一张图片,我们希望把这张图片渲染到页面上
export default{
data(){
return {
img:"http://destiny001.gitee.io/image/monkey_02.jpg"
}
}
}
利用v-bind进行渲染
<image v-bind:src="img"></image>
还可以缩写成:
<image :src="img"></image>
利用v-for循环值
<view v-for="(item,index) in arr" :key="item.id">
序号:{{index}},
名字:{{item.name}},
年龄:{{item.age}}
</view>
data() {
return {
msg: "hello",
flag: true,
img: "http://destiny001.gitee.io/image/monkey_02.jpg",
arr: [{
name: "宋小宝",
age: 20,
id: 1
},
{
name: "刘能",
age: 20,
id: 2
},
{
name: "赵四",
age: 20,
id: 3
},
{
name: "小沈阳",
age: 20,
id: 4
}
]
}
}
4.uni中的事件
事件绑定
在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@
<button @click="tapHandle">点我啊</button>
事件函数定义在methods中
methods:{
tapHandle(){
console.log("真的点我了")
}
}
事件传参
- 默认如果没有传递参数,事件函数第一个形参为事件对象
//template
<button @click="tapHandle"> 点我啊</button>
//script
methods:{
tapHandle(e){
console.log(e)
}
}
- 传入指定参数和事件对象
<button type="primary" v-on:click="clickHandle(20,$event)">按钮</button>
methods:{
clickHandle(num,e){
console.log("点击我了",num,e)
}