【微信小程序】在scroll-view中显示导航条

1. 首先，在scroll-view外部创建一个导航条的view元素，设置其样式和位置，例如：

<view class="nav-bar">
  
view>

2. 在导航条的view元素中添加导航项，可以使用wx:for遍历数据列表，并使用wx:key指定一个唯一的键值：

<view class="nav-bar">
  <view 
    class="nav-item"
    wx:for="{{dataList}}"
    wx:key="index"
    data-index="{{index}}"
    bindtap="scrollToTop">
    {{item}}
  view>
view>

使用wx:for遍历dataList数组，并为每个导航项添加了一个点击事件bindtap，以及一个data-index属性来存储索引值。

3. 在对应的Page的JS脚本中，定义scrollToTop事件处理函数，用于处理导航项点击事件，使其滚动到对应的位置：

Page({
  scrollToTop: function(e) {
    const index = e.currentTarget.dataset.index;
    const query = wx.createSelectorQuery();
    query.selectAll('.list-item').boundingClientRect();
    query.exec(function(res) {
      const top = res[0][index].top;
      wx.pageScrollTo({
        scrollTop: top,
        duration: 300
      });
    });
  }
})

在scrollToTop事件处理函数中，我们首先获取点击的导航项的索引值，然后使用wx.createSelectorQuery()创建查询实例，通过selectAll('.list-item')选择所有的.list-item元素，并使用boundingClientRect()获取它们的位置信息。

最后，使用wx.pageScrollTo()将页面滚动到点击的导航项对应的位置。

需要注意的是，为了让滚动条生效，需要保证scroll-view组件的scroll-view的高度要小于内容区域的高度。

样式文件以及布局设计

当涉及到样式文件时，可以使用CSS或者WXSS来定义样式。下面是一个示例的样式文件，用于给scroll-view和导航条添加一些样式：

/* 在样式文件中定义样式 */

/* scroll-view样式 */
.scroll-view {
  height: 400rpx;
  overflow-y: scroll;
}

/* 导航条样式 */
.nav-bar {
  display: flex;
  justify-content: space-around;
  height: 50rpx;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

.nav-item {
  flex: 1;
  line-height: 50rpx;
  text-align: center;
  font-size: 16rpx;
  color: #333;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

在上述示例中，我们定义了两个样式类：.scroll-view和.nav-bar，以及.nav-item的样式。

接下来，让我们看一个完整的scroll-view和导航条的例子：

<view class="container">
  <view class="nav-bar">
    <view class="nav-item" wx:for="{{dataList}}" wx:key="index" data-index="{{index}}" bindtap="scrollToTop">
      {{item}}
    view>
  view>

  <scroll-view class="scroll-view" scroll-y>
    <view class="content">
      <view class="list-item" wx:for="{{dataList}}" wx:key="index">{{item}}view>
    view>
  scroll-view>
view>

在上述示例中，我们首先创建了一个名为.container的外部容器。

在.container中，我们放置了一个.nav-bar作为导航条，并使用wx:for遍历dataList数组，为每个导航项添加了一个点击事件bindtap和一个data-index属性。

接下来，我们放置了一个.scroll-view作为滚动区域，并设置了一个.content作为滚动区域的内容。

在.content中，我们使用wx:for遍历dataList数组，为每个列表项添加了一个.list-item的样式。

请注意，上述示例中的样式类名需要与样式文件中的样式类名匹配。