微信小程序之网易云音乐（二）- uni-app标签的使用
前言
第一篇文章先学习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>
效果如下：（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>
页面效果如下：
相关参数如下（其他的可以参考官网）：
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>
效果如下：
| 平台 | type 有效值 |
|---|---|
| App、H5、微信小程序、QQ小程序 | success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
| 支付宝小程序 | info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading |
| 百度小程序 | success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect |
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>
效果如下：
相关参数如下（官网）：
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>
页面效果：
相关属性说明：
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>
效果如下：
相关参数：
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>
效果如下：
二. 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>
效果如下：
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;
}
59
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
