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

uni-app:基础组件 (下)

2024-10-16 15
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了多种前端组件及其用法，包括：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
开发者
关键词：
APP组件
明弟有理想
目录
相关文章
2019ab
|
5月前
uni-app 4.13开发弹出层组件（二）弹出关闭功能
uni-app 4.13开发弹出层组件（二）弹出关闭功能
2019ab
118 0
2019ab
|
5月前
uni-app 4.9封装badge组件
uni-app 4.9封装badge组件
2019ab
78 0
2019ab
|
5月前
uni-app 4.7封装头像组件
uni-app 4.7封装头像组件
2019ab
63 0
2019ab
|
5月前
uni-app 4.5开发聊天列表组件（一）
uni-app 4.5开发聊天列表组件（一）
2019ab
69 0
2019ab
|
5月前
uni-app 4.4封装头部导航组件（二）
uni-app 4.4封装头部导航组件（二）
2019ab
50 0
diygwcom
|
23小时前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
diygwcom
8 1
明弟有理想
|
2天前
|
存储 前端开发 JavaScript
uni-app:基础组件 (上)
本文介绍了uni-app中多个组件的使用方法，包括存储操作、图标展示、按钮样式、表单输入、导航跳转和输入框控制等。通过具体代码示例展示了如何设置存储键值、使用不同类型的按钮、实现表单提交与重置功能、控制输入框的显示与清除等功能。
明弟有理想
12 0
你真的不认识我了
|
1月前
|
移动开发 小程序 前端开发
uni-app组件样式修改不生效
uni-app组件样式修改不生效
你真的不认识我了
116 2
路边两盏灯
|
2月前
|
XML 数据格式
【Azure Logic App】在Logic App中使用 Transfer XML组件遇见错误 undefined
【Azure Logic App】在Logic App中使用 Transfer XML组件遇见错误 undefined
路边两盏灯
11 1
花开富贵111
|
3月前
|
存储 前端开发
useEffect问题之在子组件的副作用中更新父组件的状态如何解决
useEffect问题之在子组件的副作用中更新父组件的状态如何解决
花开富贵111
52 4

热门文章

最新文章

  • 1
    【83行代码获奖代码】高中生@青藤木子 耗费一周给妈妈编写了一款语音识别APP
  • 2
    Uni-App - 内网穿透、跨域配置
  • 3
    iOS开发之App间账号共享与SDK封装
  • 4
    (翻译)Mozilla OS APP开发：Manifest常见问题
  • 5
    无线APP日志上报优化实践
  • 6
    Hybrid App开发之jQuery选择器
  • 7
    拨号输入代码，显示手机使用APP情况
  • 8
    深入理解 uni-app 页面生命周期（一）：onLoad vs onShow
  • 9
    02uni-app v-for循环列表 v-if的使用
  • 10
    itunes Connect 未能创建 App 图标
  • 1
    app应用程序进程启动过程
    49
  • 2
    【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
    96
  • 3
    【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
    140
  • 4
    浅蓝色的APP下载界面HMTL源码
    68
  • 5
    【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
    416
  • 6
    【专栏】从网页轻松转换为应用越来越便捷
    155
  • 7
    Serverless 应用引擎操作报错合集之阿里函数计算中出现'python app.py'的错误如何解决
    71
  • 8
    Java智慧工地云平台源码带APP SaaS模式 支持私有化部署和云部署
    117
  • 9
    [AI 阿里 EMO] 集成进通义千问app，全民演唱，人人可用！
    520
  • 10
    react-app框架——使用monaco editor实现online编辑html代码编辑器
    255

    • 相关课程

    更多
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考

    • 相关实验场景

    更多
  • 星轨-钉钉APP分发实训
    • 下一篇
    阿里云无影AI云电脑亮相 体验大幅升级