uni-app 商城分类功能左侧点击实现联动

爱被打了一巴掌 2023-01-04 13:09 132阅读 0赞

实现逻辑：结合uni-app 中的 scroll-view 组件 和 scroll-view 提供的两个参数（scroll-into-view、scroll-with-animation）

// 左侧 定义了点击事件 @click="menuTab(index)，控制了点击样式 :class="{cateActive:index == current}"
    <scroll-view class="cartNameLeft" scroll-y="true">
    		<view class="cartNameItem" :class="{cateActive:index == current}" v-for="(item,index) in cate" :key='index' @click="menuTab(index)"> 
    		{ { item.catename}}
    		<view class="cateLine"></view>
    	</view>
    </scroll-view>

scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

// 右侧 滚动元素设置id id不能数字开头，scroll-view 滚动标签设置为'cate'+current ，设置为'cate'+current是为了和左侧点击事件关联，因为左侧根据 current 改变样式
    <scroll-view  scroll-y="true" :scroll-into-view = "'cate'+current" scroll-with-animation="true">
    	<view class="cateTtem" v-for="(item,index) in cate" :key="index" :id="'cate'+index">
    		- 导航 -
    	</view>
    </scroll-view>

export default { 
    	data() { 
    		return { 
    			cate:[],
    			current:0
    		}
    	},
    	onLoad() { 
    		this.getData()
    	},
    	methods: { 
    		getData() { 
    			uni.request({ 
    			    url: '/api/index/cate',
    			    success: (res) => { 
    					this.cate = res.data.data;
    			        console.log(res.data.data);
    			    }
    			});
    		},
    		menuTab(index) { 
    			this.current = index
    		}
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp实现村组数据多级联动

![在这里插入图片描述][19ae9a1d23a94367bd93ccff639b0a7c.png] 选择了村的数据才会有组的数据，下面为接口的返回格式 ![在这里插入

桃扇骨/ 2024年03月31日 13:45/ 0 赞/ 70 阅读

相关 uniapp旋转动画 uniapp 实现点击图标旋转90度

本文章实现的效果是：点击按钮，图标顺时针旋转90度，再点击时，逆时针旋转回去，效果图如下： ![在这里插入图片描述][025f11e2f411456dacaeda93265

末蓝、/ 2023年10月09日 16:14/ 0 赞/ 33 阅读

相关点击左侧跳到右侧

效果图 ![979265-20170413182207783-431878873.png][] JS部分 function moveOption(e1, e2){

谁践踏了优雅/ 2023年06月11日 13:22/ 0 赞/ 18 阅读

相关 jquery 实现点击把数据移动右侧点击再次移回到左侧

2018年第一发希望新的一年和大家一下学习更多知识 JS：//把数据左边挪到了右边，再从右边移动回来 function moveOption(e1, e2)

朴灿烈づ我的快乐病毒、/ 2023年06月11日 13:22/ 0 赞/ 26 阅读

相关 uni-app 商城分类功能左侧点击实现联动

实现逻辑：结合uni-app 中的 scroll-view 组件和 scroll-view 提供的两个参数（scroll-into-view、scroll-with-anim

爱被打了一巴掌/ 2023年01月04日 13:09/ 0 赞/ 133 阅读

相关 jQuery实现左侧分类菜单

打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢，接下来，我会在js中介绍两种实现方式，一种是引入jQuery的实现方式，一

我会带着你远行/ 2022年07月14日 04:38/ 0 赞/ 264 阅读

相关点击按钮实现下拉菜单的三级联动

主要内容：点击查询品牌按钮，选择厂商1的时候，显示厂商1的品牌，点击厂商二的时候，显示厂商2的品牌，同理，不同的品牌对应不同的型号源代码： <!DOCTYPE h

浅浅的花香味﹌/ 2022年06月08日 09:38/ 0 赞/ 251 阅读

相关 uniapp地图-点击添加标记点

前言：这篇文章讲述的是map标签的@tap点击地图事件;添加的标记点都是保存在markers数组里面,点击地图就会获取点击的位置的经纬度，然后在point里面追加了iconPa

迈不过友情╰/ 2021年08月19日 13:27/ 0 赞/ 3153 阅读

相关 uniapp实战——实现左侧数据渲染和点击高亮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

不念不忘少年蓝@/ 2021年07月25日 22:49/ 0 赞/ 650 阅读

相关双列商品分类页面——uview+uniapp实现(单向联动+双向联动)

一个电商的app，商品的展示是必不可少的，联动分类展示是很常见的：单向联动功能实现效果： 1. 左侧是分类列表，有很多分类，可以滑动并点击 2. 右侧是该分类

比眉伴天荒/ 2021年07月25日 13:39/ 2 赞/ 2899 阅读