uniapp 新手学习笔记

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>

后续会持续更新的啦，喜欢的小伙伴点一下三联哦，一起学习前端互相分享经验。                ​​​​​​​        ​​​​​​​

                                                                                感谢感谢~