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

uni-app:基础组件 (上)

2024-10-16 12
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了uni-app中多个组件的使用方法，包括存储操作、图标展示、按钮样式、表单输入、导航跳转和输入框控制等。通过具体代码示例展示了如何设置存储键值、使用不同类型的按钮、实现表单提交与重置功能、控制输入框的显示与清除等功能。

引言

在现代应用开发中，跨平台解决方案越来越受到欢迎，uni-app 正是这样一个强大的框架。它能够帮助开发者快速构建高效的移动应用。本文将深入探讨 uni-app 中的多个常用组件，包括数据存储、图标展示、按钮样式、表单输入、导航跳转和输入框控制等。通过具体的代码示例，我们将逐步展示如何利用这些组件提升应用的用户体验和功能性。无论您是新手还是有经验的开发者，这篇文章都将为您提供实用的技巧和深入的理解。

storage

```Plain Text

<script setup>
  const setData = () => {
    uni.setStorage({
      key: 'storage_key',
      data: 'hello',
      success: function() {
        console.log('success');
      }
    });
  }
  const getData = () => {
    const a = uni.getStorage({
      key: 'storage_key',
      success(res) {
        console.log(res.data)
      }
    })
  }
</script>
```

icon

<icon type="success"></icon>

image.png 

<!-- 本示例未包含完整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:10,
      }
    },
    methods: {
      setProgress() {
        let num  = Math.ceil(Math.random())*10
        this.percentVal +=num
      },
      clearProgress() {
        this.percentVal =0
      }

    },
  }
</script>

<template>
  <view class="page">
    <view class="item" v-for="(value,index) in iconType" :key="index">
      <icon :type="value" size="26"></icon>
      <text>{{value}}</text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search',
          'clear'
        ],
        
      }
    }
  }
</script>

button

<template>
    <view class="page">
        <button class="my_btn" size="default" type="default" hover-class="is-hover">
            click me
        </button>
    </view>
</template>
<style scoped>
        .my_btn {
        color: red;
        backgroundColor: #1AAD19;
        borderColor: #1AAD19;
    }
    .is-hover {
        color: rgba(255, 255, 255, 0.6);
        background-color: #179b16;
        border-color: #179b16;
    }
</style>


navigate

几个跳转的区别
uni.navigateTo()
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。

uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。

uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

uni.switchTab专门用于跳转到 tabBar 页面，并且可以刷新到最新的状态 
。
uni.navigateTo({
  url: 'B?id=1'
});

checked

<template>
  <view>
    <view class="uni-list">
      <checkbox-group @change="checkboxChange">
        <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
          <view>
            <checkbox :value="item.value" :checked="item.checked" />
          </view>
          <view>{{item.name}}</view>
        </label>
      </checkbox-group>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'checkbox 复选框',
        items: [{
            value: 'USA',
            name: '美国'
          },
          {
            value: 'CHN',
            name: '中国',
            checked: 'true'
          },
          {
            value: 'BRA',
            name: '巴西'
          },
          {
            value: 'JPN',
            name: '日本'
          },
          {
            value: 'ENG',
            name: '英国'
          },
          {
            value: 'FRA',
            name: '法国'
          }
        ]
      }
    },
    methods: {
      checkboxChange: function(e) {
        var items = this.items,
          values = e.detail.value;
        for (var i = 0, lenI = items.length; i < lenI; ++i) {
          const item = items[i]
          if (values.includes(item.value)) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
        }
      }
    }
  }
</script>
<style scoped>
  .uni-list-cell {
    display: flex;
    justify-content: flex-start
  }
</style>

css

创建一个css 文件
.my_color{
    color: #d55617;
}
引入
<style scoped>
@import 'test.css'
</style>
使用 
<template>
<view>
    <text class="my_color">hello,world</text>
</view>
</template>


