uniapp学习二

2023-03-24 00:11| 来源: 网络整理| 查看: 265

view 基本容器

scroll-view 滑动组件

swiper 轮播图组件

match-media

类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。

当页面最小宽度 375px，页面宽度最大 800px 时显示当页面高度不小于 400px 且屏幕方向为横向时展示这里 movable-area 和 movable-view text cover-view 覆盖在原生组件上的文本视图简单的自定义 controls

rich-text

富文本

表单 +{{countryCode}} {tip}} --> 信息提交后，会有专员与您联系，帮助您更加顺利的完成加盟立即提交 formSubmit() { if (!this.hasLogin) { this.showLoginDialog = true; return } if (this.brandgrade == 1 || this.brandgrade == 2) { this.showbtipsdialog = true; return } const formData = this.submitdata; const rule = [ { name: "username", checkType: "string", checkRule: "0,20", errorMsg: "请输入姓名" }, { name: "jointype", checkType: "string", checkRule: "0,20", errorMsg: "请选择加盟类型" }, { name: "joincity", checkType: "string", checkRule: "0,20", errorMsg: "请选择代理城市" }, ] let checkRes = graceChecker.check(formData, rule); if(!checkRes) { this.$msg.toast(graceChecker.error); return; } let obj = { brandId: this.brandsId, joinUserName: this.submitdata.username, joinUserPhone: this.submitdata.usertel, city: this.submitdata.joincity, joinType: this.joinid, } submitjoin(obj).then(res => { uni.redirectTo({ url: '/pages/join/success' }); }) },

picker弹出框

picker-view

slider 滑块； switch 开关选择器； textarea 多行输入框

navigator

页面跳转

跳转tab页面媒体组件

animation-view，audio，camera，image，video，live-player，live-pusher

地图组件 canvas 画布 web-view

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

uniCloud客户端sdk

uniCloud分为客户端和云端两部分，有些接口名称相同，参数也相近，在此列举客户端sdk内可以使用的接口/属性，避免混淆

#API

uniCloud.importObject() 获取云对象引用以调用云对象接口详情

扩展组件

数字角标，面包屑、日历、卡片、折叠面板、组合框、倒计时、数据选择器、级联选择器、下拉框、日期格式化、日期选择器、抽屉、

增强输入框、 easyinput 组件是对原生input组件的增强，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input所有功能输入内容：{{ '"'+value+'"' }} 悬浮按钮uni-fab

uni-file-picker ：文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

表单

#对齐方式

label-position="top"

商品导航

客服，店铺、购物车、立即购买、加入购物车、立即购买

九宫格

滑动视图

分组、图标、索引列表、超链接、列表

刚刚

加载更多

自定义导航栏

通告栏、数字输入框、分页器、评分、

弹出层打开弹窗 Popup 关闭 export default { data() { return {} }, onReady() {}, methods: { open() { this.$refs.popup.open('top') }, close() { this.$refs.popup.close() } } }

【本文地址】

uniapp学习二

uniapp学习二

今日新闻

推荐新闻