引言
在当今前端开发中，组件化设计已成为构建高效、可维护应用的核心理念。本文将详细介绍多种前端组件及其应用，包括用于表单的 label 组件、灵活选择的 picker 组件、支持多行文本输入的 textarea 组件、进度展示的 process 组件，以及用于轮播图展示的 swiper 组件等。此外，我们还将探讨 match-media 组件在响应式设计中的角色、audio 组件的音频播放功能、switch 组件的开关选择、scroll-view 组件的滚动视图实现，以及 storage 的本地存储操作。这些组件的合理运用将大大提升用户体验和应用的整体性能，无论您是初学者还是经验丰富的开发者，都能从中获得启发与实用指导。
label
<view class="uni-form-item uni-column"> <view class="title">label用for标识表单组件</view> <radio-group class="uni-list" @change="radioChange"> <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index"> <view> <radio :id="item.name" :value="item.name" :checked="item.checked"></radio> </view> <view> <label class="label-2-text" :for="item.name"> <text>{{item.value}}</text> </label> </view> </label> </radio-group> </view>
radioChange: function(e) { var checked = e.target.value var changed = {} for (var i = 0; i < this.radioItems.length; i++) { if (checked.indexOf(this.radioItems[i].name) !== -1) { changed['radioItems[' + i + '].checked'] = true } else { changed['radioItems[' + i + '].checked'] = false } } }
picker
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <template> <view> <view class="uni-title uni-common-pl">地区选择器</view> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left"> 当前选择 </view> <view class="uni-list-cell-db"> <picker @change="bindPickerChange" :value="index" :range="array"> <view class="uni-input">{{array[index]}}</view> </picker> </view> </view> </view> <view class="uni-title uni-common-pl">时间选择器</view> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left"> 当前选择 </view> <view class="uni-list-cell-db"> <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange"> <view class="uni-input">{{time}}</view> </picker> </view> </view> </view> <view class="uni-title uni-common-pl">日期选择器</view> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-list-cell-left"> 当前选择 </view> <view class="uni-list-cell-db"> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> <view class="uni-input">{{date}}</view> </picker> </view> </view> </view> </view> </template>
<script> export default { data() { const currentDate = this.getDate({ format: true }) return { title: 'picker', array: ['中国', '美国', '巴西', '日本'], index: 0, date: currentDate, time: '12:01' } }, computed: { startDate() { return this.getDate('start'); }, endDate() { return this.getDate('end'); } }, methods: { bindPickerChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.index = e.detail.value }, bindDateChange: function(e) { this.date = e.detail.value }, bindTimeChange: function(e) { this.time = e.detail.value }, getDate(type) { const date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (type === 'start') { year = year - 60; } else if (type === 'end') { year = year + 2; } month = month > 9 ? month : '0' + month; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } } } </script>
textarea
<textarea @blur="bindTextAreaBlur" auto-height />
placeholder-style="color:#F76260"
textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 @submit。
<textarea class="textarea" v-model="txt"></textarea>
watch: { txt(txt) { if( txt.indexOf('\n') != -1 ){ //敲了回车键了 uni.hideKeyboard() //收起软键盘 } } },
process
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 --> <template> <view> <view class="uni-padding-wrap uni-common-mt"> <view class="content"> <progress class="con-pro" :percent="percentVal" show-info stroke-width="8"/> </view> <view class="progress-control"> <button type="primary" @click="setProgress">设置进度</button> <button type="warn" @click="clearProgress">清除进度</button> </view> </view> </view> </template> <script> export default { data() { return { percentVal:0 } }, methods: { setProgress() { let max= 100; let min=0; let timer= setInterval(()=>{ min+=1; this.percentVal=min if(min==max){ clearInterval(timer) uni.showToast({ title: '加载成功', duration: 2000 }); } },10) }, clearProgress() { this.percentVal =0 } }, } </script>
swiper
<swiper class="swiper" style="width: 100%;" autoplay duration="200" interval="3000"> <swiper-item class="item"> <image src="../../assets/img/swiper1.png"></image> </swiper-item> <swiper-item class="item"> <image src="../../assets/img/swiper2.jpg"></image> </swiper-item> <swiper-item class="item"> <image src="../../assets/img/swiper3.jpg"></image> </swiper-item> </swiper>
match-media
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
<template> <view> <match-media :min-width="375" :max-width="800" > <!-- 在这个区域显示 否则不显示 --> <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view> </match-media> <match-media :min-height="400"> <!-- 当高度小于400 不显示 --> <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view> </match-media> </view> </template>
audio
```Plain Text <template> <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> </template> <script> export default { data() { return { current: { poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png', name: '致爱丽丝', author: '暂无', src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3', }, audioAction: { method: 'pause' } } } } </script> ```
switch
```Plain Text <view> <switch :checked = "isCheck" @change="switch1Change" /> <switch :checked = "!isCheck" @change="switch2Change" /> </view> 改变大小 <switch checked color="#FFCC33" style="transform:scale(0.7)"/> switch1Change: function (e) { console.log('switch1', e.detail.value) }, switch2Change: function (e) { console.log('switch2', e.detail.value) } ```
match-media
类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。
<template> <view> <match-media :min-width="375" :max-width="800" > <!-- 在这个区域显示 否则不显示 --> <view>当页面最小宽度 375px， 页面宽度最大 800px 时显示</view> </match-media> <match-media :min-height="400"> <!-- 当高度小于400 不显示 --> <view>当页面高度不小于 400px 且屏幕方向为横向时展示这里</view> </match-media> </view> </template>
audio
<template> <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> </template> <script> export default { data() { return { current: { poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png', name: '致爱丽丝', author: '暂无', src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3', }, audioAction: { method: 'pause' } } } } </script>
package.json
第一个为启动页
scroll-view
<scroll-view scroll-x scroll-y> </scroll-view>
<template> <scroll-view class="scroll" scroll-x scroll-y> <view class="group"> <view class="item"> 111 </view> <view class="item"> 222 </view> <view class="item"> 333 </view> <view class="item"> 444 </view> </view> </scroll-view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { } } </script> <style lang="scss"> .scroll{ margin-top: 10rpx; height: 150rpx; border: 1px solid black; box-sizing: border-box; .group{ white-space: nowrap; .item{ margin-left: 10rpx; width: 200rpx; background-color: blue; height: 200rpx; display: inline-block; } } } </style>
<view style="display: flex;justify-content: center;align-items: center;"> 登录 <text style="margin: 0 10px;height: 14px;border-left: 1px solid black;"></text> 注册 </view>
storage
promise
// 这样用才行 uni.setStorage({ key:countdownKey, data:"hello" }); let a= uni.getStorage({ key:"test01", success:function (res){ console.log(res) } }) uni.removeStorage({ key:countdownKey, })
