<view class="small_nav {{tabFixed?‘small_navFix‘:‘‘}}" id="tab-con">
<scroll-view scroll-x="true" scroll-left="{{scrollLeft}}">
<view class="small_nav_scroll">
<view class="{{id==‘‘?‘cur‘:‘ ‘}}" data-id="" bindtap="switchNav">全部</view>
<view class="{{id==item.categoryId?‘cur‘:‘ ‘}}" wx:for="{{typeList}}" wx:key="index" data-id="{{item.categoryId}}" data-index="{{index}}" bindtap="switchNav">{{item.categoryName}}</view>
</view>
</scroll-view>
</view>
<view style="height:3000rpx;">
这是内容
</view>
.small_nav{width:100%; background: #fff; font-size: 26rpx;margin-bottom:20rpx;}
.small_nav_scroll{ display: flex; height:80rpx;line-height:80rpx; flex-direction: column; flex-wrap: wrap; }
.small_nav_scroll>view{ padding:0 5rpx; margin:0 25rpx;text-align: center; position:relative;}
.small_nav_scroll>view.cur{ color:#000;}
.small_nav_scroll>view.cur:after{content: " ";position: absolute;left:0; bottom:0; width:100%;height:5rpx; background: #36ccf9}
.small_navFix{width:100%;height:auto; position: fixed;top:0; left:0; z-index: 20}
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
scrollLeft: 0,
id: "",
typeList: [
{
categoryId: 1,
categoryName: "分类1"
},
{
categoryId: 2,
categoryName: "分类2"
},
{
categoryId: 3,
categoryName: "分类3"
},
{
categoryId: 4,
categoryName: "分类4"
},
{
categoryId: 5,
categoryName: "分类5"
},
{
categoryId: 6,
categoryName: "分类6"
},
{
categoryId: 7,
categoryName: "分类7"
},
{
categoryId: 8,
categoryName: "分类8"
},
{
categoryId: 9,
categoryName: "分类9"
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var that = this;
var query = wx.createSelectorQuery()
query.select(‘#tab-con‘).boundingClientRect(function (res) {
that.setData({
tabScrollTop: res.top + 100 //根据实际需求加减值
})
}).exec()
},
onPageScroll: function (e) { // 获取滚动条当前位置
if (e.scrollTop > this.data.tabScrollTop) {
this.setData({
tabFixed: true
})
} else {
this.setData({
tabFixed: false
})
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//切换产品类别
switchNav: function (e) {
const { offsetLeft } = e.currentTarget;
const { id, index } = e.currentTarget.dataset;
var clientX = e.detail.x;
if (this.data.id == e.currentTarget.dataset.id) {
return false;
}
if (clientX < 60) {
this.setData({
scrollLeft: offsetLeft - 60
});
} else if (clientX > 330) {
this.setData({
scrollLeft: offsetLeft
});
}
this.setData({
id: id
});
},
})
原文地址：https://www.cnblogs.com/xiao-ling-zi/p/9512031.html
时间： 2024-10-08 01:22:19