AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

uni-app:基础组件 (下)

2024-10-16 8
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了多种前端组件及其用法，包括：label 组件用于表单元素的标签；picker 组件用于实现日期、时间及普通列表的选择器；textarea 组件用于输入多行文本，并可通过 v-model 双向绑定数据；process 组件用于显示进度条；swiper 组件用于轮播图展示；match-media 组件根据屏幕尺寸展示内容；audio 组件用于播放音频；switch 组件用于开关选择；scroll-view 组件实现滚动视图功能；以及 storage 的使用方法，如设置、获取和移除本地存储等。

引言

在当今前端开发中，组件化设计已成为构建高效、可维护应用的核心理念。本文将详细介绍多种前端组件及其应用，包括用于表单的 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

第一个为启动页

image.png

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,
})


文章标签：
前端开发
存储
UED
开发者
明弟有理想
目录
相关文章
绿水长流*z
|
2天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现，而持久性则依赖于事务日志中的`Redo Log`。在MySQL中，`Redo Log`确保已提交事务的数据能持久保存，即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改，待事务提交时写入磁盘。此外，`Redo Log`采用简单的物理日志格式和高效的顺序IO，确保快速提交。通过不同的落盘策略，可在性能和安全性之间做出权衡。
绿水长流*z
1517 4
弹性计算-百晓生
|
29天前
|
弹性计算 人工智能 架构师
阿里云携手Altair共拓云上工业仿真新机遇
2024年9月12日，「2024 Altair 技术大会杭州站」成功召开，阿里云弹性计算产品运营与生态负责人何川，与Altair中国技术总监赵阳在会上联合发布了最新的“云上CAE一体机”。
弹性计算-百晓生
82301 25
阿里云携手Altair共拓云上工业仿真新机遇
乘风直上
|
5天前
|
人工智能 Rust Java
10月更文挑战赛火热启动，坚持热爱坚持创作！
开发者社区10月更文挑战，寻找热爱技术内容创作的你，欢迎来创作！
乘风直上
492 19
绿水长流*z
|
2天前
|
存储 SQL 关系型数据库
彻底搞懂InnoDB的MVCC多版本并发控制
本文详细介绍了InnoDB存储引擎中的两种并发控制方法：MVCC（多版本并发控制）和LBCC（基于锁的并发控制）。MVCC通过记录版本信息和使用快照读取机制，实现了高并发下的读写操作，而LBCC则通过加锁机制控制并发访问。文章深入探讨了MVCC的工作原理，包括插入、删除、修改流程及查询过程中的快照读取机制。通过多个案例演示了不同隔离级别下MVCC的具体表现，并解释了事务ID的分配和管理方式。最后，对比了四种隔离级别的性能特点，帮助读者理解如何根据具体需求选择合适的隔离级别以优化数据库性能。
绿水长流*z
179 1
大模型服务小助手
|
8天前
|
JSON 自然语言处理 数据管理
阿里云百炼产品月刊【2024年9月】
阿里云百炼产品月刊【2024年9月】，涵盖本月产品和功能发布、活动，应用实践等内容，帮助您快速了解阿里云百炼产品的最新动态。
大模型服务小助手
330 6
阿里云百炼产品月刊【2024年9月】
Ganos全空间数据库
|
21天前
|
存储 关系型数据库 分布式数据库
GraphRAG：基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统，结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性，并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件，实现图数据和向量数据的统一存储与检索，提升了RAG系统的性能和效果。
Ganos全空间数据库
1529 117
爱吃龙利鱼
|
9天前
|
Linux 虚拟化 开发者
一键将CentOs的yum源更换为国内阿里yum源
一键将CentOs的yum源更换为国内阿里yum源
爱吃龙利鱼
448 5
瓴羊Dataphin
|
7天前
|
存储 人工智能 搜索推荐
数据治理，是时候打破刻板印象了
瓴羊智能数据建设与治理产品Datapin全面升级，可演进扩展的数据架构体系为企业数据治理预留发展空间，推出敏捷版用以解决企业数据量不大但需构建数据的场景问题，基于大模型打造的DataAgent更是为企业用好数据资产提供了便利。
瓴羊Dataphin
313 2
阿里云云原生
|
23天前
|
人工智能 IDE 程序员
期盼已久！通义灵码 AI 程序员开启邀测，全流程开发仅用几分钟
在云栖大会上，阿里云云原生应用平台负责人丁宇宣布，「通义灵码」完成全面升级，并正式发布 AI 程序员。
阿里云云原生
1255 3
BetterBench
|
25天前
|
机器学习/深度学习 算法 大数据
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析
2024“华为杯”数学建模竞赛，对ABCDEF每个题进行详细的分析，涵盖风电场功率优化、WLAN网络吞吐量、磁性元件损耗建模、地理环境问题、高速公路应急车道启用和X射线脉冲星建模等多领域问题，解析了问题类型、专业和技能的需要。
BetterBench
2608 22
【BetterBench博士】2024 “华为杯”第二十一届中国研究生数学建模竞赛 选题分析