微信小程序之网易云音乐（二）- uni-app标签的使用_uniapp audio标签

微信小程序之网易云音乐导航

前言

第一篇文章先学习uni-app的基本使用，这篇文章则学习其标签（简单的就不介绍了，官网案例很不错）的基本用法，下一篇文章才是真正的开始编写网易云音乐小程序。

一. 标签

1.1 scroll-view标签

scroll-view标签：可滚动视图区域。用于区域滚动。

<template>
	<view>
		<scroll-view scroll-y="true" style="height: 100px;" scroll-top="30px">
			<view style="background: red; width: 100px; height: 100px;"></view>
			<view style="background: yellow; width: 100px; height: 100px;"></view>
			<view style="background: blue; width: 100px; height: 100px;"></view>
			<view style="background: orange; width: 100px; height: 100px;"></view>
		</scroll-view>
		<view>----------</view>
		<scroll-view scroll-x="true" style="display: flex; white-space: nowrap;">
			<view style="background: red; width: 320px; height: 100px; display: inline-block;"></view>
			<view style="background: yellow; width: 320px; height: 100px; display: inline-block;"></view>
			<view style="background: blue; width: 320px; height: 100px; display: inline-block;"></view>
			<view style="background: orange; width: 320px; height: 100px; display: inline-block;"></view>
		</scroll-view>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如下：（scroll-top指的是竖向滚动条初始位置，其他属性可参考官网）

---

1.2 swiper标签

swiper标签滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。

案例：

<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" circular="true">
			<!-- <swiper-item>
				<view class="swiper-item1">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item2">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item3">C</view>
			</swiper-item> -->
			
			<!-- 循环写法 -->
			<swiper-item v-for="item in list" :key="item.id">
				<image :src="item.picUrl"></image>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						picUrl: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1707077.jpg'
					},
					{
						id: 1,
						picUrl: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1707559.jpg'
					},
					{
						id: 1,
						picUrl: 'http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1707181.jpg'
					},
				]
			}
		}
	}
</script>
<style>
	.swiper-item1 {
		height: 200px;
		width: 100%;
		background: red;
	}

	.swiper-item2 {
		height: 200px;
		width: 100%;
		background: blue;
	}

	.swiper-item3 {
		height: 200px;
		width: 100%;
		background: yellow;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

页面效果如下：

相关参数如下（其他的可以参考官网）：

• indicator-dots：是否显示面板指示点。
• autoplay：是否自动切换。
• interval：自动切换时间间隔。
• duration：滑动动画时长。
• circular：是否采用衔接滑动，即播放到末尾后重新回到开头。

---

1.3 icon标签

<template>
	<view>
		<view v-for="(value,index) in iconType" :key="index">
			<icon :type="value" size="26" />
			<text>{{value}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconType: ['success']
			}
		},
		onLoad() {
			// #ifdef APP-PLUS|| MP-WEIXIN
			this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search',
				'clear'
			]
			// #endif

			// #ifdef MP-ALIPAY
			this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success',
				'success_no_circle', 'loading'
			]
			// #endif

			// #ifdef MP-BAIDU
			this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal',
				'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect'
			]
			// #endif
		}
	}
</script>
<style>
	.swiper-item1 {
		height: 200px;
		width: 100%;
		background: red;
	}

	.swiper-item2 {
		height: 200px;
		width: 100%;
		background: blue;
	}

	.swiper-item3 {
		height: 200px;
		width: 100%;
		background: yellow;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

效果如下：

---

1.4 progress标签

progress顾名思义是进度条的意思：

案例：

<template>
	<view>
		<view>
			<view >
				<view class="progress-box"><progress percent="20" show-info stroke-width="5" /></view>
				<view class="progress-box"><progress percent="40" stroke-width="3" active /></view>
				<view class="progress-box"><progress percent="60" active stroke-width="5"  backgroundColor="#FF0000"/></view>
				<view class="progress-box"><progress percent="80" show-info stroke-width="5" activeColor="red"/></view>
			</view>
		</view>
	</view>
</template>

<style>
	.progress-box{
		margin-top: 20px;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下：

相关参数如下（官网）：

• percent：百分比0~100。
• show-info：在进度条右侧显示百分比。
• stroke-width：进度条线的宽度，单位px。
• active：进度条从左往右的动画。
• backgroundColor：未选择的进度条的颜色。
• activeColor：已选择的进度条的颜色。

---

1.5 slider标签

slider是滑动选择器。

<view class="uni-padding-wrap uni-common-mt">
    <view class="uni-title">设置step</view>
        <view>
            <slider value="60" @change="sliderChange" step="5" />
        </view>

        <view class="uni-title">显示当前value</view>
        <view>
            <slider value="50" @change="sliderChange" show-value />
        </view>

        <view class="uni-title">设置最小/最大值</view>
        <view>
            <slider value="100" @change="sliderChange" min="50" max="200" show-value />
        </view>

        <view class="uni-title">不同颜色和大小的滑块</view>
        <view>
            <slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
        </view>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

页面效果：

相关属性说明：

• value：当前取值。
• step：步长，取值必须大于 0，并且可被(max - min)整除。
• show-value：是否显示当前 value。
• min和max：最小值和最大值。
• activeColor：滑块左侧已选择部分的线条颜色。
• backgroundColor：滑块右侧背景条的颜色。
• block-color：滑块的颜色。
• block-size：滑块的大小，取值范围为 12 - 28。

---

1.6 audio标签

audio音频标签。

<template>
	<view>
		<view>
			<view class="page-body">
				<view class="page-section page-section-gap" style="text-align: center;">
					<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
						:author="current.author" :action="audioAction" controls></audio>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current: {
					poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
					name: '致爱丽丝',
					author: '粽',
					src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				},
				audioAction: {
					method: 'pause'
				}
			}
		},
		// onLoad(){
		// 	const audio =uni.createInnerAudioContext()
		// 	audio.autoplay=true// 自动播放
		// 	audio.src='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
		// 	audio.onPlay(function(){
		// 		console.log('开始播放！')
		// 	})
		// }
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

效果如下：

相关参数：

• src：要播放音频的资源地址。
• loop：是否循环播放。
• poster：默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效。
• name：默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效。
• author：默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效。

---

1.7 map标签

map是地图组件：

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}]
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果如下：

二. flex弹性布局

2.1 传统布局和flex弹性布局

<template>
	<view>
		<view class="father">
			<view class="son"></view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
	}
</script>
<style>
	.father {
		height: 200px;
		width: 200px;
		border: 1px solid red;
		position: relative;
	}

	.son {
		height: 50px;
		width: 50px;
		background: #007AFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果如下：

Flex布局：弹性布局，任何一个容器都可以指定为Fllex布局。那么上述代码改为：

.father {
		height: 200px;
		width: 200px;
		border: 1px solid red;
		// 只需要以下3行代码即可
		display: flex;
		justify-content: center;
		align-items: center;
	}
.son {
	height: 50px;
	width: 50px;
	background: #007AFF;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14