uni - app 新闻项目解析_uniapp新闻列表

1. 首页布局

2. 顶部导航栏

导航栏布局：

        scroll-view 内置标签，配置 scroll-x="true" 左右方向滑动，再删除滑动条

   <!-- 顶部导航条 -->
    <scroll-view scroll-x="true" class="navScroll">
      <view class="item" :class="index==navIndex?'active':''" @click="clickNav(index,item.id)"v-for="(item,index) in navArr" :key="item.id">
        {
  {item.classname}}
      </view>
    </scroll-view>

  // 隐藏滚动条
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

导航栏点击高亮切换：

        v-for 中添加动态 class 判断，根据点击事件传入的 index 值，为选项卡添加上 active 样式实现高亮

<view class="item" :class="index==navIndex?'active':''" @click="clickNav(index,item.id)"
v-for="(item,index) in navArr" :key="item.id"></view>

      clickNav(index, id) {
        // 高亮切换
        this.navIndex = index
      },