uniApp的学习开发小程序（四）uni组件和API的学习

uniApp的组件的官方文档

视图容器

视图容器包含以下

1、view

官网的描述是这样的

我的代码如下：

<view class="titile" hover-class="active" :hover-stay-time="2000">
			<!-- 阻止祖先节点被触发 -->
			<view class="box" hover-class="activech" hover-stop-propagation>我是标题</view>
</view>

hover-class绑定按下去的样式，
:hover-stay-time样式持续的时间
hover-stop-propagation 阻止子节点点击触发后，父节点联动触发，

/* justify-content水平居中 */
	.titile {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		border: 1rpx solid #4CD964;
	}

	.box {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #4CD964;
	}

	.active {
		background-color: #FF0000;
	}

	.activech {
		background-color: #F1F1F1
	}

2、scroll-view

平台解释如下
官方示例

我学习的代码如下

<scroll-view class="scrollView" scroll-x="true">
			<view>A</view>
			<view>B</view>
			<view>C</view>

</scroll-view>

样式如下

.scrollView {
		// 不换行
		white-space: nowrap;

		view {
			display: inline-block;
			width: 400rpx;
			height: 200rpx;
			background-color: red;
			margin-right: 10rpx;
		}
	}

也就是页面拖动的功能

3、swiper

swiper轮播图样式

我的代码如下

<swiper class="swaper" indicator-dots=true autoplay=true :interval=1000>
			<swiper-item>
				<view class="img1">图片一</view>
			</swiper-item>
			<swiper-item>
				<view class="img2">图片二</view>
			</swiper-item>
		</swiper>

样式如下
indicator-dots显示轮播图下面的小点点
autoplay实现自动播放
interval 自动播放的时间

.swaper {
		.img1 {
			background-color: blue;
		}
		.img2 {
			background-color: red;
		}
	}

4、match-media

match-media 根据屏幕的宽度，显示和隐藏内容

:min-width最小宽度，:max-width最大宽度

<match-media :min-width="375" :max-width="800">
			<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
		</match-media>
		<match-media :width="375">
			<view>当页面:宽度为375时候时显示</view>
		</match-media>

5、movable-area和movable-view

scale-area 只要在movable-area上就可以缩放
direction滑动方向
scale缩放效果
:x=“30” :y="40"初始化 movable-view的位置

<!-- scale-area 外面范围也可以缩放效果-->
		<movable-area scale-area>
			<!-- x绑定初始变量，初始的时候的位置 -->
			<!-- direction滑动的方向 -->
			<!-- inertia带惯性 -->
			<!-- scale缩放效果 -->
			<movable-view scale inertia :x="30" :y="40" direction="all">拖动和缩放</movable-view>
		</movable-area>

样式如下

movable-area {
		height: 400rpx;
		width: 100%;
		background-color: grey;
		// overflow: hidden超出后隐藏
		overflow: hidden;

	}

	movable-view {
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		width: 100rpx;
		background-color: blue;
	}

6、cover-view

覆盖在原生组件上的文本视图

<video style="width: 100%;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4">

			<cover-view style="color: #DD524D;">
				<button style="height: 100rpx;width: 300rpx;">播放按钮</button>
				</cover-view>
		</video>

Api的学习

7、uni.request(OBJECT)

uni.request(OBJECT)

sendRequet() { 
				console.log("发送请求")
				uni.request({
					url: "https://mock.mengxuegu.com/mock/5fcf2c9a6abe342cf5308a71/mxg-education-app-teacher/pay/order/user/list",
					method: 'GET',
					header: {
						token: 'jshsjhshs'
					},
					data: {
						name: "jiang"
					},
					success: (res) => {
						console.log("res", res)
						console.log("请求成功会调用这个函数")
					},
					fail: (err) => {
						console.log("请求失败会调用这个函数")
					},
					complete: () => {
						console.log("成功或者失败都会请求这个函数")
					}


				})
			},

8、数据缓存

save(){
			uni.setStorage({
				key:'token',
				data:'111kakasksj111',
				// 保存成功回调方法
				success: () => {
					console.log("保存成功")
				}
			})
			console.log("验证是不是异步，如果是异步，先执行这个代码")
			// setStorageSync异步存储token信息
			uni.setStorageSync("token2","222222")
			// getStorageSync异步拿取token信息
			const token22=uni.getStorageSync("token")
			console.log("token22",token22)
			const token=uni.getStorageInfoSync()
			console.log("token",token)
			// 同步移除存储的数据
			uni.removeStorageSync("token2")
		
		} 
		
		},