uni-app常用组件

2023/11/21 技术

# token的安全认证

Vue.prototype.header=function(){
	return {
		Authorization:uni.getStorageSync("token")
	}
}
1
2
3
4
5

# 1.标题

`<uni-title title="新闻专栏" type="h2" style="margin-left: 10rpx;"></uni-title>`
1

# 2.可滚动视图

`<scroll-view scroll-x="true"style="height: 300px;"></scroll-view>`
1

可以修改x和y轴

# 3.作用于不同视图的显示

 <scroll-view scroll-x="true">
       <uni-segmented-control @clickItem="sx" :values="values" :current="current" styleType="text"></uni-segmented-control>
  </scroll-view>
1
2
3
属性名 类型 默认值 说明
current Number 0 当前选中的tab索引值, 从0开始计数
styleType String button 分段器样式类型,可选值:button(按钮类型),text(文字类型)
activeColor String #007aff 选中的标签背景色与边框颜色
values Array - 选项数组
   current: 0,
   values: []
1
2

# @clickItem 组件点击事件触发

   sx (value) {
           this.News = this.valueNews.filter(item => {
            return item.type ===  this.newValues[value.currentIndex].id
           })
      },
1
2
3
4
5

# 4.搜索栏组件,通常用于搜索商品、文章等

 <uni-search-bar placeholder="搜些什么?" @confirm="confirm()" v-model="value"></uni-search-bar>
1
属性名 类型 默认值 说明
value/v-model StringNumber 搜索栏绑定值
placeholder String 搜索 搜索栏Placeholder
radius Number 10 搜索栏圆角,单位px
clearButton String auto 是否显示清除按钮,可选值always-一直显示、auto-输入框不为空时显示、none-一直不显示
cancelButton String auto 是否显示取消按钮,可选值always-一直显示、auto-输入框不为空时显示、none-一直不显示
cancelText String 取消 取消按钮的文字
bgColor String #F8F8F8 输入框背景颜色
maxlength Number 100 输入最大长度
focus Boolean false
事件称名 说明 返回参数
@confirm uniSearchBar 的输入框 confirm 事件,返回参数为uniSearchBar的value e={value:Number}
@input uniSearchBar 的 value 改变时触发事件,返回参数为uniSearchBar的value e=value
@cancel 点击取消按钮时触发事件,返回参数为uniSearchBar的value e={value:Number}
@clear 点击清除按钮时触发事件,返回参数为uniSearchBar的value e={value:Number}
@focus input 获取焦点时触发事件,返回参数为uniSearchBar的value e={value:Number}
@blur input 失去焦点时触发事件,返回参数为uniSearchBar的value e={value:Number}

# 5.宫格组件

<uni-grid :column="4" :showBorder="false">
         <uni-grid-item style="text-align: center; width: 174rpx; height: 180rpx; display: flex; justify-content: center;" v-for="item in rightAll" >
           <view class="" @click="goToxi(item)"  style="text-align: center;">
               <image :src= "ip() + item.imgUrl" style="width: 90rpx; height: 90rpx;margin-top: 20rpx;" mode=""></image>
           </view> 
           <text style="font-size: 20rpx;">{{item.serviceName}}</text>
         </uni-grid-item>
 </uni-grid>
1
2
3
4
5
6
7
8
属性名 类型 默认值 说明
column Number 3 每列显示个数
borderColor String #d0dee5 边框颜色
showBorder Boolean true 是否显示边框
square Boolean true 是否方形显示
highlight Boolean true 点击背景是否高亮
事件名 说明 返回值
@change 点击 grid 触发 e={detail:{index:0}},index 为当前点击 grid下标
属性名 类型 默认值 说明
index Number - 子组件的唯一标识 ,点击grid会返回当前的标识

# 6.弹出层组件

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
	</view>
</template>
<script>
export default {
   methods:{
      open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }
   }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
