uni_app的基础知识

一、uni-APP里的视图和文本标签

<view>  //视图标签view
		//文本标签
		<text selectable="true">
		//selectable设置文字是否为可选
			我是不能选中的文字
		</text>
</view>

1、组织冒泡属性、设置鼠标触发的时间、空格的属性

hover-stop-propagation 阻止冒泡
:hover-start-time="2000"  设置鼠标触发的时间
设置空格的类型，space="emsp"/ensp/nbsp

2、button 的属性

<button>我是普通按钮</button>
	<button size="mini">我是小按钮</button>
	<button type="primary">我有背景色</button>
	<button type="primary" plain>背景色是否为空</button>
	<button type="primary" disabled>是否禁用按钮</button>
	<button loading>带个加载效果</button>

3、数据绑定的属性v-bind:src

<image v-bind:src="imgUrl"></image>
		<view v-for="(item,index) in arr" :key="item.id">
			名字：{{item.name}}年龄：{{item.age}}性别：{{item.sex}}
		</view>
<button type="primary" v-on:click="ClickHandle(20,$event)">点击我看美女</button>
		<!-- v-on:缩写@ -->

4、页面的触发函数

export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad(object) {
			console.log('页面加载了，我可以页面传参',object)
		},
		onShow() {
			console.log('页面显示了')
		},
		onReady() {
			console.log('页面初次渲染完成')
		},
		onHide() {
			console.log('页面隐藏了')
		},
		methods: {

		}
	}

<template>
	<view>
		<view>我是列表页</view>
		<!-- <view class="box-tiem" v-for="item in list">{{item}}</view> -->
		<!-- <button @click="PullDown">我是刷新的</button> -->
		
		<view>
			<button @click="get">我是get请求</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['前端','java','php','ui','前端','java','php','ui']
			}
		},
		
		
		// 页面刷新设置
		onPullDownRefresh () {
			console.log('触发了下拉刷新')			
			
			setTimeout(()=>{
				this.list=['java','前端','php','web']
				uni.stopPullDownRefresh()
			},2000)
		},
		onReachBottom() {
			console.log('页面触底了')
			this.list = [...this.list,...['前端','java','php','ui','前端','java','php','ui']]
		},
		methods: {
			PullDown() {
				// 关闭下拉刷新
				uni.startPullDownRefresh()
			},
			
			// 发送请求
			get() {
				
				uni.request({
					url:"http://localhost:8080/pages/list/list",
				})
			}
			
		}
	}
</script>

<style>
	.box-tiem {
		width: 100px;
		line-height: 200px;
	}
</style>

<style>
	/* 引用 */
	@import url("./a.css");
	.box1 {
		width: 350rpx;
		height: 350rpx;
		background-color: #007AFF;
	}
</style>