uni-app基础详解(组件、弹窗、数据缓存、页面跳转)

uni-app基础详解(组件、弹窗、数据缓存、页面跳转)

        • uni-app组件
          • scroll-view
          • swiper
          • text 文本
          • button 按钮
          • input 输入框
          • radio 单选
          • checkbox 多选
          • picker 选择器
          • slider 滑块
          • textarea 文本域
        • 弹窗
          • 提示框 uni.showLoading
          • 提示弹窗 uni.showToast
          • 确定取消框 uni.showModal
          • 列表提示框 uni.showActionSheet
        • 数据缓存
          • 同步缓存
          • 异步缓存
          • 获取缓存数据
        • 跳转
          • `navigator `标签跳转
          • 编程式跳转

uni-app组件
scroll-view
<button @click="goTop">回到顶部button>
<button @click="showLoad">弹窗button>
<scroll-view scroll-y class="scroll" :scroll-top="scrollTop" @scroll="getScrollTop">
    <view id="demo1" class="scroll-item bg-blue">Aview>
    <view id="demo2" class="scroll-item bg-red">Bview>
    <view id="demo3" class="scroll-item bg-green">Cview>
scroll-view>		

回到顶部

getScrollTop(e) {
    console.log(e.detail.scrollTop);
    //方案一
    this.old.scrollTop = e.detail.scrollTop
    //方案二
    // this.scrollTop = e.detail.scrollTop
},
    goTop() {
        //方案一
        this.scrollTop = this.old.scrollTop;
        this.$nextTick(function() {
            this.scrollTop = 0
        })

        //方案二
        // this.scrollTop = 0;
    }
swiper

			A
			B
			C
		
text 文本
属性 说明
selectable 是否选中
decode 解码 例如:<,>
space 是否显示空格

space的参数值

参数 说明
emsp 中文字符空格大小
ensp 中文字符空格一半大小
nbsp 根据字体设置的空格大小
<text selectable decode space="nbsp">{{msg}}text>
button 按钮
<button plain disabled type="primary">我是按钮button>
<button loading type="default">我是按钮button>
<button type="warn">我是按钮button>
<button size="mini" type="primary">我是按钮button>
<button size="mini" type="primary">我是按钮button>
input 输入框
属性名 类型 默认值 说明
value String 输入框的初始内容
type String text input 的类型
password Boolean false 是否是密码类型
placeholder String 输入框为空时占位符
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度

type的有效值

说明
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
tel 电话输入键盘
safe-password 密码安全输入键盘
nickname 昵称输入键盘


<input type="text" v-model="msg" />


<input type="text" password placeholder="请输入密码" />
<input type="text" placeholder="请输入密码" />
radio 单选
属性名 类型 说明
value String 标识。当选中时,change 事件会携带选中的 value
checked Boolean 当前是否选中
disabled Boolean 是否禁用
color Color radio的颜色,同css的color

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

<radio-group @change="onSelect">
    <radio checked value="1">radio><radio color="red" value="2">radio><radio disabled value="3">radio><radio value="4">radio>radio-group>
checkbox 多选
属性名 类型 说明
value String 标识,选中时触发 的 change 事件,并携带 的 value。
disabled Boolean 是否禁用
checked Boolean 当前是否选中,可用来设置默认选中
color Color checkbox的颜色,同css的color

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

<checkbox-group>
    <checkbox checked color="red" value="1">篮球checkbox>
    <checkbox disabled value="2">足球checkbox>
    <checkbox color="rgba(120,0,255,0.5)" value="3">网球checkbox>
checkbox-group>
picker 选择器

从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器selector,多列选择器multiSelector,时间选择器time,日期选择器date,省市区选择器region,默认是普通选择器。

1.普通选择器selector

属性名 类型 说明
range Array / Array mode为 selector 或 multiSelector 时,range 有效
range-key String 当 range 是一个 Array<Object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number value 的值表示选择了 range 中的第几个(下标从 0 开始)
disabled Boolean 是否禁用
@change EventHandle value 改变时触发 change 事件,event.detail = {value: value}
@cancel EventHandle 取消选择或点遮罩层收起 picker 时触发

html


<picker @change="bindPickChange" range-key="name" :range="array" :value="index">
    <view style="padding: 20rpx; ">
        {{array[index].name}}
    view>
picker>

js

//数据	
index: 0,
    array: [{
        name: "中国"
    }, {
        name: "美国"
    }, {
        name: "俄罗斯"
    }]
