一、效果图
二、代码
复制代码
var app = getApp(),
_this
Page({
data: {
navData: [{
id: 0,
cat_name: ‘全部’
}, ],
currentTab: 0,
navScrollLeft: 0,
lists: []
},
init() {
isEnd = false, page = 1
_this.setData({
lists: []
})
},
onLoad(options) {
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
_this = this;
//获取所有的分类
_this.getCategory()
},
getCategory() {
app.util.request({
showLoading: false,
url: app.util.url(‘entry/wxapp/category’),
success(res) {
_this.setData({
navData: _this.data.navData.concat(res.data.data)
})
},
})
},
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
})
}
}
})
复制代码
复制代码
{
{navItem.cat_name}}
复制代码
复制代码
.nav {
height: 100rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 100rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background-color: #fff;
}
.nav-item {
width: 20%;
display: inline-block;
text-align: center;
color: #333;
overflow: hidden;
}
.nav-item.active{
color: #09bb07;
}