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

Apesource-吉2024-01-19 19:40

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

        • uni-app组件
          • scroll-view
          • swiper
          • [text 文本](#text 文本)
          • [button 按钮](#button 按钮)
          • [input 输入框](#input 输入框)
          • [radio 单选](#radio 单选)
          • [checkbox 多选](#checkbox 多选)
          • [picker 选择器](#picker 选择器)
          • [slider 滑块](#slider 滑块)
          • [textarea 文本域](#textarea 文本域)
        • 弹窗
          • [提示框 uni.showLoading](#提示框 uni.showLoading)
          • [提示弹窗 uni.showToast](#提示弹窗 uni.showToast)
          • [确定取消框 uni.showModal](#确定取消框 uni.showModal)
          • [列表提示框 uni.showActionSheet](#列表提示框 uni.showActionSheet)
        • 数据缓存
        • 跳转
uni-app组件
scroll-view
html 复制代码 
<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>

回到顶部

javascript 复制代码 
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 解码 例如：&lt;,&gt;等
space 是否显示空格

space的参数值

参数 说明
emsp 中文字符空格大小
ensp 中文字符空格一半大小
nbsp 根据字体设置的空格大小
html 复制代码 
<text selectable decode space="nbsp">{{msg}}</text>
button 按钮
html 复制代码 
<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 昵称输入键盘
html 复制代码 
<!-- 数据绑定 -->
<!-- <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的单选。

html 复制代码 
<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 组成。

html 复制代码 
<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

html 复制代码 
<!-- 单列 -->
<picker @change="bindPickChange" range-key="name" :range="array" :value="index">
    <view style="padding: 20rpx; ">
        {{array[index].name}}
    </view>
</picker>

js

javascript 复制代码 
//数据	
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

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

javascript 复制代码 
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

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

html 复制代码 
<!-- 日期 -->
<picker mode="date" :range="date" @change="bindDateChange" :start="startDate" :end="endDate">
    <view style="padding: 20rpx; color: yellowgreen;">
        {{date}}
    </view>
</picker>

js

javascript 复制代码 
//日期
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

html 复制代码 
<slider min="0" max="100" step="1" :value="sliderNum" activeColor="yellow" backgroundColor="red" @changing="setSlider"></slider>

js

javascript 复制代码 
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()关闭

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

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

有多种icon，例如：success 、error、fail等

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

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

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

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

    }
})
列表提示框 uni.showActionSheet

从底部向上弹出操作菜单

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

 uni.removeStorageSync("Storage");           //删除某个key
 uni.clearStorageSync();					//全部删除
异步缓存
javascript 复制代码 
//设置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();
获取缓存数据
javascript 复制代码 
uni.getStorageInfo({
    success(res) {
        console.log(res.keys);
    }
})
跳转
属性名 类型 默认值 说明
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"时生效
html 复制代码 
<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函数可得到传递的参数

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

2.uni.redirectTo

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

同上述uni.navigateTo的参数列表

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

3.uni.reLaunch

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

同上述uni.navigateTo的参数列表

javascript 复制代码 
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 接口调用结束的回调函数（调用成功、失败都会执行）
javascript 复制代码 
uni.switchTab({
	url: '/pages/home/home'
});

5.uni.navigateBack

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

参数 类型 说明
delta Number 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType String 窗口关闭的动画效果
animationDuration Number 窗口关闭动画的持续时间，单位为 ms
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数（调用成功、失败都会执行）
javascript 复制代码 
uni.navigateBack({
	delta: 1
});
相关推荐
guai_guai_guai39 分钟前
uniapp
前端·javascript·vue.js·uni-app
阿伟来咯~6 小时前
一些 uniapp相关bug
uni-app·bug
瑶琴AI前端10 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen86810 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦18 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
尚学教辅学习资料1 天前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie2341 天前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解