33-window-top吸顶效果、页面跳转与详情页

uniapp内置css变量 window-top吸顶效果

现在的效果是顶部导航栏会随着页面滚动后被隐藏

    position: fixed;
    top: 0;
    left: 0;

加上这三句定位，

<!-- scoped:说明这是局部样式 -->
<style lang="scss" scoped>
  .navScroll {
    height: 100rpx;
    background: #f7f8fa;
    // 这一句是使元素不换行,一旦换行了就显示不全
    // 又因为有行高,他没法两行显示,有一些就被隐藏了
    // 加了这一行才能让多出来的小盒子能滑动显示
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    // 去除导航栏横向滚动条
    	// /deep/ ::-webkit-scrollbar {
    	// 		width: 4px !important;
    	// 		height: 1px !important;
     //      overflow: auto !important;
    	// 		background: transparent !important;
     //      -webkit-appearance: auto !important;
    	// 		display: block;
    	// 	}
      // 去除滚动条
      		::-webkit-scrollbar {
      			display: none;
      			width: 0 !important;
      			height: 0 !important;
      			-webkit-appearance: none;
      			background: transparent;
      			color: transparent;
      		}

    .item {
      font-size: 40rpx;
      // 使导航栏的每一个小盒子在一行显示
      display: inline-block;
      // 加行高
      line-height: 100rpx;
      // 给每个小盒子加一个padding,上下0 左右30rpx
      padding: 0 30rpx;
      color: #333;
    }
  }
  
  .content {
    padding: 30rpx;
    .row {
      border-bottom: 1px solid #efefef;
      padding: 20rpx 0;
    }
  }
</style>

现在小程序可以了，但是h5的到导航栏被页面标题遮住了

H5端的滑动导航栏不是不存在，而是被青年帮新闻这个title盖住了，只剩一小条灰色的部分还显示出来

在小程序端就是正常的，上下滑动页面，不会遮蔽滑动导航栏

这个原因是H5是整个页面是一个整体，固定定位的top值是以页面顶部为准的，所以就被盖住了

而小程序中上面标题栏是系统自带的，所以top值是从标题栏最下沿开始算起的，所以不会被遮盖

uniapp文档在css语法--css变量部分，用了--window-top解决这个问题,--window-top是一个变量

top: var(--window-top);

写法如下：

<!-- scoped:说明这是局部样式 -->
<style lang="scss" scoped>
  .navScroll {
    height: 100rpx;
    background: #f7f8fa;
    // 这一句是使元素不换行,一旦换行了就显示不全
    // 又因为有行高,他没法两行显示,有一些就被隐藏了
    // 加了这一行才能让多出来的小盒子能滑动显示
    white-space: nowrap;
    position: fixed;
    top: var(--window-top);
    left: 0;
    // 去除导航栏横向滚动条
    	// /deep/ ::-webkit-scrollbar {
    	// 		width: 4px !important;
    	// 		height: 1px !important;
     //      overflow: auto !important;
    	// 		background: transparent !important;
     //      -webkit-appearance: auto !important;
    	// 		display: block;
    	// 	}
      // 去除导航栏横向滚动条
      		::-webkit-scrollbar {
      			display: none;
      			width: 0 !important;
      			height: 0 !important;
      			-webkit-appearance: none;
      			background: transparent;
      			color: transparent;
      		}

    .item {
      font-size: 40rpx;
      // 使导航栏的每一个小盒子在一行显示
      display: inline-block;
      // 加行高
      line-height: 100rpx;
      // 给每个小盒子加一个padding,上下0 左右30rpx
      padding: 0 30rpx;
      color: #333;
    }
  }
  
  .content {
    padding: 30rpx;
    .row {
      border-bottom: 1px solid #efefef;
      padding: 20rpx 0;
    }
  }
</style>

在H5端可行了，小程序端也没有变化

还有一个问题是滑动导航栏会被上下滑动的新闻挡住，这是在Z轴方向的堆叠问题，下面的新闻权重高过了滑动导航栏，给滑动导航栏一个属性z-index: 10，提高他的权重到10，就能解决这个问题

