mes_mobile/pages/deviceStatus/deviceStatus.vue

<template>
	<view class="pagepaddings">
		<view class=".padd_bot12">
			<text>硬件设备状态</text>
		</view>
		<view class="body-view contentboxsty">
			<view class="content-top">
				<view class="content-left">
					<text class="iconfont icon-gengduo more_icon"></text>
				</view>
				<view class="content-scroll">
					<view class="center-cut-menu">
						<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
						  <view class="scroll-item" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
							<text class="item-text" :class="curIndex == index? 'active' : ''">{{item.name}}</text>
						  </view>
						</scroll-view>
					</view>
				</view>
				<view class="content-right">
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
			<swiper class="swiper-box-list" circular="true" :current="curIndex" @change="swiperChange">
				<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
					<view class="swiper-item"  v-if="item.id==1">
						<view class="" style="width: 100%;">
							<image style="width: 100%;" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/background.png" mode=""></image>
						</view>
						<view class="font14">
							<view class="device_row">	
								<text class="name font_bold">设备名称</text>
								<text>双头立锯</text>
							</view>
							<view class="device_row">
								<text class="name font_bold">开机时间</text>
								<text>2024-02-11 08:00:45</text>
							</view>
							<view class="device_row">
								<text class="name font_bold">保养到期日</text>
								<text>2024-02-11 08:00:45</text>
							</view>
							<view class="device_row">
								<text class="name font_bold">今日停机</text>
								<text>5次</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
        		id: 1,
        		name: '多片锯'
        	},
        	{
        		id: 2,
        		name: '立式带锯'
        	},
        	{
        		id: 3,
        		name: '视觉'
        	},
        	{
        		id: 4,
        		name: '卧锯'
        	},
        	{
        		id: 5,
        		name: '多片锯'
        	},
        	{
        		id: 6,
        		name: '卧锯测试A'
        	},
        	{
        		id: 7,
        		name: '卧锯B'
        	},
        	{
        		id: 8,
        		name: '卧锯测试3'
        	},
        	{
        		id: 9,
        		name: '卧锯4'
        	},
        	{
        		id: 10,
        		name: '卧锯5'
        	},
        	{
        		id: 11,
        		name: '卧锯6'
        	},
        ],
		// Tab切换内容
		swiperDateList: [
			{
				id: 1,
				content: '1'
			},
			{
				id: 2,
				content: '2'
			},
			{
				id: 3,
				content: '3'
			},
			{
				id: 4,
				content: '4'
			},
			{
				id: 5,
				content: '5'
			},
			{
				id: 6,
				content: '6'
			},
			{
				id: 7,
				content: '7'
			},
			{
				id: 8,
				content: '8'
			},
			{
				id: 9,
				content: '9'
			},
			{
				id: 10,
				content: '10'
			},
			{
				id: 11,
				content: '11'
			},
		],
        contentScrollW: 0, // 导航区宽度
        curIndex: 0, // 当前选中
        scrollLeft: 0, // 横向滚动条位置
      }
    },
    mounted() {
      // 获取标题区域宽度，和每个子元素节点的宽度
      this.getScrollW()
    },
    methods: {
      // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
      getScrollW() {
        let query = uni.createSelectorQuery().in(this);
        query.select('.scroll-view').boundingClientRect(data => {
          // 拿到 scroll-view 组件宽度
          this.contentScrollW = data.width
        }).exec();

        query.selectAll('.scroll-item').boundingClientRect(data => {
          let dataLen = data.length;
          for (let i = 0; i < dataLen; i++) {
            //  scroll-view 子元素组件距离左边栏的距离
            this.list[i].left = data[i].left;
            //  scroll-view 子元素组件宽度
            this.list[i].width = data[i].width
          }
        }).exec()
      },

      // 选择标题
      changeMenu(index) {
		this.curIndex = index;
		// console.log(index,111)
        // 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
        // this.scrollLeft = index * this.list[index].width

        // 效果一(当前点击子元素靠左展示)  子元素宽度不相同也可实现
        // this.scrollLeft = 0;
        // for (let i = 0; i < index; i++) {
        //     this.scrollLeft += this.list[i].width
        // };


        // 效果二(当前点击子元素靠左留一展示)  局限性：子元素宽度相同
        // this.scrollLeft = (index - 1)  * this.list[index].width

        // 效果二(当前点击子元素靠左留一展示)  子元素宽度不相同也可实现
        this.scrollLeft = 0;
        for (let i = 0; i < index - 1; i++) {
         this.scrollLeft += this.list[i].width
        };


        // 效果三(当前点击子元素居中展示)  不受子元素宽度影响
        // this.scrollLeft = this.list[index].left - this.contentScrollW / 2 + this.list[index].width / 2;
      },
	  //
	  swiperChange(e) {
	  	// console.log(22,e)
	  	let index = e.detail.current
	  	this.changeMenu(index)
	  }
    }
  }
</script>

<style lang="scss">
	
	.body-view{
		height: 450px;
		.content-top{
			display: flex;
			align-items: center;
			.content-left{flex-basis: 30px;text-align: center;
				.more_icon{display: inline-block;transform: scaleX(-1);}
			}
			.content-scroll{flex: 1;overflow: auto;}
			.center-cut-menu {width: 100%;height: 100rpx;box-sizing: border-box;
				.scroll-view {height: 100rpx;white-space: nowrap;
					.scroll-item {height: 100rpx;padding: 0 20rpx;display: inline-block;text-align: center;
					.item-text {font-size: 14px;line-height: 100rpx;
					  &.active {
						// color: #1468FF;
						font-size: 18px;
					  }
					}
				  }
				}
			}
			.content-right{flex-basis: 30px;text-align: center;}
		}
		.swiper-box-list{height: 400px;padding:0 12px;
			.device_row{padding: 6px 0;display: flex;
				.name{width: 82px;}
			}
		}
	}
</style>