微信小程序-实现标签

小程序开发中，有很多封装好的控件供开发者使用，但是，很常见的标签选项卡居然没有，只能自己搞一个。

实现原理也很简单，无非是用给视图（选项卡)设置一个点击事件宾塔普，并且给视图（选项卡)一个数据-idx索引，根据当前指数来改变标签的状态并决定swiper显示那个内容，改变swiper的内容只需要改变swiper的目前的就好。

二、效果

三、实现

wxml

view class=' ticket-container ' scroll-view scroll-y bind scroll toupper=' upper ' bind scroll to lower=' lower ' bind scroll=' roll ' roll-in-view=' { { to view } } ' roll-top=' { { scroll top } } '！-标签布局-view class=' title ' view class=' { { 0==CurrentDex '？title-sel-sel ' : ' title-sel ' } } ' bind tap=' title click ' data-idx=' 0 ' text未使用/text HR class=' line-style '/view view class=' { { 1==CurrentDex？'title-sel-sel ' : ' title-sel ' } } ' bind tap=' title click ' data-idx=' 1 ' text已使用/text HR class=' line-style '/view view class=' { { 2==CurrentDex？'title-sel-sel ' : ' title-sel ' } } ' bind tap=' title click ' data-idx=' 2 ' text已过期/text hr class='线型/view /view！-内容布局-swiper class=' swiper ' bind change=' page change ' current=' { { CurrentDex } } ' swiper-item class=' swiper ' view wx : for=' { { First LiST } } ' wx : for-item=' item ' class=' record-item ' view class=' name ' span名称：{{item.name}}/span span面额：{ { item。money } }/span/view/view/swiper-item swiper-item class=' swiper ' class=' swiper ' view wx : for=' { { secondList } } ' wx : for-item=' item ' class=' record-item ' view class=' name ' span名称：{{item.name}}/span span面额：{ { item。money } }/span/view/view/swiper-item swiper-item class=' swiper ' class=' swiper ' view wx : for=' { { thirdList } } ' wx : for-item=' item ' class=' record-item ' view class=' name ' span名称：{{item.name}}/span span面额：{ { item。money } }/span/view/view/swiper-item/swiper/roll-view/view js文件

//pages/mine/mine.jsPage({ /** *页面的初始数据*/data : {当前exx : 0，' firstList': [{ name: 'w券1 '，money: '5.00' }，w { name : '券2 '，money: '50.00'}]，secondList': [{ name: 'y券1 '，money: '10.00' }，name: 'y券2 '，money: '20.00' }]，' thirdList': [{ name: 'g券1 '，money: '30.00' }，name: 'g券2 '，money: '40.00' }]，}，//swiper切换时会调用pagechange:函数(e){ if(' touch '==e . detail。来源){ 0让currentPageIndex=this。数据。当前索引=CurrentPageIndex=(CurrentPageIndex 1)% 3此。setdata({ current addex : currentPageIndex })} }，//用户点击标签时调用标题单击：函数(e) {让currentPageIndex=this。setdata({//拿到当前索引并动态改变当前地址： e。当前目标。数据集。idx })} } wxss)文件。集装箱{身高： 100%；最小高度： 100%;显示： flex flex-方向：柱；盒子尺寸：边框盒子；}.标题{宽度： 100%；高度： 88rpx背景：白色；display : flex align-items :居中；证明内容：空间环绕；}.title-sel { color : # 24272 c；font-size : 32 rpx显示： flex flex-方向：柱；align-items:居中；}.标题销售。线型{ background : # fffh three : 6rpx宽度： 40 rpx相对位置：边距-top : 10 rpx；}.标题-自选{ color : # 006 bfffont-size : 32 rpx；显示： flex flex-方向：柱；align-items:居中；}.标题-自选。线型{ background : # 006 bffh three : 6 rpx宽度： 90 rpx相对位置：边距-top : 10 rpx；}.swiper { width : 90%；flex : 1；飞越：卷轴；margin: 0 auto}。记录项{ margin-top : 10 rpx；背景-颜色：白色；填充-底部： 5rpx衬垫-顶部： 5rpxfont-size : 30 rpx}.名称{ display : flex justice-content :空格；border: 1px固体# eeepadding: 2vh边框-半径： 10rpx}四、参考官方文档

那么当内容改变时，我们也要改变标签选项卡的状态，这时候我们给swiper来一个bindchange，同样是官方文档