先来看效果图，第一次写博客............
1.首先是wxml页面
<!-- 分类导航 -->
<view class='nav_fl'>
<view wx:for="{{goodlist}}" data-index="{{index}}" data-id="b{{index}}" bindtap='tap'>{{item.name}}
<text class='{{index==navActive?"navactive":""}}'>---</text>
</view>
</view>
<view style='clear:both;'></view>
<!-- 滚动部分 -->
<scroll-view class='scrollView' scroll-y="true" scroll-into-view="{{toView}}" style='height:{{height}}rpx;' bindscroll="scroll" scroll-with-animation='true'>
<view wx:for="{{goodlist}}" wx:for-index="indexOut" id="b{{indexOut}}">
<view class='listImg'>
<image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
<text>已售：200</text>
</view>
<view class='listName'>{{item.title}}</view>
<view class='listId'>{{item.desc}}</view>
<view class='listImg'>
<image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
<text>库存：300</text>
</view>
<view class='listName'>{{item.title}}</view>
<view class='listId'>{{item.desc}}</view>
<view class='listImg'>
<image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
<text>预约：100</text>
</view>
<view class='listName'>{{item.title}}</view>
<view class='listId'>{{item.desc}}</view>
</view>
</scroll-view>
图片部分就自己出个边框就好啦
2.css 这里写的很简单 美化界面可以自己写哈
.nav_fl{
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
}
.navactive{
width: 60px;
height: 1px;
color:orange;
}
3.重要的js来啦
// pages/scroll/scroll.js
Page({
/**
* 页面的初始数据
*/
data: {
goodlist: [{ name: "水果", title: "水果", desc: "aa", img: "/images/photo13.jpg" }, { name: "早餐", title: "早餐", desc: "aa", img: "/images/photo13.jpg" }, { name: "午餐", title: "午餐", desc: "aa", img: "/images/photo13.jpg" }, { name: "晚餐", title: "晚餐", desc: "aa", img: "/images/photo13.jpg" },]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//设置商品列表高度
wx.getSystemInfo({
success: function (res) {
that.setData({
// height:1140
height: res.windowHeight*2-60,
})
},
});
},
tap: function (e) {
console.log(e);
var id = e.currentTarget.dataset.id;
var index = e.currentTarget.dataset.index;
this.setData({
toView: id,
navActive: index
});
},
//首先要获取部分内容距离顶部的高度，滑动的时候监听高度是否到达对应位置；
// 获取商品列表，生成高度集合
// 页面滑动到相应位置 对应导航提示
scroll: function(e) {
console.log(e);
var that = this;
var height = 0;
var number = 0
var hightArr = [];
for (var i = 0; i < that.data.goodlist.length; i++) { //这里的goodlist指对应商品集合
//获取元素所在位置
wx.createSelectorQuery().select('#b' + i).boundingClientRect(function (rect) {
number = rect.height + number;
hightArr.push(number);
that.setData({
hightArr: hightArr
})
}).exec();
console.log(that.data.hightArr);
};
console.log(e.detail.scrollTop);
var scrollTop = e.detail.scrollTop;
var scrollArr = that.data.hightArr;
for (var i = 0; i < scrollArr.length; i++) {
if (scrollTop >= 0 && scrollTop < scrollArr[0]) {
console.log("第一个啊");
if (0 != this.data.lastActive) {
this.setData({
navActive: 0,
lastActive: 0
})
}
} else if (scrollTop >= scrollArr[i - 1] && scrollTop <= scrollArr[i]) {
console.log("这是第"+i+"个");
if (i != this.data.lastActive) {
this.setData({
navActive: i,
lastActive: i
})
}
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})