30-小案例2 滑动导航栏 scroll-view

先在app.vue文件中写一个公共 样式

app.vue就是公共文件 box-sizing: border-box;这种属性不会撑大父盒子，padding和border都会在父盒子中向内压缩，就不会改变布局

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
  view {
    box-sizing: border-box;
  }
</style>

开始写导航栏布局

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
      </scroll-view>

    <view class="content">
      <view class="row">每一行的新闻</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<!-- scoped:说明这是局部样式 -->
<style lang="scss" scoped>
</style>

css样式

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
      </scroll-view>

    <view class="content">
      <view class="row">每一行的新闻</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<!-- scoped:说明这是局部样式 -->
<style lang="scss" scoped>
  .navScroll {
    
    height: 100rpx;
    background: #f7f8fa;
    // 这一句是使元素不换行,一旦换行了就显示不全
    // 又因为有行高,他没法两行显示,有一些就被隐藏了
    // 加了这一行才能让多出来的小盒子能滑动显示
    white-space: nowrap;
    .item {
      font-size: 40rpx;
      // 使导航栏的每一个小盒子在一行显示
      display: inline-block;
      // 加行高
      line-height: 100rpx;
      // 给每个小盒子加一个padding,上下0 左右30rpx
      padding: 0 30rpx;
      color: #333;
    }
  }
</style>

现在有一个问题是导航栏在横向滚动时，下面有一个底部黑线需要取消

使用uniapp组件自带的属性show-scrollbar="false"不能清除，还有其他方法也不能行，就这种方法可以，下面两种方法都能实现

<template>
	<view class="home">
    
      <scroll-view scroll-x class="navScroll">
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
        <view class="item">国内</view>
      </scroll-view>

    <view class="content">
      <view class="row">每一行的新闻</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<!-- scoped:说明这是局部样式 -->
<style lang="scss" scoped>
  .navScroll {
    height: 100rpx;
    background: #f7f8fa;
    // 这一句是使元素不换行,一旦换行了就显示不全
    // 又因为有行高,他没法两行显示,有一些就被隐藏了
    // 加了这一行才能让多出来的小盒子能滑动显示
    white-space: nowrap;
    // 去除导航栏横向滚动条
    	// /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;
    }
    
  }
</style>

deep和item，也就是scrollview组件的子组件是同级

最后写一个for循环，遍历出每一项导航栏

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

    <view class="content">
      <view class="row">每一行的新闻</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                            arr: 10
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>