<!-- scoped:说明这是局部样式 -->
<style lang="scss" scoped>
  .navScroll {
    height: 100rpx;
    background: #f7f8fa;
    // 这一句是使元素不换行,一旦换行了就显示不全
    // 又因为有行高,他没法两行显示,有一些就被隐藏了
    // 加了这一行才能让多出来的小盒子能滑动显示
    white-space: nowrap;
    position: fixed;
    top: var(--window-top);
    left: 0;
    z-index: 10;
    // 去除导航栏横向滚动条
    	// /deep/ ::-webkit-scrollbar {
    	// 		width: 4px !important;
    	// 		height: 1px !important;
     //      overflow: auto !important;
    	// 		background: transparent !important;
     //      -webkit-appearance: auto !important;
    	// 		display: block;
    	// 	}
      // 去除滚动条
      		::-webkit-scrollbar {
      			display: none;
      			width: 0 !important;
      			height: 0 !important;
      			-webkit-appearance: none;
      			background: transparent;
      			color: transparent;
      		}

    .item {
      font-size: 40rpx;
      // 使导航栏的每一个小盒子在一行显示
      display: inline-block;
      // 加行高
      line-height: 100rpx;
      // 给每个小盒子加一个padding,上下0 左右30rpx
      padding: 0 30rpx;
      color: #333;
    }
  }
  
  .content {
    padding: 30rpx;
    .row {
      border-bottom: 1px solid #efefef;
      padding: 20rpx 0;
    }
  }
</style>

加了z-index：10后，下面的新闻不会遮挡上面的滑动导航栏了

还有一个问题，也是这个定位引起的，因为现在不是从页面顶部开始算定位的top值，而是从title栏下方开始算，这样，最上面一条新闻上半截又被滑动导航栏遮住了，第一条的标题都被盖住了

之前写的导航栏高度是100,每一条新闻的高度是30，所以要给内容这一栏的高度设成130rpx

  .content {
    padding: 30rpx;
    padding-top: 130rpx;
    .row {
      border-bottom: 1px solid #efefef;
      padding: 20rpx 0;
    }
  }

现在其实还是有一个问题，滑动的时候，组件离上面又有了几十像素的空隙，没有完全吸顶，视频里没有解决这个问题，如果改成95，实际刚刚好

改成95之后，刚好实现吸顶效果

给导航栏每一项添加点击事件

在添加点击事件后，还要再加一个类名，用来判断如果两个类名头十位true，就表示这一项被选中，使他高亮显示

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item active" v-for="item in arr" @click="clickNav">国内</view>
      </scroll-view>

    <view class="content">
      <view class="row" v-for="item in newsList">
        <newsStyle></newsStyle>
      </view>
    </view>
	</view>
</template>


    .item {
      font-size: 40rpx;
      // 使导航栏的每一个小盒子在一行显示
      display: inline-block;
      // 加行高
      line-height: 100rpx;
      // 给每个小盒子加一个padding,上下0 左右30rpx
      padding: 0 30rpx;
      color: #333;
      // 给带有active值的选项高亮
      &.active {
        color: #31c27c;
      }
    }

现在只写了一个点击事件，还没有写方法，然后每一项也高亮了，接下来，就是用判断来决定，到底哪一项高亮显示，就需要拿到被点击项的索引值

<scroll-view scroll-x class="navScroll">
  <view class="item active" v-for="(item, index) in arr" @click="clickNav">国内</view>
</scroll-view>

判断哪一项该高亮的逻辑是，首先在data中声明一个变量，值为0，然后在标签里写一个三元表达式，如果这个值和索引值 一致，表示他被选中了，就给他高亮显示，其他的项就不给active这个值，active这个值是在css中写好了高亮颜色的，这样，就实现了第一项显示高亮，但是还没有实现选中哪一项，哪一项高亮

<scroll-view scroll-x class="navScroll">
  <view class="item" :class="index==navIndex?'active':''" v-for="(item, index) in arr" @click="clickNav">国内</view>
</scroll-view>

接下来就是写点击事件，点谁就把谁的索引值赋值给navIndex，点击事件要带参数，把值传给点击事件方法，方法接收到值之后，将值赋给navIndex

      <scroll-view scroll-x class="navScroll">
        <view class="item" :class="index==navIndex?'active':''" v-for="(item, index) in arr" @click="clickNav(index)">国内</view>
      </scroll-view>

methods: {
      // 点击导航栏切换选中项
      clickNav(index){
        this.navIndex = index
      }
}

点击其他项之后，实现了高亮显示