本文详细介绍了Uniapp的组件使用，包括基础组件和容器组件如scroll-view、swiper、match-media、movable-area以及cover-view/cover-image。通过实例展示了scroll-view的滚动事件、swiper的轮播功能、movable-area的拖动效果和cover-view在视频上的应用，同时讲解了相关事件绑定和属性设置。
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
按照官网教程学习使用组件，并且重点把容器组件的应用进行了练习。
1.官网关于组件的介绍
组件是视图层的基本组成单元,是一个单独且可复用的功能模块的封装。
开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。
注意：所有组件与属性名都是小写，单词之间以连字符-连接。
下面的示例是button按钮组件，有size，disabled，hover-start-time等多个属性，标签中是文本
<template>
<view>
<button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
</view>
</template>
所有的组件都具有以下公共属性，但每个组件也都有自己的专有属性。
组件使用前,需要将对应的组件复制到components目录下方。
组件中可使用js变量绑定
组件的属性前加@则代表这是一个事件。
事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。
基础组件有很多，大概分为几类。
2.视图容器的简单练习使用
1. scroll-view 滚动条
可以引用为纵向和横向。
纵向引用时，scroll-y=“true”， class=“scroll-Y”, scroll-top引用js变量，注意为了保持滚动条原始位置，
以及上一个位置，用了两个变量。
横向引用时, scroll-x=“true”, class=“scroll-view_H”
事件定义了三个：
@scrolltoupper 滚动到顶部/左边，会触发 scrolltoupper 事件，纵向横向通用
@scrolltolower 滚动到底部/右边，会触发 scrolltolower 事件，纵向横向通用
@scroll 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}，纵向横向通用
应用效果
<!-- 引用纵向scroll-view的代码 -->
<view>
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n纵向滚动</text>
</view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"
enable-back-to-top="true" style="height: 500rpx" >
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
<text>点击这里返回顶部</text>
</view>
<!-- 引用横向scroll-view的代码 -->
<view>
<view class="uni-title uni-common-mt">
Horizontal Scroll
<text>\n横向滚动</text>
</view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll"
scroll-left="120" >
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
</scroll-view>
</view>
对应的<script></script>补充JS定义
在下方的view中定义了@tap事件,触发点goTop函数也在其中补充
data() {
return {
title: '首页',
//滚动的初始位置为0，上一次滚动的位置存在old.scrollTop
scrollTop: 0,
old: {
scrollTop: 0}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
//每次滚动以后,把当前的滚动位置存在this.old.scrollTop
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon:"none",
title:"纵向滚动 scrollTop 值已被修改为 0"
})
}
}
在<style></style>补充CSS样式定义
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；
使用横向滚动时，需要给 <scroll-view> 添加white-space: nowrap;样式,强制文字不换行
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;//强制文字不换行
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
2. swiper 滑块视图容器
一般用于左右滑动或上下滑动，swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
应用效果
swiper的属性设置中，circular是否采用衔接滑动,默认为false；indicator-dots是否显示面板指示点，
autoplay为是否自动切换，默认为false；interval为自动切换时间间隔，默认5000ms；
duration为滑动动画时长，默认500ms。
当然这些可以用JS改变，属性current为当前位置，current改变触发@change事件
<!-- swiper应用案例代码 -->
<!-- swiper轮播图显示区 -->
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration">
<swiper-item>
<view class="swiper-item uni-bg-red">AAA</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">BBB</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">CCC</view>
</swiper-item>
</swiper>
</view>
<!-- swiper轮播播放方式设置 -->
<view class="swiper-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">指示点</view>
<!-- 引用了switch切换组件 -->
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自动播放</view>
<!-- 引用了switch切换组件 -->
<switch :checked="autoplay" @change="changeAutoplay" />
</view>
</view>
<!-- swiper轮播播放参数设置 -->
<view class="uni-padding-wrap">
<view class="uni-common-mt">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<!-- 引用了slider滑动条组件 -->
<slider @change="durationChange" :value="duration" min="500" max="2000" />
<view class="uni-common-mt">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<!-- 引用了slider滑动条组件 -->
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
</view>
对应的<script></script>补充JS定义
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500
}
},
methods: {
//设置是否显示面板指示点
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
//设置是否自动播放
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
//设置幻灯片切换时长
intervalChange(e) {
this.interval = e.target.value
},
//自动播放间隔时长
durationChange(e) {
this.duration = e.target.value
}
}
在<style></style>补充CSS样式定义
.uni-margin-wrap {
width:690rpx;
width: 100%;;
}
.swiper {
height: 300rpx;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
3. match-media 适配屏幕组件
match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。
<template>
<view>
<match-media :min-width="375" :max-width="800" >
<view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view>
</match-media>
<match-media :min-height="400" :orientation="landscape">
<view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view>
</match-media>
</view>
</template>
4. movable-area可拖动区域和movable-view可移动的视图容器
movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。
即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。
当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。
应用效果
示例代码：在<movable-area>中定义movable-view
movable-view 属性x，y为左上角位置，direction可定义移动方向，有all、vertical、horizontal、none
inertia定义movable-view是否带有惯性移动，默认false
out-of-bounds定义超过可移动区域后，movable-view是否还可以移动，默认false
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text>\nmovable-view 区域小于 movable-area</text>
</view>
<movable-area>
<!-- css原始大小movable-view宽高150,movable-area高300px -->
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
</movable-area>
<view @tap="tap" class="uni-link uni-center uni-common-mt">
点击这里移动至 (30px, 30px)
</view>
<view class="uni-title uni-common-mt">
<text>movable-view区域大于movable-area</text>
</view>
<movable-area>
<!-- 通过css改大了movable-view,max样式宽高500px,movable-area高300px -->
<movable-view class="max" direction="all">text</movable-view>
</movable-area>
</view>
对应的<script></script>补充JS定义
<script>
export default {
data() {
return {
x: 0,
y: 0,
old: {
x: 0,
y: 0
}
}
},
methods: {
//定义tap移动到30，30位置
tap: function(e) {
this.x = this.old.x
this.y = this.old.y
this.$nextTick(function() {
this.x = 30
this.y = 30
})
},
//定义onChange事件移动滑块位置
onChange: function(e) {
this.old.x = e.detail.x
this.old.y = e.detail.y
}
}
}
</script>
在<style></style>补充CSS样式定义
<style>
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 150rpx;
width: 150rpx;
background-color: #007AFF;
color: #fff;
}
movable-area {
height: 300rpx;
width: 100%;
background-color: #D8D8D8;
overflow: hidden;
}
.max {
width:500rpx;
height: 500rpx;
}
</style>
5. cover-view覆盖文本视图和cover-image覆盖图片视图
cover-view是覆盖在原生组件上的文本视图
cover-image是覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
app-vue上可覆盖的原生组件：<video>、<map>
支持的事件：click
应用效果
先引入cover-view和vedio组件
示例代码：
cover-view 和cover-image放在video或者map标签内部就可以了
<!-- cover-view和cover-image，以及video示例 -->
<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false"
:show-center-play-btn="true"
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
poster="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b1476d40-4e5f-11eb-b997-9918a5dda011.png">
<cover-view class="controls-title">简单的自定义 controls</cover-view>
<cover-image class="controls-play img" @click="play" src="/static/play.png"></cover-image>
<cover-image class="controls-pause img" @click="pause" src="/static/pause.png"></cover-image>
</video>
对应的<script></script>补充JS定义
页面mounted时this.videoCtx = uni.createVideoContext(‘demoVideo’)加载视频
click触发play ->this.videoCtx.play(); 和pause->this.videoCtx.pause();
不过视频播放还是有点问题。
<script>
export default {
data() {
return {}
},
//页面加载时创建媒体对象videoCtx
mounted() {
this.videoCtx = uni.createVideoContext('demoVideo')
},
methods: {
play(event) {
this.videoCtx.play();
uni.showToast({
title: '开始播放',
icon: 'none'
});
},
pause(event) {
this.videoCtx.pause();
uni.showToast({
title: '暂停播放',
icon: 'none'
});
}
}
}
</script>
在<style></style>补充CSS样式定义
.video {
position: relative;
}
cover-view,
cover-image {
display: inline-block;
}
.img {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
margin-top: -50rpx;
}
.controls-play {
left: 50rpx;
}
.controls-pause {
right: 50rpx;
}
.controls-title {
width: 100%;
text-align: center;
color: #FFFFFF;
}
扫一扫
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
