做过 android 的都知道在 android 里面实现 Tab切换 非常简单,使用 android 提供的 TabLayout+ViewPager 很容器就实现了 Tab切换 的效果。 但是小程序中是没有提供类似可以直接使用的组件,因此想要实现此功能需要我们自己去编码实现。在上一篇文章中我提到的小程序练手项目就实现了 Tab切换 效果,具体效果图可以参考文章微信小程序入门项目。 实现思路翻看小程序的文档可以发现,微信为我们提供了一个 swiper 组件,通过该组件可以实现 view 的滑动切换,它的功能与 android 中的 ViewPager 是类似的。因此实现 Tab切换 现在只需要实现头部的 Tabbar 即可,对于该功能我们可以采用多个横向排列的 view 组件构成一个 Tabbar ,每个 view 组件作为一个 Tab 项,然后再将其点击事件与 swiper 进行关联即可实现 Tab的点击和滑动切换功能。而对于 Tabbar 的当前 Tab 项下面的指示器我们可以采用 border-bottom 样式实现,也可以单独使用一个 view 组件作为指示器,我这里采用的是第二种方式实现指示器。 代码实现代码如下: 页面布局代码<viewclass="page"> <viewclass="navbar"> <blockwx:for="{{tabs}}"wx:key="*this"> <viewid="{{index}}"class="navbar__item {{activeIndex == index ? 'navbar__item_on' : ''}}"bindtap="navTabClick"> <viewclass="navbar__title">{{item.name}}</view> </view> </block> <viewclass="navbar__slider"style="width: {{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view> </view> <viewstyle="position: absolute;top: 68rpx;width: 100%;height:{{contentHeight}}px"> <swipercurrent="{{activeIndex}}"duration="300"bindchange="bindChange"> <swiper-item> <view>热门视频</view> </swiper-item> <swiper-item> <view>比赛集锦</view> </swiper-item> <swiper-item> <view>你懂专栏</view> </swiper-item> <swiper-item> <view>天下足球</view> </swiper-item> </swiper> </view> </view> 布局样式代码view , page { padding: 0px; margin: 0px; } .page { height: 100%; } .navbar { display: flex; position: absolute; z-index: 500; top: 0; width: 100%; } .navbar__item { position: relative; display: block; flex: 1; padding: 10rpx 0; text-align: center; font-size: 0; height: 48rpx; line-height: 48rpx; <!-- NavBar的总高度为:height + padding-top + padding-bottom = 68rpx --> } .navbar__item_on { color: #16B13A; } .navbar__slider { position: absolute; display: block; content: " "; left: 0; bottom: 0; height: 3px; background-color: #16B13A; transition: transform .3s; } .navbar__title{ display: inline-block; font-size: 15px; max-width: 8em; text-align: center; } swiper { height: 100%; } swiper-item{ width: 100%; padding-top: 20rpx; text-align: center; } js代码var tabs = [ { name: "热门视频" }, { name: "比赛集锦" }, { name: "你懂专栏" }, { name: "天下足球" } ]; Page({ /** * 页面的初始数据 */ data: { tabs: tabs, //展示的数据 slideOffset: 0,//指示器每次移动的距离 activeIndex: 0,//当前展示的Tab项索引 sliderWidth: 96,//指示器的宽度,计算得到 contentHeight: 0//页面除去头部Tabbar后,内容区的总高度,计算得到 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options){ var that = this; wx.getSystemInfo({ success: function(res){ that.setData({ //计算相关宽度 sliderWidth: res.windowWidth / that.data.tabs.length, sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex, contentHeight: res.windowHeight - res.windowWidth / 750 * 68//计算内容区高度,rpx -> px计算 }); } }); }, bindChange: function(e){ var current = e.detail.current; this.setData({ activeIndex: current, sliderOffset: this.data.sliderWidth * current }); console.log("bindChange:" + current); }, navTabClick: function(e){ this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: e.currentTarget.id }); console.log("navTabClick:" + e.currentTarget.id); } }) 总结上面的布局代码和js代码其实写起来都不难,关键在于css样式的编写,对于不熟悉CSS的人来说调样式太痛苦了。这个效果也是我调了好半天,参考了好多代码之后写出来的,真o(╯□╰)o,看来想写好小程序还得好好学学CSS样式。 |
老胡--足球视频小程序开发之Tab切换
发布:2018-04-21 10:00浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08