uni-app学习随笔

Posted 2020-12-16 任磊5

一、数据绑定

　　1.在data里面定义并赋值，然后使用{{****}}的方式显示。

　　2.v-bind:用来解析链接地址，例如在线图片在data里面定义，使用 v-bind:src(:src)----v-bind:src==:src

　　3.v-for:一般都是配套数组使用<view v-for="(item,index) in arr" :key="item.id">序号:{{item.index}},名字:{{item.name}},年龄:{{item.age}}</view>

二、注册事件

　　1.button事件触发：<button type="primary" v-on:click="clickHandle">按钮</button>----v-on:click==@click

　　2.methods:{clickHandle(){}}------methods方法跟data(){}同级

　　3.按钮点击事件触发事件函数clickHandle(20,$event),methods:{clickHandle(num,e){console.log(‘点击我了‘，num,e)}}

三、生命周期函数

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

　　2.下拉刷新函数onPullDownRefresh()

　　3.触底函数onReachBottom()

　　4.发送get请求使用uni.request

　　5.destroyed(){clearInterval(this.intId)}用来销毁页面内的定时器

四、条件兼容

　　1.在注释行里面写<!-- #ifdef H5 --><view>只在H5里面显示</view><!-- #endif -->------------注释快捷键ctrl+/

　　2.在注释行里面写<!-- #ifdef MP-WEIXIN --><view>只在微信小程序里面显示</view><!-- #endif -->

　　3.组件，方法和样式都可以这样用

五、页面通讯　

　　uni.$on(eventName,callback)

　　监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

　　uni.$on(‘eventName‘,num=>{this.num+=num})

　　uni.$emit(eventName,OBJECT)

　　方法里面调用uni.$emit(‘eventName‘,10)--------10对应上面的num实例

　　

<navigator url="/pages/detail/detail?id=80&age=19">跳转页面</navigator>