uniapp业务实现

uni.requset添加异常判断提示,以及加载动画

javascript 复制代码

	/**
	 * 该函数用于发送网络请求获取数据
	 * 请求失败时会弹出相应的错误提示
	 * 请求成功时会检查返回的数据是否存在错误，并根据错误代码做出相应处理
	 * 如果数据请求成功且无错误，则将返回的数据赋值给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('校验结束');
		})
	}

实现触底加载

javascript 复制代码

//页面触底事件
onReachBottom(() => {
//调用uni.request重新渲染数据
	notwork()
})

使用解构的方式,为数组底部添加数据,实现触底刷新

javascript 复制代码

// 检查请求返回的数据是否包含错误
		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
			})
		}

底部触底安全区和触底加载动画组件

javascript 复制代码

.loadMore {
				padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx)
			}

加载组件

分段组件

javascript 复制代码

<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。

轮播图实现

javascript 复制代码

	<!-- 定义轮播图区域 -->
		<view class="banner">
			<!-- 使用swiper组件实现轮播效果，配置指示器颜色和自动播放 -->
			<swiper indicator-dots indicator-color="rgba(255, 255,255, 0.5)" indicator-active-color="#fff" autoplay>
				<!-- 遍历swiperTop数组，为每个轮播图项创建swiper-item -->
				<swiper-item v-for="item in swiperTop" :key="item.id">
					<!-- 为每个swiper-item添加图片，图片源由item.url指定 -->
					<image :src="item.url"></image>
				</swiper-item>
			</swiper>
		</view>

css 复制代码

/**
 * 定义.banner类的样式，用于设置轮播图的容器样式
 */
.banner {
	// 设置轮播图容器的宽度为750rpx，确保在不同设备上的显示效果一致
	width: 750rpx;
	// 设置轮播图容器的内边距，上下各30rpx，实现内容与边界的间距
	padding: 30rpx 0;

	/**
	 * 定义swiper类的样式，用于设置轮播图的样式
	 */
	swiper {
		// 设置轮播图的宽度为750rpx，确保轮播图填满其容器
		width: 750rpx;
		// 设置轮播图的高度为340rpx，控制轮播图的展示大小
		height: 340rpx;

		/**
		 * 定义swiper-item类的样式，用于设置轮播图中每个轮播项的样式
		 */
		swiper-item {
			// 设置轮播项的宽度为100%，确保轮播项填满swiper容器
			width: 100%;
			// 设置轮播项的高度为100%，确保轮播项填满swiper容器
			height: 100%;
			// 设置轮播项的内边距，左右各30rpx，实现内容与边界的间距
			padding: 0 30rpx;

			/**
			 * 定义image类的样式，用于设置轮播图中图片的样式
			 */
			image {
				// 设置图片的宽度为100%，确保图片填满轮播项
				width: 100%;
				// 设置图片的高度为100%，确保图片填满轮播项
				height: 100%;
				// 设置图片的圆角为10rpx，实现图片边角的圆滑过渡效果
				border-radius: 10rpx;
			}
		}
	}
}

javascript 复制代码

//顶层轮播图数据
var swiperTop = ref([{
	id: 1,
	url: '../../common/images/banner1.jpg'
}, {
	id: 2,
	url: '../../common/images/banner2.jpg'
}, {
	id: 3,
	url: '../../common/images/banner3.jpg'
}])

图片预览

javascript 复制代码

/**
 * 预览图片函数
 * 
 * 该函数用于预览一系列图片中的某一张
 * 它首先收集所有宠物的图片URL，然后使用uni.previewImage方法进行预览
 * 
 * @param {number} index 需要预览的图片的索引
 */
function onPreview(index) {
	// 收集所有宠物的图片URL
	var urls = pets.value.map(item => item.url)
	// 使用uni.previewImage方法预览图片，传入当前图片的索引和所有图片的URL列表
	uni.previewImage({
		current: index,
		urls: urls
	})
}