微信小程序：视图容器scroll-view实现滚动导航栏

傷城~ 2023-06-13 15:24 6阅读 0赞

### 前言 ###

最近在研究小程序，看到了视图容器组件“scroll-view”，它是可滚动视图区域的组件，支持横向滚动和纵向滚动。刚好看到CSDN的手机端，看到了顶部的滚动导航栏。不清楚app的滚动导航是怎么实现的，一时兴起，就做了个微信小程序的滚动导航。

### 编码实战 ###

因为实现这个滚动导航栏还是很简单的，所以我就直接贴上代码了，再进行部分讲解。  
首先是页面的代码：

<scroll-view scroll-x="true" scroll-left="{ {scrollLeft}}" class="scroll">
      <block wx:for="{ {scrollData}}" wx:for-index="index" wx:key="key">
        <view class="scroll-item { {currentIndex == index ? 'active' : ''}}" data-current="{ {index}}" bindtap="switchIndexTap">{
       {item.text}}</view>
      </block>
    </scroll-view>

scroll-view这个就是主要的标签，后面都是属性。scroll-x表示横向滚动，当然也是有纵向滚动的“scroll-y”，scroll-left表示设置滚动条的位置。  
block这个标签不做任何页面渲染，只是一个包装元素。wx:for和平时使用vue中的v-for是一样的，都是对数据做循环遍历。后面的属性就是索引。  
view和html中的div差不多。后面使用了三元运算符。还添加了点击事件。

下面给出样式的代码：

.scroll { 
      position: fixed;
      top: 0;
      left: 0;
      height: 80rpx;
      width: 100%;
      line-height: 80rpx;
      overflow: hidden;
      white-space: nowrap;
      font-size: 35rpx;
      z-index: 99;
    }
    .scroll-item{ 
      display: inline-block;
      width: 20%;
      text-align: center;
    }
    
    .active{ 
      color: red;
    }

其中最重要的样式就是“white-space: nowrap”，它规定段落中的文本不进行换行。  
样式就是这么一点。最后就是js了。

/** * 页面的初始数据 */
      data: { 
        scrollData: [{ 
            text: '推荐'
          },
          { 
            text: '动态'
          },
          { 
            text: 'Java'
          },
          { 
            text: '物联网'
          },
          { 
            text: 'Python'
          },
          { 
            text: '前端'
          },
          { 
            text: '架构'
          },
          { 
            text: '区块链'
          },
          { 
            text: '小程序'
          },
        ],
        scrollLeft: 0,
        currentIndex: 0
      },
      //点击事件
      switchIndexTap: function(e) { 
        let curr = e.currentTarget.dataset.current;
        //对索引进行处理，点击实现点击的元素位于中间，则以中间为起点
    
        //获取每一项的宽度
        let singleWidth = this.data.windowWidth / 5;
        this.setData({ 
          scrollLeft: (curr - 2) * singleWidth
        });
        console.info(this.data.scrollLeft);
        if (this.data.currentIndex == curr) { 
          return false;
        } else { 
          this.setData({ 
            currentIndex: curr
          });
        }
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function(options) { 
        let _this = this;
        // 获取屏幕的总宽度
        wx.getSystemInfo({ 
          success: function(res) { 
            _this.setData({ 
              windowWidth: res.windowWidth
            });
          },
        })
      },

data里面就是需要展示的数据以及某些数据的初始化。switchIndexTap这个就是每一个导航条的点击事件。主要为了实现，每次点击其余的导航条，都能让当前选中的，位于屏幕的中间。因此需要使用js来控制。  
![aHR0cHM6Ly9tLnFmY3d4LnRvcC8lRTUlQkUlQUUlRTQlQkYlQTElRTUlQjAlOEYlRTclQTglOEIlRTUlQkElOEYvMi5naWY][]

到这里基本上就结束了，代码也很短，而且上面也有相应的注释。如果有需要的读者，可以建个项目，进行测试，这样更加便于理解。

> 其实美丽的故事都是没有结局的，只因为它没有结局所以才会美丽。

[aHR0cHM6Ly9tLnFmY3d4LnRvcC8lRTUlQkUlQUUlRTQlQkYlQTElRTUlQjAlOEYlRTclQTglOEIlRTUlQkElOEYvMi5naWY]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tLnFmY3d4LnRvcC8lRTUlQkUlQUUlRTQlQkYlQTElRTUlQjAlOEYlRTclQTglOEIlRTUlQkElOEYvMi5naWY