uni.requset添加异常判断提示,以及加载动画
/** * 该函数用于发送网络请求获取数据 * 请求失败时会弹出相应的错误提示 * 请求成功时会检查返回的数据是否存在错误,并根据错误代码做出相应处理 * 如果数据请求成功且无错误,则将返回的数据赋值给pets变量 */ function notwork() { //显示页面加载动画 // uni.showLoading(); //显示标题加载动画 uni.showNavigationBarLoading() // 发起网络请求,使用uni.request方法请求数据 uni.request({ // 请求的URL地址 url: 'https://tea.qingnian8.com/tools/taoShow', // 请求的参数,指定每次请求返回数据的大小 data: { size: 10 }, // 请求头,添加访问密钥以认证请求身份 header: { 'access-key': "581428" } }).then((res) => { // 检查请求返回的数据是否包含错误 if (res.data.errCode === 0) { // 如果没有错误,则将返回的数据赋值给pets变量 pets.value = res.data } else if (res.data.errCode === 400) { // 如果返回的错误代码为400,则弹出错误信息提示 uni.showToast({ title: res.data.errMsg, icon: 'none', duration: 1500 }) } }).catch((err) => { // 如果请求失败,则弹出错误提示,提示用户刷新页面 uni.showToast({ title: '请求有误,请重新刷新', icon: 'none', duration: 1500 }) }).finally(() => { // 取消页面加载动画 // uni.hideLoading(); //取消标题加载动画 uni.hideNavigationBarLoading() // 请求失败后的最终操作,此处打印一条日志信息 console.log('校验结束'); }) }
实现触底加载
//页面触底事件 onReachBottom(() => { notwork() })
使用解构的方式,为数组底部添加数据,实现触底刷新
// 检查请求返回的数据是否包含错误 if (res.data.errCode === 0) { // 如果没有错误,则将返回的数据赋值给pets变量 pets.value = [...pets.value, ...res.data.data] } else if (res.data.errCode === 400) { // 如果返回的错误代码为400,则弹出错误信息提示 uni.showToast({ title: res.data.errMsg, icon: 'none', duration: 1500 }) }
底部触底安全区和触底加载动画组件
.loadMore { padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx) }
加载组件
分段组件
<uni-segmented-control :current="current" :values="[11,22,33]" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
属性分析
:current
- 作用:当前选中的索引。
- 类型:Number。
- 默认值:0。
- 说明:表示当前选中的标签索引。
:values
- 作用:所有的选项数组,每个元素代表一个可选的标签名称。
- 类型:Array。
@clickItem
- 作用:当选中的项发生变化时触发的事件。
- 类型:Function。
- 说明:当用户点击某个标签时,会触发这个事件,并传递一个事件对象
e
,其中包含当前选中的索引。
styleType
- 作用:样式类型,设置为按钮样式。
- 类型:String。
- 默认值:
text
。- 说明:这里设置为
button
,表示标签将以按钮的形式展示。
activeColor
- 作用:选中状态的文字颜色。
- 类型:String。
- 说明:设置选中状态的文字颜色为
#4cd964
。