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(() => { //调用uni.request重新渲染数据 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。
轮播图实现
<!-- 定义轮播图区域 --> <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>/** * 定义.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; } } } }
//顶层轮播图数据 var swiperTop = ref([{ id: 1, url: '../../common/images/banner1.jpg' }, { id: 2, url: '../../common/images/banner2.jpg' }, { id: 3, url: '../../common/images/banner3.jpg' }])
图片预览
/** * 预览图片函数 * * 该函数用于预览一系列图片中的某一张 * 它首先收集所有宠物的图片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 }) }