uni-app【事件绑定、下拉刷新、上传图片、导航跳转、组件通讯】

uni-app中的样式

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

• 支持基本常用的选择器class、id、element等。

• 在uni-app中不能使用*选择器。

• page相当于body节点

• 定义在App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。

• uni-app 支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：

  • 字体文件小于40kb，uni-app 会自动将其转换为 base64 格式；

  • 字体文件大于等于40kb，需开发者自己转换，否则使用将不生效；

  • 字体文件的引用路径推荐使用以~@ 开头的绝对路径。

    @font-face{
           
        font-family:test1-icon;
        src:url('~@/static/iconfont.ttf')
    }
    

  • 如何使用scss或者less

uni-app中的数据绑定

在页面中需要定义数据，和vue一模一样，直接在data中定义数据即可。

export default{
   
    data(){
   
        return{
   
            msg:'hello-uni'
        }
    }
}

插值表达式的使用

• 利用插值表达式渲染基本数据

  <view>{
      {msg}}</view>
  

• 在插值表达式中使用三元运算

  <view>{
      { flag ? '我是真的' : '我是假的' }}</view>
  

• 基本运算

  <view>{
      {1+1}}</view>
  

v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default{
   
    data(){
   
        return{
   
            img:'https://rabbiter.top/oss/blogs/imgs/img_0fdd34398df_1601132059427.jpg'
        }
    }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

开可以缩写成：

<image :src="img"></image>

v-for的使用

data中定义一个数组，最终将数据渲染到页面上

data(){
   
    return{
   
        arr:[
            {
   name:'小明',age:20},
            {
   name:'小亮',age:22},
            {
   name:'小梁',age:21},
            {
   name:'小张',age:22},            
        ]
    }
}

利用v-for进行循环

<view v-for="{item,index} in arr" :key="index">名字：{
  {item.name}}---年龄：{
  {item.age}}</view>

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)
  	}
  }
  

• 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

  // template
  <button @click="tapHandle(1)">点我啊</button>
  // script
  methods: {
    tapHandle (num) {
      console.log(num)
    }
  }
  

• 如果获取事件对象也想传递参数

  // template
  <button @click="tapHandle(1,$event)">点我啊</button>
  // script
  methods: {
    tapHandle (num,e) {
      console.log(num,e)
    }
  }
  

uni的生命周期

应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被称为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数。

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当uni-app 启动，或从后台进入前台显示
onHide	当uni-app 从前台进入后台
onError	当uni-app 报错时触发

页面一加载会执行：onLaunch和onShow函数

缩小页面，再重新打开页面会执行：onHide和onShow函数

页面的生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载

页面一加载会执行：onLoad、 onShow、onReady

页面一隐藏，再打开会执行：onHide、onShow

页面一切换，会执行：onHide；页面再切回来，会执行：onShow

下拉刷新

开启下拉刷新

在uni-app中有两种方式开启下拉刷新

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

  

通过配置文件开启

创建list页面进行演示

<template>
	<view>
		杭州学科
		<view v-for="(item,index) in arr" :key="index">
			{
  {item}}
		</view>
	</view>
</template>

<script>
	export default {
     
		data () {
     
			return {
     
				arr: ['前端','java','ui','大数据']
			}
		}
	}
</script>

<style>