uniapp专题学习（四）
前言
在uniapp专题学习（三）中学习到的知识点有计算属性computed、计算属性computed和方法methods的区别、vue语法的自定义组件、pops的父子组件参数传递。
native修饰符
如果想在自定义组件执行原生的事件就需要用native来修饰
假设我已经定义好了自定义组件，我想触发click事件,就需要用到native修饰符：
<template>
<view>
<mycomponent :title="title" @click.native="onclick"></mycomponent>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
onclick(){
console.log("xxx")
}
}
}
</script>
父子间传值小案例
需求：封装一个弹窗的组件,点击打开按钮打开弹窗，点击关闭按钮关闭弹窗
子组件：
<template>
<view>
<view>---弹出框样式---</view>
<view class="xbox" :style="{height:state?'300rpx':'0'}"></view>
<button size="mini" @click="onclose">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
props:{
state:{
type:Boolean,
default:false
}
},
data() {
return {
};
},
methods:{
onclose(){
this.$emit("close",false)
}
}
}
</script>
<style lang="scss">
.xbox{
width: 300rpx;
height: 300rpx;
background-color: yellowgreen;
}
</style>
父组件：
<template>
<view>
<button @click="state = true">开启</button>
<mypop :state="state" @close="onclose"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
state:false
};
},
methods:{
onclose(e){
this.state = e
}
}
}
</script>
sync修饰符与update响应式写法
根据以上的案例有一个简化的写法，就是update和sync修饰符的响应式写法
子组件：
<template>
<view>
<view>---弹出框样式---</view>
<view class="xbox" :style="{height:state?'300rpx':'0'}"></view>
<button size="mini" @click="onclose">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
props:{
state:{
type:Boolean,
default:false
}
},
data() {
return {
};
},
methods:{
onclose(){
this.$emit("update:state",false)
}
}
}
</script>
<style lang="scss">
.xbox{
width: 300rpx;
height: 300rpx;
background-color: yellowgreen;
}
</style>
父组件：
<template>
<view>
<button @click="state = true">开启</button>
<mypop :state.sync="state"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
state:false
};
}
}
</script>
vue的生命周期
uniapp之交互反馈
uni.showToast(OBJECT)
显示消息提示框。
详情请点击uni.showToast参数说明
示例
uni.showToast({
title: '标题',
duration: 2000
});
uni.hideToast()
隐藏消息提示框。
示例
uni.hideToast();
uni.showLoading(OBJECT)
显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
详情请点击uni.showLoading参数说明
示例
uni.showLoading({
title: '加载中'
});
uni.hideLoading()
隐藏 loading 提示框。
示例
uni.showLoading({
title: '加载中'
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
uni.showModal(OBJECT)
显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
详情请点击showModal参数说明
示例
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
uni.showActionSheet(OBJECT)
从底部向上弹出操作菜单
详情请点击showActionSheet参数说明
示例
uni.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function (res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
fail: function (res) {
console.log(res.errMsg);
}
});
uni.setNavigationBarTitle(OBJECT)
动态设置当前页面的标题。
详情请点击setNavigationBarTitle参数说明
示例
uni.setNavigationBarTitle({
title:"js设置的title"
})
uni.setNavigationBarColor(OBJECT)
设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖
详情请点击setNavigationBarColor参数说明
示例
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#ff0000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
