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

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">A</view>
    <view id="demo2" class="scroll-item bg-red">B</view>
    <view id="demo3" class="scroll-item bg-green">C</view>
</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

<swiper class="swiper" indicator-dots indicator-color="pink" indicator-active-color="red" autoplay current="1"
			interval="3000" duration="1000" circular>
			<swiper-item class="swiper-item bg-blue">A</swiper-item>
			<swiper-item class="swiper-item bg-yellow">B</swiper-item>
			<swiper-item class="swiper-item bg-green">C</swiper-item>
		</swiper>

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" :value="msg" /> -->
<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包裹在一个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	<checkbox> 标识，选中时触发 <checkbox> 的 change 事件，并携带 <checkbox> 的 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<Object>	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不生效

<textarea maxlength="10" placeholder="请输入内容" auto-height></textarea>

弹窗

提示框 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
});