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

news2024/12/28 18:40:11

一、效果:

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

二、代码实现:

关键代码:

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

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

完整代码:

<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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/876847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android 网络编程-网络请求

Android 网络编程-网络请求 文章目录 Android 网络编程-网络请求一、主要内容二、开发网络请求前的基本准备1、查看需要请求的网址是否有效&#xff08;1&#xff09;通过网页在线验证&#xff08;2&#xff09;使用专用window网咯请求工具&#xff08;3&#xff09;编写app代码…

less学习语法

1.CSS函数的补充 1.rgb/rgba/translate/rotate/scale 2.非常好用的css函数&#xff1a; var:使用css定义的变量calc:计算css值&#xff0c;通常用于计算元素的大小或位置blur:毛玻璃&#xff08;高斯模糊&#xff09;效果gradient:颜色渐变函数 var:定义变量 css中可以自定…

关于青少年学习演讲与口才对未来的领导力的塑造的探析

标题&#xff1a;青少年学习演讲与口才对未来领导力的塑造&#xff1a;一项探析 摘要&#xff1a; 本论文旨在探讨青少年学习演讲与口才对未来领导力的塑造的重要性和影响。通过分析演讲和口才对青少年的益处&#xff0c;以及如何培养这些技能来促进领导力的发展&#xff0c;我…

pytest数据驱动 pandas

pytest数据驱动 pandas 主要过程&#xff1a;用pandas读取excel里面的数据&#xff0c;然后进行百度查询&#xff0c;并断言 pf pd.read_excel(data_py.xlsx, usecols[1,2])print(pf.values)输出&#xff1a;[[‘听妈妈的话’ ‘周杰伦’] [‘遇见’ ‘孙燕姿’] [‘伤心太平…

win10下如何安装ffmpeg

安装ffmpeg之前先安装win10 绿色软件管理软件&#xff1a;scoop. Scoop的基本介绍 Scoop是一款适用于Windows平台的命令行软件&#xff08;包&#xff09;管理工具&#xff0c;这里是Github介绍页。简单来说&#xff0c;就是可以通过命令行工具&#xff08;PowerShell、CMD等…

性能优化-超大图加载

超大图加载优化 网站首页的头部有时候要加载超大图&#xff0c;可能超过4M&#xff0c;如果网速不好用户会看到好长时间的白屏&#xff0c;体验非常不好。 这里使用大图缩略图的模式处理这个问题&#xff1a; 使用工具根据大图(>1M)做一个10k的缩略图图片同时加载&#xf…

这所院校性价比极高!专业课太简单了!保护一志愿!

一、学校及专业介绍 昆明理工大学&#xff08;Kunming University of Science and Technology&#xff09;&#xff0c;位于云南省昆明市&#xff0c;是国防科技工业局与云南省共建的重点大学&#xff0c;国家"特色重点学科项目"建设高校。昆工就综合实力和竞争压力…

Vue 引入 Element-UI 组件库

Element-UI 官网地址&#xff1a;https://element.eleme.cn/#/zh-CN 完整引入&#xff1a;会将全部组件打包到项目中&#xff0c;导致项目过大&#xff0c;首次加载时间过长。 下载 Element-UI 一、打开项目&#xff0c;安装 Element-UI 组件库。 使用命令&#xff1a; npm …

Camx--概述

该部分代码主要位于 vendor/qcom/proprietary/ 目录下&#xff1a; 其中 camx 代表了通用功能性接口的代码实现集合&#xff08;CamX&#xff09;&#xff0c;chi-cdk代表了可定制化需求的代码实现集合&#xff08;CHI&#xff09;&#xff0c;从图中可以看出Camx部分对上作为H…

开源项目-高校自动排课系统

哈喽,大家好,今天给大家带来一个开源项目-基于遗传算法的一个高校自动排课系统,同时也是一个前后端分离项目。 前端:React 后端:SpringBoot+MyBatis+MySQL数据库 高校自动排课系统的主要功能包括查询模块,安排教学区域,排课页面三部分 登录 查询模块 可以根据学年…

docker pull 设置代理 centos

On CentOS the configuration file for Docker is at: /etc/sysconfig/docker 用 root 权限打开 text editor sudo gedit 注意 加引号 Adding the below line helped me to get the Docker daemon working behind a proxy server: HTTP_PROXY“http://<proxy_host>:&…

学习笔记整理-DOM-01-基础知识

一、DOM基本概念 1. DOM基本概念 DOM是JS操控HTML和CSS的桥梁。DOM是JS操作HTML变得优雅。 DOM(Document Object Model&#xff0c;文档对象模型)是JavaScript操作HTML文档的接口&#xff0c;使文档操作变得非常优雅、简便。DOM最大的特点就是将文档表示为节点树。 节点的node…

spss--数据分析Log-Binonial模型

在横断面研究中&#xff0c;Log-binomial 模型能够获得研究因素与结局变量的关联强度指标患病率比&#xff08;PR&#xff09;&#xff0c;是一种研究二分类观察结果与多因素之间关系的重要方法&#xff0c;在医学研究等领域中得到了广泛的应用。 采用log-binomial 模型可直接估…

springboot整合kafka多数据源

整合kafka多数据源 项目背景依赖配置生产者消费者消息体 项目背景 在很多与第三方公司对接的时候&#xff0c;或者处在不同的网络环境下&#xff0c;比如在互联网和政务外网的分布部署服务的时候&#xff0c;我们需要对接多台kafka来达到我们的业务需求&#xff0c;那么当kafk…

塔斯汀的“中国汉堡”并不tasty

文 | 螳螂观察 作者 | 易不二 华莱士门徒 作为快餐消费市场的两大霸主——麦当劳、肯德基&#xff0c;自入华以来&#xff0c;从来不缺模仿者、挑战者。 从福建起家、已经成为了万店品牌的华莱士&#xff0c;无疑是最成功的一个。 得益于被餐饮界称之为“福建模式”的门店…

Arduino驱动红外二氧化碳传感器(气体传感器篇)

目录 1、传感器特性 2、驱动程序 红外激光传感器是将成熟的红外吸收气体检测技术与精密光路设计、精良电路设计紧密结合而制作出的高性能传感器,具有高灵敏度、高分辨率、低功耗,响应快、抗水汽干扰、不中毒、稳定性高、使用寿命长等特点。本篇博文使用Arduino驱动红外二氧…

C++ 字符串类 string

文章目录 前言一、string 类型概括二、字符串流总结 前言 在C中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储和操作文本数据。C标准库中提供了std::string类&#xff0c;它是一个功能强大的字符串类&#xff0c;提供了丰富的方法和操作符&#xff0c;使我们能…

精挑细选的几个宝藏软件

是不是感觉你的电脑里面永远都缺少一款软件&#xff1f;每次想要使用某个功能的时候总是不能找到合适的&#xff0c;还要先去网上找&#xff0c;小编给大家分享几款超级实用的软件&#xff0c;建议低调收藏哦~ Proxyee-down/下载工具 proxyee-down是一款免费开源的http下载工…

Vue 安装开发者工具

1.下载开发者工具&#xff0c;下载地址&#xff1a;http://book.wiyp.top/App/Vue3开发者工具-谷歌/Vue3.crx 2.打开谷歌浏览器&#xff0c;点击扩展&#xff0c;点击管理扩展程序。 3.开启开发者模式&#xff0c;将 Vue3 开发者工具文件拖拽到浏览器中进行安装。 注&#xff…