微信小程序-监听滚动，改变导航样式，点击导航，定位到页面相应为止

哎呦看看

已于 2024-05-09 17:23:20 修改

阅读量164

点赞数 2

文章标签：前端微信小程序

于 2024-05-09 17:21:59 首次发布

本文链接：https://blog.csdn.net/weixin_45468589/article/details/138621874

版权

1.index.wxml页面

<!--头部导航-->
 <view class="nav-box" id="tab-con">
      <scroll-view scroll-x="true" scroll-into-view="{{activeNav}}" show-scrollbar="false">
        <view class="nav-list">
          <button bind:tap="changeActiveNav" id="{{item.value}}" class="{{activeNav===item.value?'active':''}}" wx:for="{{navList}}" wx:key="value" data-value="{{item.value}}">{{item.label}}</button>
        </view>
      </scroll-view>
    </view>
  </view>

<!--页面内容-->
  <view>
    <scroll-view scroll-y="true" class="tabBox" scroll-into-view="{{active_index}}" bindscroll="scroll" bindscrolltolower="bottom" scroll-with-animation="true" inertia="true" show-scrollbar="false" >
      <view class="basic-box default-box" id="basicData">
        <view class="title-box">基本信息</view>
        <view>
          </view>
        </view>
      </view>
      <view>
        <view class="default-box" id="legal">
          <view class="title-box">法律主体</view>
          
        </view>
        <view class="default-box" id="class">
         ....
        </view>
       
        </view>
      </view>
    </scroll-view>
  </view>

2.index.js 页面内容

通过block,判断是否点击了导航，如果点击则延时加载滚动

import {
  postPatentDetail
} from '../../../service/patent.js'
Page({
  data: {
    block: false,
//导航列表
    navList: [{
        label: '基本信息',
        value: 'basicData'
      },
      {
        label: '法律主体',
        value: 'legal'
      },
      {
        label: '商标分类',
        value: 'class'
      },
      {
        label: '优先权',
        value: 'priority'
      },
      {
        label: '流程信息',
        value: 'process'
      }
    ],
    activeNav: 'basicData',
  },
//点击导航
  changeActiveNav(e) {
    this.setActiveNav(e.target.dataset.value)
  },
  setActiveNav(val) {
    this.setData({
      activeNav: val,
      active_index: val,
      block: true
    })
    setTimeout(() => this.setData({block: false}), 1000);
  },
//页面加载时，获取导航对应组件的位置 top
 onReady() {
    wx.createSelectorQuery().selectAll('.default-box').boundingClientRect(results => {
      results.forEach((rect,index) => {
        let key = 'navList['+index+'].top';
        this.setData({
          [key]: rect.top
        });
      });
    }).exec();
  },
//scroll-view组件滚动绑定的方法
  scroll(e) {
    this.data.block ||this.data.navList.some((v, k) => {
      if (v.top > e.detail.scrollTop+120) {
        if (this.data.navList[k+1] && this.data.navList[k+1].top > e.detail.scrollTop) {
          this.setData({
            activeNav: v.value,
          });
          return true;
        }
      }
    })
  },
//scroll-view组件滚动到底部触发的方法
  bottom(e) {
    this.data.block ||this.setData({activeNav:'process',block:true});
    setTimeout(() => this.setData({block: false}), 1000);
    }
})