uni-app的组件(二)

这篇具有很好参考价值的文章主要介绍了uni-app的组件(二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

多项选择器checkbox-group

多项选择器,内部由多个 checkbox 组成。

		<checkbox-group>
			<checkbox checked color="red" value="1"></checkbox> 篮球
			<!-- disabled:是否禁用 -->
			<checkbox disabled color="rgba(0,0,0,0.5)" value="2"></checkbox> 足球
			<checkbox color="rgb(0,0,0)" value="3"></checkbox> 排球
		</checkbox-group>

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名 类型 默认值 说明
checked Boolean false 当前是否选中,可用来设置默认选中
disabled Boolean false 是否禁用
color color checkbox的颜色,同css的color

效果图展示

uni-app的组件(二),uni-app,uni-app,vue.js,前端

单行输入框input

		<input type="text" placeholder="给个提示">
		<input type="text" v-model="msg">
		<input type="text" :value="msg">
		<!-- password:密码格式 maxlength:设置最大数 -->
		<input type="text" password value="123456" maxlength="6">

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名 类型 默认值 说明
value String 输入框的初始内容
placeholder String 输入框为空时占位符
type String text input 的类型 [有效值]
v-model String 数据绑定
:value String 数据绑定
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
password Boolean false 是否是密码类型

效果图展示

uni-app的组件(二),uni-app,uni-app,vue.js,前端

单项选择器radio-group

单项选择器,内部由多个 radio 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。

		<radio-group @change="handlechange">
			<radio value="1" disabled ></radio>篮球
			<radio value="2" checked color="red"></radio>足球
			<radio value="3"></radio>乒乓球
			<radio value="4"></radio>排球
		</radio-group>

属性说明(查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名 类型 默认值 说明
value String radio 标识。当该 radio 选中时,radio 的 change 事件会携带 radio 的 value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中

效果图展示

uni-app的组件(二),uni-app,uni-app,vue.js,前端

滑动条slider

滑动选择器

		<view >
			<view>{{slidervalue}}</view>
			<slider @changing="sliderChange" min="0" max="100" value="0" step="1"/>
		</view>

属性说明(查看更多属性请查看官网 [| uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)

属性名 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
value Number 0 当前取值
step Number 1 步长,取值必须大于 0,并且可被(max - min)整除

效果图展示(设置滑动条 @change:不是实时改变的 @changing:滑动条的位置实时改变)

uni-app的组件(二),uni-app,uni-app,vue.js,前端

滚动选择器picker-view

嵌入页面的滚动选择器。

相对于picker组件,picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时,往往需要使用picker-view

		<view>
			<view class="uni-padding-wrap">
				<view class="uni-title">日期:{{year}}年{{month}}月{{day}}日</view>
			</view>
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>

属性说明(查看更多请查看官网picker-view | uni-app官网 (dcloud.net.cn) )

属性名 类型 默认值
value Array<Number> 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String 设置选择器中间选中框的样式

script部分

<script>
    export default {
        data: function () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
            }
        }
    }
</script>

uni-app的组件(二),uni-app,uni-app,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-800322.html

到了这里,关于uni-app的组件(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue uni-app多图片上传组件,支持单个文件,多个文件上传 步骤条step使用

    快速实现多图片上传组件,支持单个文件,多个文件上传 步骤条step使用; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法   使用方法 HTML代码部分   html JS代码 (引入组件 填充数据)   javascript

    2024年02月08日
    浏览(86)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(91)
  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(69)
  • 前端Vue uni-app App/小程序/H5 通用tree树形结构图

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(46)
  • uni-app 前端项目(vue)部署到本地win系统Nginx上 http

     背景: 若依移动端的项目:整合了uview开源ui框架 部署流程 1. 配置后端请求接口基本路径地址: 2. 打包复制到nginx下:nginx/htm/newxss, (newxss目录手动创建) 3.在nginx上配置了站点与api代理  Nginx配置 安装个稳定版本的:nginx-1.24.0 部署配置: 1.增加了网站: 8083端口 的, 网站

    2024年04月12日
    浏览(43)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能,用户可以通过文本输

    2024年02月12日
    浏览(58)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(65)
  • uni-app使用vue3,在元素或组件实例上添加ref,用this.$refs显示undefined

    项目中引用了一个UI组件库,在表单上添加了`ref`属性,方便提交时验证。触发提交方法时显示不存在这个方法或this.$refs为undefined。 解决方法: 引入`getCurrentInstance`,t得到当前组件实例,然后用`ctx.$refs`代替`this.$refs`。这里的`ctx`相当于全局this。 ------------------ 2023/10/27更新-

    2024年02月07日
    浏览(49)
  • 前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月05日
    浏览(74)
  • uni-app表单组件

    common-form.vue actionList.vue comImage.vue number.vue

    2024年02月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包