微信小程序wxs实现吸顶效果-创新互联

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟)， 所以使用wxs响应事件来实现吸顶效果。wxs响应事件基础库 2.4.4 开始支持，低版本需做兼容处理。

创新互联建站-专业网站定制、快速模板网站建设、高性价比朔城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式朔城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖朔城地区。费用合理售后完善，十多年实体公司更值得信赖。

附上文档链接：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>

 

本文标题：微信小程序wxs实现吸顶效果-创新互联
本文路径：https://www.cdcxhl.com/article30/pejpo.html

成都网站建设公司_创新互联，为您提供建站公司、网站建设、定制开发、电子商务、企业网站制作、全网营销推广

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联