uni-app知识点整理（4）- 数据绑定、注册事件

JHY97

已于 2022-05-03 16:44:16 修改

阅读量1.4k

点赞数

分类专栏： uni-app框架笔记文章标签： vue.js uni-app 前端框架

于 2022-05-03 07:30:00 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/124535561

版权

uni-app框架笔记专栏收录该内容

6 篇文章 3 订阅

订阅专栏

3.3 onPullDownRefresh

3.3.1 uni.startPullDownRefresh(OBJECT)

3.3.2 uni.stopPullDownRefresh()

3.3.3 简单案例练习

3.4 onReachBottom

一、数据绑定

在页面中需要定义数据，和Vue一样，直接在data中定义数据即可：

<template>
	...
</template>

<script>
	export default {
		data() {
			return {
				msg: 'hello-world'
			}
		},
		methods: {
			
		}
	}
</script>

<style>
...
</style>

1.1 插值表达式的使用

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

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

2. 在插值表达式中使用三元运行

// flag 绑定布尔值
<view>{{ flag ? '条件为真的内容' : '条件为假的内容' }}</view>

3. 基本运行

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

1.2 v-bind动态绑定属性

1. 利用v-bind进行渲染

		<view>
			<input type="text" v-bind:value="msg">
		</view>

2. 简写形式

		<view>
			<input type="text" :value="msg2">
		</view>

3. 案例练习

<template>
	<view>
		<view>
			<input type="text" v-bind:value="msg">
		</view>
		<view>
			<input type="text" :value="msg2">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:'hello world',
				msg2:'hello nui-app'
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	input{
		border: 1rpx solid black;
		margin: 20rpx;
	}
</style>

1.3 v-for的使用

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

export default {
		data() {
			return {
				arr:[
					{
						id:'001',
						name:'周星星',
						age:18
					},
					{
						id:'002',
						name:'王小明',
						age:20
					},
					{
						id:'003',
						name:'周发',
						age:25
					},
				]
			}
		},
		methods: {
			
		}
	}

利用v-for循环

<template>
	<view>
		<view v-for="p in arr" :key="p.id">
			id:{{p.id}} - 姓名:{{p.name}} - 年龄:{{p.age}}
		</view>
	</view>
</template>

二、注册事件

在uni中事件绑定和vue是一样的，通过v-on进行事件的绑定，也可以简写为@

Vue笔记：Vue知识点整理（一）- Vue核心（2）- 事件处理

<button @click="clickEvent">点击事件</button>

事件函数定义在methods中

methods:{
    clickEvent(){
        ....
    }
}

三、uni生命周期

3.1 应用的生命周期

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

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

应用的生命周期函数
函数名	说明
onLaunch	当 uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯(opens new window)
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

uni-app官方文档 - 应用生命周期

3.2 页面生命周期

部分页面的生命周期函数
函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏

uni-app官方文档 - 页面生命周期

tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

3.3 onPullDownRefresh

下拉刷新，页面生命周期函数

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

需要在 pages.json 里，找到的当前页面的 pages 节点，并在 style 选项中开启 enablePullDownRefresh
当处理完数据刷新后，uni.onPullDownRefresh 可以停止当前页面的下拉刷新。

uni-app官方文档 - 下拉刷新

3.3.1 uni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致

3.3.2 uni.stopPullDownRefresh()

停止当前页面下拉刷新

3.3.3 简单案例练习

创建一个list.vue页面进行演示，放入数组数据，在刷新后更换数组内数据位置（因为更新数据少，可以设置定时器查看效果），设置一个点击按钮实现下拉属性效果

注意：在页面实现下拉刷新时，需要在pages.json注释或删除掉下拉刷新相关内容：

           {
            "path" : "pages/list/list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "list页面"
                // "enablePullDownRefresh": false
            }

list.vue

<template>
	<view>
		<view v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
		<button @click="pullDown">点击实现下拉刷新效果</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['splatoon3','异度之刃3','艾尔登法环','博德之门3']
			}
		},
		onPullDownRefresh() {
			console.log('触发下拉刷新, 2s后刷新');
			setTimeout(()=>{
				this.list = ['艾尔登法环','博德之门3','splatoon3','异度之刃3'];
				uni.stopPullDownRefresh() // 停止刷新
			},2000)
		},
		methods: {
			pullDown(){
				uni.startPullDownRefresh();
			}
		}
	}
</script>

由图示可看出，下拉刷新2s后列表内的数据位置发生了改变，且点击按钮也能触发下拉刷新的效果

3.4 onReachBottom

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据

onReachBottom使用注意：

可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
如使用scroll-view导致页面没有滚动，则触底事件不会被触发。

JHY97

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
uni-app知识点整理（4）- 数据绑定、注册事件

一、数据绑定在页面中需要定义数据，和Vue一样，直接在data中定义数据即可：<template> ...</template><script> export default { data() { return { msg: 'hello-world' } }, methods: { } }</script><style>...</style>1.1 插值表
复制链接

扫一扫