微信小程序--导航吸顶+view锚点
导航栏滑动定位+view锚点
我们在做小程序的时候,难免会遇到页面里面有很长的数据,页面下面又有到导航栏部分;用户希望页面滑动到导航栏的位置,导航栏固定在页面的最上面,同时里面的数变化,也能改变导航栏的高亮。
效果图
图1:
图2:
图3:
实现原理
通过对scroll的监听获取滚动条的scrollTop值;
在导航的下子集class判断距离整个页面Top;
吸顶—position:sticky
WXML
我是用自定义组件来写的
<rui-sticky scroll="{
{curNodes}}" bindstickyscroll="getScrollTop">
<view slot="stickychild">
<view class='flex-row border_b mar-t bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list1</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list2</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list3</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list4</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list5</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list6</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list7</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<view class='flex-row border_b bg_white uinn'>
<view class='flex1 flex-row'>
<view class='s_width1 colorTitle'>list8</view>
<input type='text' class='flex1' value='' disabled='true' />
</view>
</view>
<!-- 导航栏组件 -->
<rui-content navcur='{
{navcur}}' bind:compontpass="compontpass" bind:myevent='myevent'> </rui-content>
</view>
</rui-sticky>
WXSS
//所有的css
.rui-flex-content {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.rui-nav-flex {
background-color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
}
.rui-goods-content {
padding-top: 4vw;
}
.rui-nav-li text {
display: -webkit-flex