uniapp开发小程序-有分类和列表时,进入页面默认选中第一个分类

一、效果:

如下图所示,进入该页面后,默认选中第一个分类,以及第一个分类下的列表数据。

二、代码实现:

关键代码:

进入页面时,默认调用分类的接口,在分类接口里做判断:

c 复制代码
if (that.TabIndex == 0) { //默认选中第一个分类下的数据
	that.cate_id = that.cateList[0].id
	that.getListFun(that.cate_id)
}

完整代码:

html 复制代码
<template>
	<view class="">
		//1分类展示
		<scroll-view :scroll-x="true" class="scrollview-box">
			<block v-for="(item,index) in cateList" :key="item">
				<view :class="TabIndex==index?'item active':'item'" @click="tabclick(index,item)">
					{{item.name}}
				</view>
			</block>
		</scroll-view>
		
		//2列表展示
		<view class="invenlist" v-if="storeList.length>0">
			<view class="invenitem" v-for="(item,index) in storeList" :key="index">
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//分类
				cateList: [],
				cate_id:'',
				TabIndex: 0,//默认第一个分类

				//列表数据
				storeList: [],
			}
		},
		onShow() {
		 	//进入页面,默认调用分类接口
			this.getCateFun() 
		},
		methods: {
			//1.分类接口			
			getCateFun() {
				var that = this
				this.$api.appPlateForm('POST', this.$url.products_cate_list, '', function(res) {
					that.cateList = res.data  //获取分类数据
					
					if (that.TabIndex == 0) { //默认选中第一个分类下的数据
						that.cate_id = that.cateList[0].id
						that.getListFun(that.cate_id)
					}
				})
			},
			
			//2.列表接口	
			getListFun(id) {
				var that = this
				var data = {
					cate_id:id
				}
				this.$api.appPlateForm('POST', this.$url.products_store_list, data, function(res) {
					that.storeList = res.data   //获取列表数据
				})
			},
			// tab切换
			tabclick(index,item) {
				var that = this
				that.TabIndex = index;
				that.cate_id = item.id
				var data = {
					cate_id:that.cate_id
				}
				//获取到id,调用列表接口
				this.$api.appPlateForm('POST', this.$url.products_store_list, data, function(res) {
					that.storeList = res.data   //获取列表数据
				})
				
			},
		}
	}
</script>

<style scoped lang="less">
	.scrollview-box {
		white-space: nowrap;
		/* 滚动必须加的属性 */
		width: 100%;
		padding:0 20rpx;
		box-sizing: border-box;
		.item {
			width: 180rpx;height:50rpx;
			margin-right: 20rpx;
			display: inline-flex;
			/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
			flex-direction: column;
			align-items: center;
			font-size: 28rpx;
			color: #666666;
			position: relative;
		}
		view::after{
			display: block;
			clear: both;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			height: 4rpx;
			width: 145rpx;
			background-color:  #21CD81;
			display: none;
		}
		
		.active {
			font-weight: bold !important;
			color: #21CD81 !important;
		}
		.active::after{
			display: block;
		}
	
	}
</style>
相关推荐
军军君018 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
Byte_Me11 小时前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_233313 小时前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
Java陈序员19 小时前
又一款基于 SpringBoot + Vue 实现的开源新零售商城系统!
vue.js·spring boot·uni-app
2501_915921431 天前
没有Mac如何完成iOS 上架:iOS App 上架App Store流程
android·ios·小程序·https·uni-app·iphone·webview
说私域1 天前
基于定制开发开源AI智能名片与S2B2C商城小程序的旅游日志创新应用研究
人工智能·小程序·旅游
脑袋大大的1 天前
钉钉小程序开发环境配置与前端开发指南
小程序·钉钉·企业应用开发
玩代码的菜鸟1 天前
uniapp类似抖音视频滑动
uni-app
2301_805962932 天前
微信小程序控制空调之接收MQTT消息
微信小程序·小程序·esp32
The_era_achievs_hero2 天前
微信小程序121~130
微信小程序·小程序