小程序tab切换

代码html

css代码
page{ background-color: #f4f4f4;}.page { height: 100%;}.box{ width: 100%; height: 80rpx; background: #59b550; position: relative}.box{ width: 100%; height: 80rpx; background: #59b550; position: relative}.box text{ line-height: 80rpx; color: white; font-size: 38rpx; position: absolute; left: 50%; margin-left: -88rpx;}.navbar { display: flex; position: absolute; top: 82rpx; z-index: 500; width: 100%; height:200rpx; background:#fff;}.navbar__item { position: relative; display: block; flex: 1; padding: 10rpx 0; text-align: center; font-size: 0; height:120rpx; line-height:120rpx;}.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;}.navbar__titl{ display: inline-block; font-size: 15px; width: 15rpx; height:15rpx; text-align: center; background: red; border-radius: 50%; position: absolute; top:54rpx; right:108rpx;}.navbar__title1{ display: inline-block; font-size: 48rpx; max-width: 8em; text-align: center; position: absolute; top: 73rpx; left: 168rpx;}swiper { height: 100%;}swiper-item{ width: 100%; padding-top: 20rpx; text-align: center;}

js 代码
var tabs = [ { name: “个人消息”, title: “3”, tit: “”//未读信息红点 }, { name: “系统消息”, title: “10”, tit: “” //未读信息红点 }];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 }); }, navTabClick: function (e) { this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: e.currentTarget.id }); }})