微信小程序滑动，点击居中导航栏

最新推荐文章于 2024-03-18 15:27:24 发布

原创

最新推荐文章于 2024-03-18 15:27:24 发布 · 473 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文档展示了如何在微信小程序中利用`<scroll-view>`组件实现水平滚动导航栏，并根据选中项调整滚动位置。通过监听用户点击事件，计算并设置`navScrollLeft`属性来平滑滚动到对应导航项。同时，代码中涉及到屏幕宽度的获取以及不同选项对应的偏移量计算，确保了导航栏的动态效果。

wxml

<scroll-view scroll-x="true" class="nav" scroll-left="{
  
  {navScrollLeft}}" scroll-with-animation="{
  
  {true}}">
    <block wx:for="{
  
  {packInfo.packTypes}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
      <view class="nav-item {
  
  {idx == typeIndex ?'active':''}}" data-index="{
  
  {idx}}" bindtap="switchNav">{
  
  {navItem.name}}</view>
    </block>
</scroll-view>

 */
  data: {
    packInfo:[],
    // 类型下标
    typeIndex: 0,   
    navScrollLeft: 0, 
  },
  
  switchNav(event) {
    console.log('switchNav-windowWidth=' + this.data.windowWidth)
    var index = event.currentTarget.dataset.index;
    console.log('index=' + index)

    //每个tab选项宽度占1/5
    if(index=