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>
相关推荐
The_era_achievs_hero5 小时前
微信小程序71~80
微信小程序·小程序
米粒宝的爸爸6 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz6 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw57 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !7 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_10 小时前
微信小程序发体验版
微信小程序·小程序
颜渊呐12 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长14 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记14 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812116 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5