衢州建设企业网站如何制作网页教程
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) {// 收集所有宠物的图片URLvar urls = pets.value.map(item => item.url)// 使用uni.previewImage方法预览图片，传入当前图片的索引和所有图片的URL列表uni.previewImage({current: index,urls: urls}) }