form

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view>
      <form @submit="formSubmit" @reset="formReset">
        <view class="uni-form-item uni-column">
          <view class="title">switch</view>
          <view>
            <switch name="switch" />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">radio</view>
          <radio-group name="radio">
            <label>
              <radio value="radio1" /><text>选项一</text>
            </label>
            <label>
              <radio value="radio2" /><text>选项二</text>
            </label>
          </radio-group>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">checkbox</view>
          <checkbox-group name="checkbox">
            <label>
              <checkbox value="checkbox1" /><text>选项一</text>
            </label>
            <label>
              <checkbox value="checkbox2" /><text>选项二</text>
            </label>
          </checkbox-group>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">slider</view>
          <slider value="50" name="slider" show-value></slider>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">input</view>
          <input class="uni-input" name="input" placeholder="这是一个输入框" />
        </view>
        <view class="uni-btn-v">
          <button form-type="submit">Submit</button>
          <button type="default" form-type="reset">Reset</button>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      formSubmit: function(e) {
        console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
        var formdata = e.detail.value
        uni.showModal({
          content: '表单数据内容：' + JSON.stringify(formdata),
          showCancel: false
        });
      },
      formReset: function(e) {
        console.log('清空数据')
      }
    }
  }
</script>
<style>
  .uni-form-item .title {
    padding: 20rpx 0;
  }
</style>

input

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view class="uni-common-mt">
      <view class="uni-form-item uni-column">
        <view class="title">可自动聚焦的input</view>
        <input class="uni-input" focus placeholder="自动获得焦点" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">键盘右下角按钮显示为搜索</view>
        <input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制最大输入长度的input</view>
        <input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">实时获取输入值：{{inputValue}}</view>
        <input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制输入的input</view>
        <input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
      </view>
      <!-- #ifndef MP-BAIDU -->
      <view class="uni-form-item uni-column">
        <view class="title">控制键盘的input</view>
        <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
      </view>
      <!-- #endif -->
      <view class="uni-form-item uni-column">
        <view class="title">数字输入的input</view>
        <input class="uni-input" type="number" placeholder="这是一个数字输入框" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">密码输入的input</view>
        <input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">带小数点的input</view>
        <input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">身份证输入的input</view>
        <input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">控制占位符颜色的input</view>
        <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
        <view class="uni-input-wrapper">
          <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
          <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
        <view class="uni-input-wrapper">
          <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
          <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword">&#xe568;</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        title: 'input',
        focus: false,
        inputValue: '',
        showClearIcon: false,
        inputClearValue: '',
        changeValue: '',
        showPassword: true
      }
    },
    methods: {
      onKeyInput: function(event) {
        this.inputValue = event.target.value
      },
      replaceInput: function(event) {
        var value = event.target.value;
        if (value === '11') {
          this.changeValue = '2';
        }
      },
      hideKeyboard: function(event) {
        if (event.target.value === '123') {
          uni.hideKeyboard();
        }
      },
      clearInput: function(event) {
        this.inputClearValue = event.detail.value;
        if (event.detail.value.length > 0) {
          this.showClearIcon = true;
        } else {
          this.showClearIcon = false;
        }
      },
      clearIcon: function() {
        this.inputClearValue = '';
        this.showClearIcon = false;
      },
      changePassword: function() {
        this.showPassword = !this.showPassword;
      }
    }
  }
</script>

属性

focus  自动 聚焦
confirm-type="search"  为搜索 
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />

  <view class="uni-form-item uni-column">
        <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
        <view class="uni-input-wrapper">
          <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
          <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
            @click="changePassword">&#xe568;</text>
        </view>
      </view>
    </view>

js

js
   onKeyInput: function(event) {
            this.inputValue = event.target.value
        },

       hideKeyboard: function(event) {
            if (event.target.value === '123') {
                uni.hideKeyboard();
            }
        },
      clearInput: function(event) {
            this.inputClearValue = event.detail.value;
            if (event.detail.value.length > 0) {
                this.showClearIcon = true;
            } else {
                this.showClearIcon = false;
            }
        },

     changePassword: function() {
            this.showPassword = !this.showPassword;
        }


文章标签：
存储
开发者
JavaScript
前端开发
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天前
|
存储 前端开发 UED
uni-app:基础组件 (下)
本文介绍了多种前端组件及其用法，包括：label 组件用于表单元素的标签；picker 组件用于实现日期、时间及普通列表的选择器；textarea 组件用于输入多行文本，并可通过 v-model 双向绑定数据；process 组件用于显示进度条；swiper 组件用于轮播图展示；match-media 组件根据屏幕尺寸展示内容；audio 组件用于播放音频；switch 组件用于开关选择；scroll-view 组件实现滚动视图功能；以及 storage 的使用方法，如设置、获取和移除本地存储等。
明弟有理想
15 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云电脑亮相 体验大幅升级