martial-arts/pages/tabbar/shop/shop.vue

<template>
	<view>
		<status-container :ifReturn="false" titlet="产品列表">
			<view slot="content">
				<view class="posi-sticky" :style="{top:newtop+'px'}" style="margin-top: -20rpx;">
					<swiper-tab id="tab" :ifBetween="false" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
				</view>
				<view class="pad-zy20">
					<list @goDetail="goDetail"></list>
					<list @goDetail="goDetail"></list>
					<list @goDetail="goDetail"></list>
					<list @goDetail="goDetail"></list>
					<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				</view>
			</view>
		</status-container>
		<!-- 底部tab -->
		<foot-tab current="1"></foot-tab>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import list from '@/components/list.vue';
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			'foot-tab' :footTab,
			swiperTab,
			list,
			pitera
		},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				current:0,
				dataList:[
					{title:'全部'},
					{title:'机械'},
					{title:'书籍'},
					{title:'鞋子'},
				],
			}
		},
		methods: {
			// tab点击事件
			clickTab(index){
				this.current = index;
			},
			// 去商品详情
			goDetail(id){
				uni.navigateTo({
					url:`/pagesB/shop-detail/shop-detail?id=${id}`
				})
			}
		}
	}
</script>

<style>

</style>