xiongmao/pages/my/browse-history/browse-history.vue

<!-- 浏览记录 -->
<template>
	<view class="wrap">
		<view class="header">
			<view class="header-top">
				<image src="../../../static/return.png" class="return" mode="widthFix"></image>
				<view class="header-title">
					浏览记录
				</view>
				<view class="header-msg">
					管理 完成
				</view>
			</view>
			<view class="header-center">
				<view class="tab-list">
					<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
						:key="index" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="header-bottom">
				<scroll-view scroll-x="true" class="subtab-list">
					<view class="subtab-item" v-for="(item,index) in timeList">
						<view :class="{ 'active' : isSelected === index }" class="subtab-child" :key="index"
							@click="tabClick(index)">
							<text>{{item.week}}</text>
							<text>{{item.day}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '商品',
				}, {
					index: 1,
					title: "资讯",
				}],
				
				isSelected: 6,
				timeList: [{
					index: 0,
					week: '日',
					day: "31",
				}, {
					index: 1,
					week: '一',
					day: "1",
				}, {
					index: 2,
					week: '二',
					day: "2",
				}, {
					index: 3,
					week: '三',
					day: "3",
				}, {
					index: 4,
					week: '四',
					day: "4",
				}, {
					index: 5,
					week: '五',
					day: "5",
				}, {
					index: 6,
					week: '六',
					day: "6",
				}],
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

			//选项卡2
			tabClick(index) {
				this.isSelected = index
			},

		}
	}
</script>

<style scoped lang="scss">
	@import "./browse-history.css";
</style>