先來看效果圖，第一次寫博客............
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 () {
}
})