uni-app学习笔记三十六--分段式选项卡组件的使用

先来看效果:

上图有3个选项卡(PS:uniapp官方称之为分段器,我还是习惯叫选项卡),需要实现点击不同的选项卡时下方切换显示对应的数据。

下面介绍下实现的过程。

1.在uniapp官方文档下载并安装该扩展组件:uni-app官网,下载和安装方法请参照上一篇笔记;

2.在项目中引入该组件,复制文档中这段代码到项目容器中:

代码:

html 复制代码
<view class="menu">
	<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
</view>

需要改动的地方主要有3处:

(1)current,当前选中选项卡的索引;

(2)values :values="values",需要在JS中定义 values值,用于选项卡显示的文字内容,最好声明为数组形式,方便调用;

(3)@clickItem:点击事件,当用户点击不同的选项卡时加载对应的数据。

先来看前2项:

javascript 复制代码
const current = ref(0)
const classfy = [{key:"all",value:"全部"},{key:"cat",value:"猫猫"},{key:"dog",value:"狗狗"}]
const values = computed(()=>classfy.map(item=>item.value))

上面的代码实现:

(1)默认选中的选项卡为第1项;

(2)声明一个key-value的数组,其中value为选项卡显示的文字,使用computed计算属性将数组中的value提取出来。

再看点击事件:

javascript 复制代码
function onClickItem(e){
	pets.value = []
	current.value = e.currentIndex
	getPets()
}

上面的代码中先将获取的旧数据清空,拿到当前选项卡的索引,最后调getPets()方法获取当前选项卡的数据。

当用户下拉刷新时,也需要将当前选项卡置为默认选项卡,重新调接口获取新的数据:

javascript 复制代码
//下拉刷新,先清空以前的数据,再重新请求接口拿到新数据去填充
onPullDownRefresh(()=>{
	pets.value=[]
	//下拉刷新时将选项卡置为0
	current.value = 0
	getPets()
})

最终效果展示:

相关推荐
sz-lcw2 小时前
MySQL知识笔记
笔记·mysql·adb
古译汉书2 小时前
嵌入式铁头山羊STM32-各章节详细笔记-查阅传送门
数据结构·笔记·stm32·单片机·嵌入式硬件·个人开发
2301_800050995 小时前
DNS 服务器
linux·运维·笔记
汇能感知5 小时前
光谱相机的未来趋势
经验分享·笔记·科技
2501_916007475 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
Q_Q5110082855 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
性野喜悲6 小时前
uniapp+<script setup lang=“ts“>解析后端返回的图片流并将二维码展示在页面中
uni-app
Coovally AI模型快速验证6 小时前
从避障到实时建图:机器学习如何让无人机更智能、更安全、更实用(附微型机载演示示例)
人工智能·深度学习·神经网络·学习·安全·机器学习·无人机
卷Java7 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
东木君_7 小时前
RK3588:MIPI底层驱动学习——入门第三篇(IIC与V4L2如何共存?)
学习