手机端公司网站怎么做,wordpress knowhow 汉化,wordpress 回收站在哪,重庆平台网站建设多少钱先来看效果#xff1a; 上图有3个选项卡#xff08;PS:uniapp官方称之为分段器#xff0c;我还是习惯叫选项卡#xff09;#xff0c;需要实现点击不同的选项卡时下方切换显示对应的数据。
下面介绍下实现的过程。
1.在uniapp官方文档下载并安装该扩展组件#xff1a;u…先来看效果 上图有3个选项卡PS:uniapp官方称之为分段器我还是习惯叫选项卡需要实现点击不同的选项卡时下方切换显示对应的数据。
下面介绍下实现的过程。
1.在uniapp官方文档下载并安装该扩展组件uni-app官网下载和安装方法请参照上一篇笔记
2.在项目中引入该组件复制文档中这段代码到项目容器中 代码
view classmenuuni-segmented-control :currentcurrent :valuesvalues clickItemonClickItem styleTypebutton activeColor#2B9939/uni-segmented-control
/view 需要改动的地方主要有3处
(1)current当前选中选项卡的索引;
(2)values :valuesvalues需要在JS中定义 values值用于选项卡显示的文字内容最好声明为数组形式方便调用
(3)clickItem点击事件当用户点击不同的选项卡时加载对应的数据。
先来看前2项
const current ref(0)
const classfy [{key:all,value:全部},{key:cat,value:猫猫},{key:dog,value:狗狗}]
const values computed(()classfy.map(itemitem.value))
上面的代码实现
(1)默认选中的选项卡为第1项
(2)声明一个key-value的数组其中value为选项卡显示的文字使用computed计算属性将数组中的value提取出来。
再看点击事件
function onClickItem(e){pets.value []current.value e.currentIndexgetPets()
}
上面的代码中先将获取的旧数据清空拿到当前选项卡的索引最后调getPets()方法获取当前选项卡的数据。
当用户下拉刷新时也需要将当前选项卡置为默认选项卡重新调接口获取新的数据
//下拉刷新先清空以前的数据再重新请求接口拿到新数据去填充
onPullDownRefresh((){pets.value[]//下拉刷新时将选项卡置为0current.value 0getPets()
})
最终效果展示