属性名 类型 默认值 说明
animation Boolean true 是否开启动画
type String 'center' 弹出方式
mask-click [即将废弃] Boolean true 蒙版点击是否关闭弹窗
is-mask-click [1.7.4新增] Boolean true 蒙版点击是否关闭弹窗
mask-background-color [1.7.4新增] rgba rgba(0,0,0,0.4) 蒙版颜色,建议使用 rgba 颜色值
background-color String 'none' 主窗口背景色
safe-area Boolean true 是否适配底部安全区
属性名 说明
top 顶部弹出
center 居中弹出
bottom 底部弹出
left 左侧弹出
right 右侧弹出
message 预置样式 :消息提示
dialog 预置样式 :对话框
share 预置样式 :底部弹出分享示例方法称名
方法称名 说明 参数
open 打开弹出层 open(String:type) ,如果参数可代替 type 属性
close 关闭弹出层 -
事件称名 说明 返回值
change 组件状态发生变化触发 e={show: true|false,type:当前模式}
maskClick 点击遮罩层触发 -

# 7.流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。

<uni-row>
         <uni-col :span="12" v-for="(item,index) in Hot">
           <view style="margin: 20rpx;"  @click="goToTails(item)">
             <image style="width:100%; height: 260rpx; border-radius: 20rpx;" :src="ip() + item.cover" mode=""></image>
             <text v-html="item.title.slice(0, 20) + '...'"></text>
           </view>
           <text></text>
         </uni-col>
 </uni-row>
1
2
3
4
5
6
7
8
9
属性名 类型 可选值 默认值 必填 说明
span Number - 24 栅格占据的列数
offset Number - - 栅格左侧间隔格数
push Number - - 栅格向右偏移格数
pull Number - - 栅格向左偏移格数
xs Number/object - - 屏幕宽度<768px时,要显示的栅格规则,如::xs="8":xs="{span: 8, pull: 4}"
sm Number/object - - 屏幕宽度≥768px时,要显示的栅格规则
md Number/object - - 屏幕宽度≥992px时,要显示的栅格规则
lg Number/object - - 屏幕宽度≥1200px时,要显示的栅格规则
xl Number/object - - 屏幕宽度≥1920px时,要显示的栅格规则

# 8.uni-forms

<uni-forms-item label="新密码" required>
      <uni-easyinput v-model="newPassword" placeholder="请输入新密码" ></uni-easyinput>
    </uni-forms-item>
1
2
3
属性名 类型 默认值 可选值 说明 兼容说明
model Object - - 表单数据 1.4.0 新增
rules Object - - 表单校验规则
validateTrigger String submit bind/submit/blur 表单校验时机,blur仅在 uni-easyinput 中生效 1.4.0 新增 blur 值
label-position String left top/left label 位置
label-width String/Number 75 - label 宽度,单位 px
label-align String left left/center/right label 居中方式
err-show-type String undertext undertext/toast/modal 表单错误信息提示方式
border Boolean false - 是否显示分格线
value Object - - 表单数据,兼容vue2 即将弃用,请使用 model 代替
modelValue Object - - 表单数据,兼容vue3 即将弃用,请使用 model 代替

# 9.uni-card 卡片组件

# 1.双标题卡片

<uni-section title="双标题卡片" type="line" >
			<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
				<text class="uni-body">这是一个带头像和双标题的基础卡片,此示例展示了一个完整的卡片。</text>
			</uni-card>
</uni-section>
1
2
3
4
5

![双卡片组件](C:\Users\LIWei\Pictures\Camera Roll\双卡片组件.png)

# 2.实例

<template>
  <view>
    <uni-card :title="rows.orderTypeName" :extra="rows.amount">
       <view class="">
         {{rows.name}}
       </view>
      <view style="font-size: 12rpx;">订单生成日期:{{rows.payTime}}</view>
             <view style="font-size: 12rpx;color: #0066CC;">订单状态:{{rows.orderStatus}}</view>
    </uni-card>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        rows: {
        id: 21,
        orderNo: "2021051001061885228",
        amount: '58元',
        orderStatus: "已付款",
        userId: 2,
        payTime: "2021-05-10",
        name: "中影华臣影城",
        orderType: "movie",
        orderTypeName: "看电影"
        }
      };
    }
  }
</script>

<style lang="scss">

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

image-20231011111901989

# 10.uni-list: List 列表组件,包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。

