实现类似APP的效果，上拉到一定位置后分类菜单显示，且点击菜单会锚点滚动到对应位置
前端index.wxml页面
<view class="swiper">
</view>
<view class="top">
<view class="sign" bindtap="clickCate" data-cate="1">分类1</view>
<view class="sign" bindtap="clickCate" data-cate="2">分类2</view>
<view class="sign" bindtap="clickCate" data-cate="3">分类3</view>
<view class="sign" bindtap="clickCate" data-cate="4">分类4</view>
<view class="sign" bindtap="clickCate" data-cate="5">分类5</view>
<view class="sign" bindtap="clickCate" data-cate="6">分类6</view>
<view class="sign" bindtap="clickCate" data-cate="7">分类7</view>
<view class="sign" bindtap="clickCate" data-cate="8">分类8</view>
</view>
<view class="{{isShowHeadCate>=365 ? 'shownav' : 'hidenav'}}">
<scroll-view scroll-x="true" scroll-with-animation="true" class="middle" scroll-into-view="{{toView}}">
<view id="demo1" class="cate" bindtap="clickCate" data-cate="1">分类a</view>
<view id="demo2" class="cate" bindtap="clickCate" data-cate="2">分类b</view>
<view id="demo3" class="cate" bindtap="clickCate" data-cate="3">分类c</view>
<view id="demo4" class="cate" bindtap="clickCate" data-cate="4">分类d</view>
<view id="demo5" class="cate" bindtap="clickCate" data-cate="5">分类e</view>
<view id="demo6" class="cate" bindtap="clickCate" data-cate="6">分类f</view>
<view id="demo7" class="cate" bindtap="clickCate" data-cate="7">分类g</view>
<view id="demo8" class="cate" bindtap="clickCate" data-cate="8">分类h</view>
</scroll-view>
</view>
<view class="bottom">
<view id="detail1" class="content">111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊111啊啊啊</view>
<view id="detail2" class="content">22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不22222不不不</view>
<view id="detail3" class="content">333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次333从此次</view>
<view id="detail4" class="content">444对对对444对对对444对对对444对对对444对对对444对对对444对对对444对对对444对对对444对对对</view>
<view id="detail5" class="content">555发发发555发发发555发发发555发发发555发发发555发发发555发发发555发发发555发发发555发发发555发发发</view>
<view id="detail6" class="content">666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚666滚滚滚</view>
<view id="detail7" class="content">777哈哈哈777哈哈哈777哈哈哈777哈哈哈777哈哈哈777哈哈哈777哈哈哈777哈哈哈</view>
<view id="detail8" class="content">888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐888叫姐姐</view>
</view>css的index.wxss文件
.page-section-spacing{
margin-top: 60rpx;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 300rpx;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 300rpx;
}
.top{
display: flex;
align-content: center;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
.sign{
width: 22%;
height: 0;
padding: 10% 0;
margin:10px 1%;
display: flex;
background:cyan;
align-content: center;
align-items: center;
justify-content: center;
}
.middle{
white-space: nowrap;
}
.cate{
display: inline-block;
width: 20%;
text-align: center;
background:white;
}
.content{
border-top: 1px solid orchid;
}
.swiper{
background: green;
width: 100%;
height: 200px;
}
.shownav{
position: fixed;
width: 100%;
visibility: visible;
top: 0;
background:white;
z-index: 100;
-webkit-overflow-scrolling: touch;
}
.hidenav{
width: 100%;
position: fixed;
visibility: hidden;
top: 0;
}主要的index.js代码
Page({
onLoad: function () {
this.getAllRects()
},
onShareAppMessage() {
return {
title: 'scroll-view',
path: 'page/component/pages/scroll-view/scroll-view'
}
},
data: {
isShowHeadCate:0,
toView: '',
windowScroll: 0,
allContArr: [],
activeCateIndex: 1,
isScrolling: 0,
timer: 0, // 定时器,防止点击锚点的同时也触发页面滚动事件
},
clickCate(ev){
var cate = ev.currentTarget.dataset.cate
this.setData({
toView: 'demo' + cate
})
var that = this;
var query = wx.createSelectorQuery()
query.select('#detail'+cate).boundingClientRect(function (res) {
wx.pageScrollTo({
scrollTop: res.top-22+that.data.windowScroll,
duration: 500
});
}).exec()
this.data.isScrolling = 1
if(this.data.timer){
clearInterval(this.data.timer)
}
this.data.timer = setTimeout(function(){
that.data.isScrolling = 0
},800)
},
onPageScroll(e) {
this.data.windowScroll = e.scrollTop
var j = 0
for (let i = 0; i < this.data.allContArr.length; i++) {
if(i == 0){
if(e.scrollTop >= this.data.allContArr[0]-22){
this.setData({
isShowHeadCate: this.data.allContArr[0]
})
}else if(e.scrollTop < this.data.allContArr[0]){
this.setData({
isShowHeadCate: 0
})
}
}
if(e.scrollTop > this.data.allContArr[i] - 22){
j++
}
}
if(j != this.data.activeCateIndex && !this.data.isScrolling){
console.log(j)
this.setData({
toView: 'demo' + j,
activeCateIndex: j
})
}
},
getAllRects () {
var _that = this
wx.createSelectorQuery().selectAll('.content').boundingClientRect(function(rects){
rects.forEach(function(rect){
_that.data.allContArr.push(rect.top)
})
}).exec()
}
})