微信小程序【如何用写 scroll-view 一个微信小程序楼梯导航？？】

最新推荐文章于 2022-05-15 17:11:38 发布

昨夜太平长安888

最新推荐文章于 2022-05-15 17:11:38 发布

阅读量499

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/HelloWord176/article/details/107247941

版权

本文介绍了如何在微信小程序中创建一个楼梯导航效果，通过结合wxml、wxss和js文件的设置，实现页面滚动时导航条跟随滚动位置变化的交互体验。

摘要由CSDN通过智能技术生成

先看我们需要的效果：

wxml 页面：

<view class="scroll_box">
<!-- 左边滚动 -->
  <scroll-view class="left_scroll_view" scroll-y="{
  {true}}" scroll-into-view="{
  {navId}}">
    <view id="nav{
  {index + 1}}" class="{
  {current === index ? 'active' : ''}}" bindtap="choseType" data-item="{
  {index}}" wx:for="{
  {100}}" wx:key="index">{
  {item + 1}}</view>
  </scroll-view>

<!-- 右边滚动 -->
<!-- bindscroll 滚动时触发 -->
  <scroll-view class="right_scroll_view" bindscroll="rightScroll" scroll-into-view="{
  {right_view_id}}" scroll-y="