小程序实现页面顶部选项卡效果

本文实例为大家分享了小程序实现选项卡效果的具体代码，供大家参考，具体内容如下

效果图：

开源代码库源码下载

！索引。wxml-view class=' swiper-tab ' view bind tap=' swith nav ' wx : for=' { { tabCont } } ' wx : key=' item。index ' class=' swiper-tab-list“{ CurrentTab==item。索引？active ' : ' ' } } ' data-current=' { { item。索引} } ' { { item。title } }/view/view swiper class=' swiper-box ' current=' { { current tab } } ' duration=' 300 ' style=' height :400 px ' bind change=' getcurrent tab ' data-current=' 6 ' swiper-item wx : for=' { { tabCont } } ' wx 3: key=' item .

/* *索引。wxss * *//* *索引。wxss * */.swiper-tab {行高： 80 rpxborder: 1px固体# cccdisplay: flex证明内容：空间环绕；align-items:居中；}.swiper-tab-list { font-size : 30 rpx；颜色： # 777文本对齐：中心；}.活动{ color : # da7c 0 cborder-bottom : 5 rpx实心# da7c0c}。swiper-box { display : block；高度： 100%;宽度： 100%;飞越：隐藏；}.开关盒视图{ text-align :居中；}图像{宽度： 100%；}js:

页面({ /** *页面的初始数据*/data: { currentTab:0，tab cont : [{ ' title ' : ' tab 1 '，' pic': '././img/1.jpg '，' index': '0' }，{ 'title': 'tab2 '，' pic': '././img/2.jpg '，' index': '1' }，{ 'title': 'tab3 '，' pic': '././img/3.jpg '，' index': '2' }，{ 'title': 'tab4 '，' pic': '././img/2.jpg '，' index': '3' }，{ 'title': 'tab5 '，' pic': '././img/2.jpg '，' index': '4' }，{ 'title': 'tab6 '，' pic': '././img/2.jpg '，' index': '5' }，{ 'title': 'tab7 '，' pic': '././img/2.jpg '，' index': '6' }，{ 'title': 'tab8 '，' pic': '././img/2.jpg '，' index': '7' }，{ 'title': 'tab9 '，' pic': '././img/2.jpg '，' index': '8' }]，}，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ },/** *生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharappmessage :函数(){ }，//swiper滑动时触发绑定更改事件，获取事件对象e获取当前所在滑块的指数，并将其更新至数据的currentTab中，视图渲染通过判断currentTab的让对应的制表符悬停。getcurrentatta b :函数(e){控制台。日志(例如详细信息。电流)；变量=这个；这个。setdata({当前选项卡3360 e . detail。当前})；//控制台。日志(' 11111 '这个。数据。当前选项卡)；}，swithNav:function(e){ var即=这个。setdata({当前ttab 3360 e . target。数据集。当前})；}})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。