程式碼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 }); }})