//函数
bindPickChange(e) {
    this.index = e.detail.value
    // 刷新
    this.$forceUpdate()
},

2.多列选择器multiSelector

属性名 类型 说明
range 二维 Array / 二维 Array<Object> mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,“b”], [“c”,“d”]]
range-key String 当 range 是一个 Array<Object> 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value Number value 的值表示选择了 range 中的第几个(下标从 0 开始)
disabled Boolean 是否禁用
@change EventHandle value 改变时触发 change 事件,event.detail = {value: value}
@columnchange EventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标
@cancel EventHandle 取消选择或点遮罩层收起 picker 时触发

html


<picker @change="bindPickChange" mode="multiSelector" @columnchange="bindColumnChange" :value="multIndex"
        :range="multArray">
    <view style="padding: 20rpx; color: blue;">
        {{multArray[0][multIndex[0]]}} -
        {{multArray[1][multIndex[1]]}} -
        {{multArray[2][multIndex[2]]}}
    view>
picker>

js

multArray: [
    ['亚洲', '欧洲', '美洲'],
    ['中国', '韩国', '日本'],
    ['北京', '上海', '西安']
],
multIndex: [0, 0, 0],
//多列
bindColumnChange(e) {
    this.multIndex[e.detail.column] = e.detail.value
},    
bindPickChange(e) {
    this.index = e.detail.value

    // 刷新
    this.$forceUpdate()
},

3.时间选择器time

属性名 类型 说明
value String 表示选中的时间,格式为"hh:mm"
start String 表示有效时间范围的开始,字符串格式为"hh:mm"
end String 表示有效时间范围的结束,字符串格式为"hh:mm"
@change EventHandle value 改变时触发 change 事件,event.detail = {value: value}
@cancel EventHandle 取消选择时触发
disabled Boolean 是否禁用

html


<picker mode="time" :range="time" @change="bindTimeChange" :start="minTime" :end="maxTime">
    <view style="padding: 20rpx; color: yellowgreen;">
        {{time}}
    view>
picker>

js

//时间
time: "11:16",
minTime: "00:00",
maxTime: "23:59",

//时间
bindTimeChange(e) {
    this.time = e.detail.value
},

4.日期选择器date

属性名 类型 说明
value String 表示选中的日期,格式为"YYYY-MM-DD"
start String 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
end String 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fields String 有效值 year、month、day,表示选择器的粒度,默认为 day,App 端未配置此项时使用系统 UI
@change EventHandle value 改变时触发 change 事件,event.detail = {value: value}
@cancel EventHandle 取消选择时触发
disabled Boolean 是否禁用

html


<picker mode="date" :range="date" @change="bindDateChange" :start="startDate" :end="endDate">
    <view style="padding: 20rpx; color: yellowgreen;">
        {{date}}
    view>
picker>

js

//日期
date: getDate({
    format: true
}),
startDate: getDate('start'),
endDate: getDate('end')

//日期
bindDateChange(e) {
    this.date = e.detail.value
},

5.省市区选择器region

属性名 类型 说明
value Array 表示选中的省市区,默认选中每一列的第一个值
custom-item String 可为每一列的顶部添加一个自定义的项
@change EventHandle value 改变时触发 change 事件,event.detail = {value: value}
@cancel EventHandle 取消选择时触发(快手小程序不支持)
disabled Boolean 是否禁用(快手小程序不支持)
slider 滑块
属性名 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
step Number 1 步长,取值必须大于 0,并且可被(max - min)整除
disabled Boolean false 是否禁用
value Number 0 当前取值
activeColor Color 各个平台不同,详见下 滑块左侧已选择部分的线条颜色
backgroundColor Color #e9e9e9 滑块右侧背景条的颜色
block-size Number 28 滑块的大小,取值范围为 12 - 28
block-color Color #ffffff 滑块的颜色
show-value Boolean false 是否显示当前 value
@change EventHandle 完成一次拖动后触发的事件,event.detail = {value: value}
@changing EventHandle 拖动过程中触发的事件,event.detail = {value: value}

html

<slider min="0" max="100" step="1" :value="sliderNum" activeColor="yellow" backgroundColor="red" @changing="setSlider">slider>

js

setSlider(e) {
    this.sliderNum = e.detail.value
},
textarea 文本域
属性名 类型 默认值 说明
value String 输入框的内容
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String textarea-placeholder 指定 placeholder 的样式类,注意页面或组件的style中写了scoped时,需要在类名前写/deep/
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度,设置为 -1 的时候不限制最大长度
auto-height Boolean false 是否自动增高,设置auto-height时,style.height不生效

