微信小程序：实现点击全部Tab按钮显示两列网格布局页面

{{navItem}}

.weui-tab__content { padding-top: 0; text-align: center; font-size: 32rpx; } .nav { height: 86rpx; text-align: center; color: #A8A8A8; font-size: 4vw; background-color: #FFF; border-bottom: 1rpx solid #DFDFDF; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 80rpx; white-space: nowrap; position: fixed; top: 0; left: 0; z-index: 99; } .nav-item { width: 22%; display: inline-block; text-align: center; } .nav-item.active { transition: all 0.3s; border-bottom: 10rpx solid #478ff3; color: #478ff3; } .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20rpx; padding: 20rpx; } .grid-item { display: flex; flex-direction: column; align-items: center; } .grid-item image { width: 100%; height: auto; margin-bottom: 10rpx; } .grid-item text { font-size: 28rpx; }

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置 const app = getApp() Page({ data: { navData: ["全部", "美术体育", "托辅/自习", "户外", "生活兴趣", "智体运动", "学前教育", "语言/留学"], currentTab: 0, navScrollLeft: 0, }, onLoad() { wx.getSystemInfo({ success: (res) => { this.setData({ pixelRatio: res.pixelRatio, windowHeight: res.windowHeight, windowWidth: res.windowWidth }) }, }) }, switchNav(event) { var cur = event.currentTarget.dataset.current; //每个tab选项宽度占1/5 var singleNavWidth = this.data.windowWidth / 5; //tab选项居中
this.setData({ navScrollLeft: (cur - 2) * singleNavWidth }) if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } } })