在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果。wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理。
附上文档链接:wxs响应事件
吸顶效果
使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在顶部,反之,导航取消定位。
<!-- wxml文件 -->
<wxs module="scroll1" src="./scroll1.wxs"></wxs> <!-- 引入wxs文件 -->
<scroll-view bindscroll="{
{scroll1.scrollEvent}}" data-top="{
{navTop}}" style='height:100%;' scroll-y>
<image src='/images/top_image.png' mode='aspectFill' class='nav-image'></image>
<view class='navigation'>
<view wx:for="{
{navBarList}}" wx:key="">{
{item}}</view>
</view>
<view class='div' wx:for="{
{8}}" wx:key="">第{
{index}}部分</view>
</scroll-view>
/* wxss文件 */
page{
font-size: 30rpx;
background: #fea;
height: 100%;