做韩国网站有哪些,中国设计院全国排名,磁力链接 网站怎么做的,网站在线留言的用途uni-app基础详解#xff08;组件、弹窗、数据缓存、页面跳转#xff09; uni-app组件scroll-viewswipertext 文本button 按钮input 输入框radio 单选checkbox 多选picker 选择器slider 滑块textarea 文本域 弹窗提示框 uni.showLoading提示弹窗 uni.showToast确定取消框 uni.… uni-app基础详解组件、弹窗、数据缓存、页面跳转 uni-app组件scroll-viewswipertext 文本button 按钮input 输入框radio 单选checkbox 多选picker 选择器slider 滑块textarea 文本域 弹窗提示框 uni.showLoading提示弹窗 uni.showToast确定取消框 uni.showModal列表提示框 uni.showActionSheet 数据缓存同步缓存异步缓存获取缓存数据 跳转navigator 标签跳转编程式跳转 uni-app组件
scroll-view
button clickgoTop回到顶部/button
button clickshowLoad弹窗/button
scroll-view scroll-y classscroll :scroll-topscrollTop scrollgetScrollTopview iddemo1 classscroll-item bg-blueA/viewview iddemo2 classscroll-item bg-redB/viewview iddemo3 classscroll-item bg-greenC/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 classswiper indicator-dots indicator-colorpink indicator-active-colorred autoplay current1interval3000 duration1000 circularswiper-item classswiper-item bg-blueA/swiper-itemswiper-item classswiper-item bg-yellowB/swiper-itemswiper-item classswiper-item bg-greenC/swiper-item/swipertext 文本
属性说明selectable是否选中decode解码 例如lt;,gt;等space是否显示空格
space的参数值
参数说明emsp中文字符空格大小ensp中文字符空格一半大小nbsp根据字体设置的空格大小
text selectable decode spacenbsp{{msg}}/textbutton 按钮
button plain disabled typeprimary我是按钮/button
button loading typedefault我是按钮/button
button typewarn我是按钮/button
button sizemini typeprimary我是按钮/button
button sizemini typeprimary我是按钮/buttoninput 输入框
属性名类型默认值说明valueString输入框的初始内容typeStringtextinput 的类型passwordBooleanfalse是否是密码类型placeholderString输入框为空时占位符disabledBooleanfalse是否禁用maxlengthNumber140最大输入长度设置为 -1 的时候不限制最大长度
type的有效值
值说明text文本输入键盘number数字输入键盘idcard身份证输入键盘digit带小数点的数字键盘tel电话输入键盘safe-password密码安全输入键盘nickname昵称输入键盘
!-- 数据绑定 --
!-- input typetext :valuemsg / --
input typetext v-modelmsg /!-- 密码框 --
input typetext password placeholder请输入密码 /
input typetext placeholder请输入密码 /radio 单选
属性名类型说明valueString标识。当选中时change 事件会携带选中的 valuecheckedBoolean当前是否选中disabledBoolean是否禁用colorColorradio的颜色同css的color
单项选择器内部由多个 radio 组成。通过把多个radio包裹在一个radio-group下实现这些radio的单选。
radio-group changeonSelectradio checked value1/radio 吃radio colorred value2/radio 喝radio disabled value3/radio 嫖radio value4/radio 赌
/radio-groupcheckbox 多选
属性名类型说明valueStringcheckbox 标识选中时触发 checkbox 的 change 事件并携带 checkbox 的 value。disabledBoolean是否禁用checkedBoolean当前是否选中可用来设置默认选中colorColorcheckbox的颜色同css的color
checkbox-group多项选择器内部由多个 checkbox 组成。
checkbox-groupcheckbox checked colorred value1篮球/checkboxcheckbox disabled value2足球/checkboxcheckbox colorrgba(120,0,255,0.5) value3网球/checkbox
/checkbox-grouppicker 选择器
从底部弹起的滚动选择器。支持五种选择器通过mode来区分分别是普通选择器selector多列选择器multiSelector时间选择器time日期选择器date省市区选择器region默认是普通选择器。
1.普通选择器selector
属性名类型说明rangeArray / ArrayObjectmode为 selector 或 multiSelector 时range 有效range-keyString当 range 是一个 ArrayObject 时通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valueNumbervalue 的值表示选择了 range 中的第几个下标从 0 开始disabledBoolean是否禁用changeEventHandlevalue 改变时触发 change 事件event.detail {value: value}cancelEventHandle取消选择或点遮罩层收起 picker 时触发
html
!-- 单列 --
picker changebindPickChange range-keyname :rangearray :valueindexview stylepadding: 20rpx; {{array[index].name}}/view
/pickerjs
//数据
index: 0,array: [{name: 中国}, {name: 美国}, {name: 俄罗斯}]
//函数
bindPickChange(e) {this.index e.detail.value// 刷新this.$forceUpdate()
},2.多列选择器multiSelector
属性名类型说明range二维 Array / 二维 ArrayObjectmode为 selector 或 multiSelector 时range 有效。二维数组长度表示多少列数组的每项表示每列的数据如[[“a”,“b”], [“c”,“d”]]range-keyString当 range 是一个 ArrayObject 时通过 range-key 来指定 Object 中 key 的值作为选择器显示内容valueNumbervalue 的值表示选择了 range 中的第几个下标从 0 开始disabledBoolean是否禁用changeEventHandlevalue 改变时触发 change 事件event.detail {value: value}columnchangeEventHandle某一列的值改变时触发 columnchange 事件event.detail {column: column, value: value}column 的值表示改变了第几列下标从0开始value 的值表示变更值的下标cancelEventHandle取消选择或点遮罩层收起 picker 时触发
html
!-- 多列 --
picker changebindPickChange modemultiSelector columnchangebindColumnChange :valuemultIndex:rangemultArrayview stylepadding: 20rpx; color: blue;{{multArray[0][multIndex[0]]}} -{{multArray[1][multIndex[1]]}} -{{multArray[2][multIndex[2]]}}/view
/pickerjs
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
属性名类型说明valueString表示选中的时间格式为hh:mmstartString表示有效时间范围的开始字符串格式为hh:mmendString表示有效时间范围的结束字符串格式为hh:mmchangeEventHandlevalue 改变时触发 change 事件event.detail {value: value}cancelEventHandle取消选择时触发disabledBoolean是否禁用
html
!-- 时间 --
picker modetime :rangetime changebindTimeChange :startminTime :endmaxTimeview stylepadding: 20rpx; color: yellowgreen;{{time}}/view
/pickerjs
//时间
time: 11:16,
minTime: 00:00,
maxTime: 23:59,//时间
bindTimeChange(e) {this.time e.detail.value
},4.日期选择器date
属性名类型说明valueString表示选中的日期格式为YYYY-MM-DDstartString表示有效日期范围的开始字符串格式为YYYY-MM-DDendString表示有效日期范围的结束字符串格式为YYYY-MM-DDfieldsString有效值 year、month、day表示选择器的粒度默认为 dayApp 端未配置此项时使用系统 UIchangeEventHandlevalue 改变时触发 change 事件event.detail {value: value}cancelEventHandle取消选择时触发disabledBoolean是否禁用
html
!-- 日期 --
picker modedate :rangedate changebindDateChange :startstartDate :endendDateview stylepadding: 20rpx; color: yellowgreen;{{date}}/view
/pickerjs
//日期
date: getDate({format: true
}),
startDate: getDate(start),
endDate: getDate(end)//日期
bindDateChange(e) {this.date e.detail.value
},5.省市区选择器region
属性名类型说明valueArray表示选中的省市区默认选中每一列的第一个值custom-itemString可为每一列的顶部添加一个自定义的项changeEventHandlevalue 改变时触发 change 事件event.detail {value: value}cancelEventHandle取消选择时触发快手小程序不支持disabledBoolean是否禁用快手小程序不支持
slider 滑块
属性名类型默认值说明minNumber0最小值maxNumber100最大值stepNumber1步长取值必须大于 0并且可被(max - min)整除disabledBooleanfalse是否禁用valueNumber0当前取值activeColorColor各个平台不同详见下滑块左侧已选择部分的线条颜色backgroundColorColor#e9e9e9滑块右侧背景条的颜色block-sizeNumber28滑块的大小取值范围为 12 - 28block-colorColor#ffffff滑块的颜色show-valueBooleanfalse是否显示当前 valuechangeEventHandle完成一次拖动后触发的事件event.detail {value: value}changingEventHandle拖动过程中触发的事件event.detail {value: value}
html
slider min0 max100 step1 :valuesliderNum activeColoryellow backgroundColorred changingsetSlider/sliderjs
setSlider(e) {this.sliderNum e.detail.value
},textarea 文本域
属性名类型默认值说明valueString输入框的内容placeholderString输入框为空时占位符placeholder-styleString指定 placeholder 的样式placeholder-classStringtextarea-placeholder指定 placeholder 的样式类注意页面或组件的style中写了scoped时需要在类名前写/deep/disabledBooleanfalse是否禁用maxlengthNumber140最大输入长度设置为 -1 的时候不限制最大长度auto-heightBooleanfalse是否自动增高设置auto-height时style.height不生效
textarea maxlength10 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 获取valueuni.removeStorageSync(Storage); //删除某个keyuni.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 标签跳转
属性名类型默认值说明urlString应用内的跳转链接值为相对路径或绝对路径如“…/first/first”“/pages/first/first”注意不能加 .vue 后缀open-typeStringnavigate跳转方式deltaNumber当 open-type 为 ‘navigateBack’ 时有效表示回退的层数animation-typeStringpop-in/out当 open-type 为 navigate、navigateBack 时有效窗口的显示/关闭动画效果。仅限App使用animation-durationNumber300当 open-type 为 navigate、navigateBack 时有效窗口显示/关闭动画的持续时间。仅限App使用
open-type的参数
值说明navigate对应 uni.navigateTo 的功能redirect对应 uni.redirectTo 的功能switchTab对应 uni.switchTab 的功能reLaunch对应 uni.reLaunch 的功能navigateBack对应 uni.navigateBack 的功能exit退出小程序targetminiProgram时生效
navigator url/pages/index/index open-typenavigate去非tabBar页面/navigatornavigator url/pages/home/home open-typeswitchTab去tabBar页面/navigator 编程式跳转
1.uni.navigateTo
保留当前页面跳转到应用内的某个页面使用uni.navigateBack可以返回到原页面。
参数类型说明urlString需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。successFunction接口调用成功的回调函数failFunction接口调用失败的回调函数completeFunction接口调用结束的回调函数调用成功、失败都会执行
参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔path为下一个页面的路径下一个页面的onLoad函数可得到传递的参数
uni.navigateTo({url: pages/main/main?id1001namezhangsan,success: (res) {console.log(跳转Main, res);}})2.uni.redirectTo
关闭当前页面跳转到应用内的某个页面。
同上述uni.navigateTo的参数列表
uni.redirectTo({url: pages/main/main?id1001namezhangsan
});3.uni.reLaunch
关闭所有页面打开到应用内的某个页面。
同上述uni.navigateTo的参数列表
uni.reLaunch({url: pages/main/main?id1001namezhangsan
});4.uni.switchTab
跳转到 tabBar 页面并关闭其他所有非 tabBar 页面。
参数类型说明urlString需要跳转的 tabBar 页面的路径需在 pages.json 的 tabBar 字段定义的页面路径后不能带参数successFunction接口调用成功的回调函数failFunction接口调用失败的回调函数completeFunction接口调用结束的回调函数调用成功、失败都会执行
uni.switchTab({url: /pages/home/home
});5.uni.navigateBack
关闭当前页面返回上一页面或多级页面。
参数类型说明deltaNumber返回的页面数如果 delta 大于现有页面数则返回到首页。animationTypeString窗口关闭的动画效果animationDurationNumber窗口关闭动画的持续时间单位为 mssuccessFunction接口调用成功的回调函数failFunction接口调用失败的回调函数completeFunction接口调用结束的回调函数调用成功、失败都会执行
uni.navigateBack({delta: 1
});
