微信小程序-实现tab选项卡
一、前言
小程序开发中,有很多封装好的控件供开发者使用,但是,很常见的tab选项卡居然没有,只能自己搞一个。
实现原理也很简单,无非是用给view(tab)设置一个点击事件bintap,并且给view(tab)一个data-idx索引,根据当前index来改变tab的状态并决定swiper显示那个内容,改变swiper的内容只需要改变swiper的current就好。
二、效果
三、实现
wxml
<view class='ticket-container'>
<scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}">
<!--Tab布局-->
<view class='title'>
<view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
<text>未使用</text>
<hr class="line-style"/>
</view>
<view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
<text>已使用</text>
<hr class="line-style"/>
</view>
<view class="{{2 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='2'>
<text>已过期</text>
<hr class="line-style" />
</view>
</view>
<!--内容布局-->
<swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
<swiper-item class='swiper'>
<view wx:for="{{firstList}}" 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>
</scroll-view>
</view>
js文件
// pages/mine/mine.js
Page({
/**
* 页面的初始数据
*/
data: {
currentIndex: 0,
"firstList": [{ name: 'w券1', money: '5.00' }, { name: 'w券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: function (e) {
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex
currentPageIndex = (currentPageIndex + 1) % 3
this.setData({
currentIndex: currentPageIndex
})
}
},
//用户点击tab时调用
titleClick: function (e) {
let currentPageIndex =
this.setData({
//拿到当前索引并动态改变
currentIndex: e.currentTarget.dataset.idx
})
}
})
wxss文件
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.title {
width: 100%;
height: 88rpx;
background: white;
display: flex;
align-items: center;
justify-content: space-around;
}
.title-sel {
color: #24272c;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.title-sel .line-style{
background: #fff;
height: 6rpx;
width: 40rpx;
position: relative;
margin-top: 10rpx;
}
.title-sel-selected{
color: #006bff;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.title-sel-selected .line-style{
background: #006bff;
height: 6rpx;
width: 90rpx;
position: relative;
margin-top: 10rpx;
}
.swiper {
width: 90%;
flex: 1;
overflow: scroll;
margin: 0 auto;
}
.record-item {
margin-top: 10rpx;
background-color: white;
padding-bottom: 5rpx;
padding-top: 5rpx;
font-size: 30rpx;
}
.name{
display: flex;
justify-content: space-between;
border: 1px solid #eee;
padding: 2vh;
border-radius: 10rpx
}
四、参考官方文档
那么当内容改变时,我们也要改变tab选项卡的状态,这时候我们给swiper来一个bindchange,同样是官方文档
文章转载:原创
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/660.html)
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/660.html)
- 记录一次nginx故障:recv() failed (104: Connection reset by peer) while reading response header from upstream,
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
- 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)
- thinkjs性能优化之nginx配置
- 开学AI登场!南京高校用人脸识别查考勤管理学生,还敢逃课、玩手机?姚AI变脸热到爆!开源换脸工具FakeSwap今登GitHub排行榜第二位,ICLR飞升,IJCAI降级:清华的新版AI顶会评级引发学术圈热议,意外!已获6700万美元投资的自动驾驶LiDAR创业公司关门了
标签云
图文推荐
“深度学习”这十年:52篇大神级论文再现AI荣与光,12岁上大学、31岁成最年轻IEEE Fellow,前百度总裁张亚勤加盟清华,全球女性福音!DeepHealth深度学习模型检测乳腺癌完胜5名放射科医师,读博无门,就业碰壁,孤独当了7个月“民科”后,我的论文中了顶会Spotlight
saucxs 2020-01-03 10:04:09
1200 万部手机、500 亿实时位置数据,上帝视角还原特朗普全天行踪,自动驾驶玩漂移 斯坦福最新研究:《头文字D》无人车版来了,印度裔又要统领美国科学界?特朗普提名他领导美国国家科学基金会,GitHub排名第一!免费最强“抢票神器”在手,程序员抢票再不用跪求加速包
saucxs 2019-12-25 10:08:05
蝉联AI专业全球冠军!清华力压CMU再夺CSRankings高校AI排行王座,波士顿动力CEO:不排斥军方订单,就想你粗暴地对待机器狗,亚马逊Alexa突然发疯,读着论文教主人自杀:你活着地球人口会过剩,图神经网络的ImageNet?斯坦福大学等开源百万量级OGB基准测试数据集
saucxs 2019-12-24 09:57:45
2020 AAAI Fellow名单出炉!深度学习先驱Bengio和LeCun双双入选,李世石最后一战不敌AI“韩豆”!唯一战胜过AlphaGo的男人正式退役,GAN和PS合体会怎样?东京大学图像增强新研究:无需配对图像,增强效果还可解释,2019年最受关注的100项研究,AI“复活”蒙娜丽莎排第一
saucxs 2019-12-23 09:58:10
这家AI公司用面具破解中国人脸识别系统!微信、支付宝、火车站无一幸免,OpenAI公开Dota 2论文:胜率99.4%,「手术」工具连续迁移训练,9岁神童大学毕业前突然退学,转赴美国攻读电气工程博士,Reddit热议:15岁高中生用神经网络建立生命进化“新宇宙”
saucxs 2019-12-17 09:45:30
友情链接 申请友情链接
- 东方财富
- saucxs博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区