-
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
按照官网教程学习使用组件，并且重点把容器组件的应用进行了练习。
1.官网关于组件的介绍
组件是视图层的基本组成单元,是一个单独且可复用的功能模块的封装。
开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。
注意：所有组件与属性名都是小写，单词之间以连字符-连接。
下面的示例是button按钮组件，有size，disabled，hover-start-time等多个属性，标签中是文本<template> <view> <button size="mini" :disabled="false" hover-start-time=20 >按钮button> view> template>- 1
- 2
- 3
- 4
- 5
所有的组件都具有以下公共属性，但每个组件也都有自己的专有属性。
组件使用前,需要将对应的组件复制到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}，纵向横向通用
应用效果
<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">Aview> <view id="demo2" class="scroll-view-item uni-bg-green">Bview> <view id="demo3" class="scroll-view-item uni-bg-blue">Cview> scroll-view> view> <view @tap="goTop" class="uni-link uni-center uni-common-mt"> <text>点击这里返回顶部text> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
<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">Aview> <view id="demo2" class="scroll-view-item_H uni-bg-green">Bview> <view id="demo3" class="scroll-view-item_H uni-bg-blue">Cview> scroll-view> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
对应的
补充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" }) } }- 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
在
补充CSS样式定义
使用竖向滚动时，需要给
使用横向滚动时，需要给.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; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
2. swiper 滑块视图容器
一般用于左右滑动或上下滑动，swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
应用效果
swiper的属性设置中，circular是否采用衔接滑动,默认为false；indicator-dots是否显示面板指示点，
autoplay为是否自动切换，默认为false；interval为自动切换时间间隔，默认5000ms；
duration为滑动动画时长，默认500ms。
当然这些可以用JS改变，属性current为当前位置，current改变触发@change事件
<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">AAAview> swiper-item> <swiper-item> <view class="swiper-item uni-bg-green">BBBview> swiper-item> <swiper-item> <view class="swiper-item uni-bg-blue">CCCview> swiper-item> swiper> view> <view class="swiper-list"> <view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell-db">指示点view> <switch :checked="indicatorDots" @change="changeIndicatorDots" /> view> <view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell-db">自动播放view> <switch :checked="autoplay" @change="changeAutoplay" /> view> view> <view class="uni-padding-wrap"> <view class="uni-common-mt"> <text>幻灯片切换时长(ms)text> <text class="info">{{duration}}text> view> <slider @change="durationChange" :value="duration" min="500" max="2000" /> <view class="uni-common-mt"> <text>自动播放间隔时长(ms)text> <text class="info">{{interval}}text> view> <slider @change="intervalChange" :value="interval" min="2000" max="10000" /> view>- 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
对应的
补充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 } }- 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
在
补充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; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
4. movable-area可拖动区域和movable-view可移动的视图容器
movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。
即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。
当然也可以不拖动，而使用代码来触发movable-view在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-areatext> view> <movable-area> <movable-view :x="x" :y="y" direction="all" @change="onChange">textmovable-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-areatext> view> <movable-area> <movable-view class="max" direction="all">textmovable-view> movable-area> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
对应的
补充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>- 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
在
补充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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
5. cover-view覆盖文本视图和cover-image覆盖图片视图
cover-view是覆盖在原生组件上的文本视图
cover-image是覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
app-vue上可覆盖的原生组件：
支持的事件：click
应用效果
先引入cover-view和vedio组件
示例代码：
cover-view 和cover-image放在video或者map标签内部就可以了<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">简单的自定义 controlscover-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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
对应的
补充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>- 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
在
补充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; }- 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
-
相关阅读:
基于微前端qiankun的多页签缓存方案实践
两化融合企业申报奖励制度
分布式定时任务调度xxl-job
滑动窗口题目总结(持续更新中)
使用 MySQL 命令备份，恢复数据库
1-前端基本知识-HTML
SSM+MySQL+JSP教务管理系统设计与实现（附源码下载地址）
Mybatis多表查询
速度精度双SOTA! TPAMI2022最新车道线检测算法（Ultra-Fast-Lane-Detection-V2）
如何做bug分析 ？bug分析什么 ？ 为什么要做bug分析 ？
- 原文地址：https://blog.csdn.net/qq_43662503/article/details/127453848