弹窗
提示框 uni.showLoading

uni.showLoading一般不自动关闭,需要调用uni.hideLoading()关闭

//提示框
uni.showLoading({
    title:"加载中...",
    mask:true
})

setTimeout(function() {
    uni.hideLoading();
}, 1000);
提示弹窗 uni.showToast

有多种icon,例如:success 、error、fail等

//提示弹窗
uni.showToast({
    title:'成功提示',
    duration: 2000, //持续时间
    icon:"success"
})

//图标提示
uni.showToast({
    title: '查询中',
    image:'../../static/logo.png',
    duration: 2000
})
确定取消框 uni.showModal

可以同时有确定和取消按钮

//确定取消框
uni.showModal({
    title:"提示",
    content:"是否删除?",
    confirmText:'删除',
    confirmColor: '#4cd964',
    cancelText:'放弃',
    cancelColor:'#dd524d',
    success:(e) =>{
        if(e.confirm){
            console.log("确定");
        }else{
            console.log("取消");
        }

    }
})
列表提示框 uni.showActionSheet

从底部向上弹出操作菜单

// 列表提示框
uni.showActionSheet({
    itemList:['今天','明天','昨天'], //数组长度最大为6个
    itemColor:'#f0ad4e',
    success(res) {
        console.log(res.tapIndex); //用户点击的按钮,从上到下的顺序,从0开始
    },
    fail() {
        console.log("取消");
    }
})
数据缓存
同步缓存
//同步缓存
 uni.setStorageSync("Storage","jixin")		 //设置key value 存储		
 console.log(uni.getStorageSync("Storage")); //通过key 获取value

 uni.removeStorageSync("Storage");           //删除某个key
 uni.clearStorageSync();					//全部删除
异步缓存
//设置key value 存储
uni.setStorage({ 				
 	key:"Storage",
	data:"world",
 	success() {
		console.log("=======异步缓存=======");
 	}
 })

//通过key 获取value	
 uni.getStorage({
 	key:"Storage",
	success(res) {
		console.log( res.data);
 	}
 })
//删除某个key
uni.removeStorage("Storage");
//全部删除
uni.clearStorage();


获取缓存数据
uni.getStorageInfo({
    success(res) {
        console.log(res.keys);
    }
})
跳转
navigator 标签跳转
属性名 类型 默认值 说明
url String 应用内的跳转链接,值为相对路径或绝对路径,如:“…/first/first”,“/pages/first/first”,注意不能加 .vue 后缀
open-type String navigate 跳转方式
delta Number 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数
animation-type String pop-in/out 当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果。(仅限App使用)
animation-duration Number 300 当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。(仅限App使用)

open-type的参数

说明
navigate 对应 uni.navigateTo 的功能
redirect 对应 uni.redirectTo 的功能
switchTab 对应 uni.switchTab 的功能
reLaunch 对应 uni.reLaunch 的功能
navigateBack 对应 uni.navigateBack 的功能
exit 退出小程序,target="miniProgram"时生效
<navigator url="/pages/index/index" open-type="navigate">去非tabBar页面navigator>

<navigator url="/pages/home/home" open-type="switchTab">去tabBar页面navigator> 
编程式跳转

1.uni.navigateTo

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

参数 类型 说明
url String 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数

uni.navigateTo({
      url: 'pages/main/main?id=1001&name=zhangsan',
      success: (res) => {
        console.log("跳转Main", res);
      }
    })

2.uni.redirectTo

关闭当前页面,跳转到应用内的某个页面。

同上述uni.navigateTo的参数列表

uni.redirectTo({
	url: 'pages/main/main?id=1001&name=zhangsan
});

3.uni.reLaunch

关闭所有页面,打开到应用内的某个页面。

同上述uni.navigateTo的参数列表

uni.reLaunch({
	url: 'pages/main/main?id=1001&name=zhangsan'
});

4.uni.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

参数 类型 说明
url String 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
uni.switchTab({
	url: '/pages/home/home'
});

5.uni.navigateBack

关闭当前页面,返回上一页面或多级页面。

参数 类型 说明
delta Number 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
animationType String 窗口关闭的动画效果
animationDuration Number 窗口关闭动画的持续时间,单位为 ms
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
uni.navigateBack({
	delta: 1
});

你可能感兴趣的:(uni-app)