uniapp业务实现

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。