uniapp可以理解为,使用vue的语法以及微信小程序的标签和API公共的一个框架,所以学好了vue和微信小程序,就学会了uniapp。
切换动态样式
动态绑定前面加:方法写到methods里面
和vue一样,变量要用单括号包裹
//单括号包裹
<view :style="{background:bgflag?greencolor:redcolor}">动态样式</view>
<button type="default" @click="changeColor">点击切换动态样式</button>
通过三问运算符的方式绑定一个变量,通过变量的改变来切换动态样式,绑定class的方法当然就是一样的啦!
data() {
return {
bgflag:false,
greencolor:"green",
redcolor:"orange"
}
},
methods: {
changeColor(){
this.bgflag=!this.bgflag
}
}
当然作为一个移动端的框架肯定是少不了其中的下拉刷新哦!
下拉刷新
首先要
在pages.json里面添加刷新机制。(enablePullDownRefresh 属性修改为 true )
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "第一堂课",
"enablePullDownRefresh":true
}
}
只单单在pages.json里面添加刷新机制当然是不够的,在当前vue文件下肯定是也要有事件绑定滴!
这里不要忘记写个定时器结束刷新图标哦!(为了简单理解写个定时器,在实际项目里面肯定是要重新获取数据加载结束后再结束刷新图标)
onPullDownRefresh(){
console.log("下拉刷新")
//刷新之后2秒后结束刷新图标
setTimeout(()=>{uni.stopPullDownRefresh()},2000)
},
既然是框架,肯定有父子传值,兄弟传值,这里简单做一个父子传值的轮播图,有不懂的码伙伴可以留言评论~
父子传值
父组件index.vue中
<template>
<child :tag="lunArr"></child>
//tag为变量 lunArr是一个数组
</template>
<script>
import child from "../../components/child1.vue"
export default {
data() {
return {
lunArr: [] //图片地址
}
},
components: {
child
},
}
子组件接受,需要props接受参数类型 接收值为父组件变量名tag
这里要说一下哦父子组件,为什么要用父子组件?首先是节省代码的重复理由,新接触uniapp或者vue的读者可以理解为封装一个子组件就是封装一个函数,我们只需要传递其中的参数,就能节省大量的代码量,试想一下,你写出来一个会自动写程序的机器人,只需要告诉它写什么语言,剩下的功能点它都可以自己编辑了,是不是很方便呢?
注:子组件接受,需要props接受参数类型 接收值为父组件变量名tag
<template>
<view class="child">
我是子组件
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
<swiper-item v-for="(v,i) in tag" :key="i">
<image :src="v.url" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['tag']
}
</script>
我们可以通过父组件向子组件传值,自然也可以通过子组件向父组件传值。
与父传子不同的是,需要在子组件当中绑定事件,通过事件向父组件传值。
子组件中代码:
<template>
<button type="default" @click="chuanfun">传值</button>
</template>
<script>
export default {
data() {
return {
obj:{
name:'剑非出我心',
type:"程序猿",
age:18
}
};
},
props:['tag'],
methods:{
chuanfun(){
//第一个参数为父组件函数名
this.$emit('transfer',this.obj)
}
}
}
</script>
父组件需要有一个接受的值,
<template>
<child :tag="lunArr" @transfer="getInfo"></child>
</template>
<script>
export default {
data() {
return {
lunArr: [] //图片地址
}
},
components: {
child
},
methods: {
getInfo(m) {
console.log(m)
},
}
}
</script>