<uni-list-item title="个人信息" showArrow to="unamexx"></uni-list-item>
<uni-list-item title="订单列表" showArrow to="dingdan"></uni-list-item>
<uni-list-item title="修改密码" showArrow to="changemima"></uni-list-item>
<uni-list-item title="意见反馈" showArrow to="yijian"></uni-list-item>
1
2
3
4
属性名 类型 默认值 说明
title String - 标题
note String - 描述
ellipsis Number 0 title 是否溢出隐藏,可选值,0:默认; 1:显示一行; 2:显示两行;
thumb String - 左侧缩略图,若thumb有值,则不会显示扩展图标
thumbSize String medium 略缩图尺寸,可选值,lg:大图; medium:一般; sm:小图;
showBadge Boolean false 是否显示数字角标
badgeText String - 数字角标内容
badgeType String - 数字角标类型,参考uni-icons (opens new window)
badgeStyle Object - 数字角标样式,使用uni-badge的custom-style参数
rightText String - 右侧文字内容
disabled Boolean false 是否禁用
showArrow Boolean true 是否显示箭头图标
link String navigateTo 新页面跳转方式,可选值见下表
to String - 新页面跳转地址,如填写此属性,click 会返回页面是否跳转成功
clickable Boolean false 是否开启点击反馈
showSwitch Boolean false 是否显示Switch
switchChecked Boolean false Switch是否被选中
showExtraIcon Boolean false 左侧是否显示扩展图标
extraIcon Object - 扩展图标参数,格式为 {color: '#4cd964',size: '22',type: 'spinner'},参考 uni-icons (opens new window)
direction String row 排版方向,可选值,row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排,也受此属性控制

# 11.单选框 uni-data-checkbox

<uni-forms-item  label="性别" style="display: flex; justify-content: center; align-items: center;" required>
<uni-data-checkbox @change="changeXb"  :value="username.sex"  :localdata="localStorage"></uni-data-checkbox>
</uni-forms-item>

1
2
3
4
username:{
          phonenumber: '',
          nickName: '',
          sex: ''
        },
 changeXb (e) {
          this.username.sex = e.detail.data.value
        },
1
2
3
4
5
6
7
8

# 12.多选框 设置 multiple 属性,组件显示为多选框

需要注意 :multiple="true" 时(多选) , value/v-model 的值是 Array 类型

<template>
	<view>
		<uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
	</view>
</template>
1
2
3
4
5
<script>
	export default {
		data() { 
			return {
				value: [0,2],
				range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
			}
		},
		methods: {
			change(e){
				console.log('e:',e);
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 13.上传文件 uni.uploadFile(options)

  <view class="item_imag" @click="changeImg()">
          <image :src="img[0]||ip() + username.avatar" mode=""></image>
   </view>
1
2
3
img: [], 
   changeImg () {
    uni.chooseImage({
        count:1,
        success: (res) => {
            this.img =  res.tempFilePaths
        }
    })

},
uni.uploadFile({
          filePath: this.img[0],
          method: 'POST',
          url: this.ip() + '/prod-api/common/upload',
          header: this.header(),
          success: ({data: res}) => {
            let rey = JSON.parse(res)
            if(this.img[0]) {
              uni.request({
                url: this.ip() +'/prod-api/api/common/user',
                method: 'PUT',
                header: this.header(),
                data: {
                  nickName: this.username.nickName,
                  phonenumber: this.username.phonenumber,
                  avatar: '/prod-api/' + rey.fileName,
                  sex: this.username.sex
                },
                success: ({data: res}) => {
                  this.ts('修改成功')
                  setTimeout(() => {
                     uni.reLaunch({
                       url: '/pages/uname/uname'
                     })
                  },800) 
                }
              })
            }else {
              uni.request({
                url: this.ip() +'/prod-api/api/common/user',
                method: 'PUT',
                header: this.header(),
                data:  this.nickName,
                success: ({data: res}) => {
                  this.ts('修改成功')
                  setTimeout(() => {
                     uni.reLaunch({
                       url: '/pages/uname/uname'
                     })
                  },800) 
                }
              })
            }
          }
                })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
LOSER
米津玄師