uniapp实现左侧滚动条item选中样式

落日映苍穹つ 2021-07-25 21:55 737阅读 0赞

要实现如下效果

![20201112130929814.gif][]

代码如下

<template>
    	<view class="main">
    		<scroll-view scroll-y class="left_sv">
    			<view class="menu_item" v-for="(item, index) in list" :key="item.id" :class="active_index === item.id ? 'active' : ''" @click="handle_tab(index)">{
       { item.name }}</view>
    		</scroll-view>
    		<scroll-view scroll-y class="right_sv">
    			<view>2233333333333333333333</view>
    			<view>2222222222222222</view>
    		</scroll-view>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			active_index: 0,
    			list: [
    				{
    					id: 0,
    					name: 'hello'
    				},
    				{
    					id: 1,
    					name: 'hello1'
    				},
    				{
    					id: 2,
    					name: 'hello2'
    				},
    				{
    					id: 3,
    					name: 'hello3'
    				}
    			]
    		};
    	},
    
    	methods: {
    		handle_tab(index) {
    			this.active_index = index;
    		}
    	}
    };
    </script>
    
    <style lang="scss">
    .main {
    	display: flex;
    	height: 100vh;
    	.left_sv {
    		flex: 2;
    		.menu_item {
    			padding: 20rpx 0;
    			text-align: center;
    			font-size: 40rpx;
    			background-color: #dd524d;
    			margin-bottom: 10rpx;
    		}
    		.active {
    			font-size: 50rpx;
    			color: #f0ad4e;
    		}
    	}
    	.right_sv {
    		flex: 5;
    		background-color: #4cd964;
    	}
    }
    </style>

[20201112130929814.gif]: /images/20210725/9c54a776be194fdbada7111b89b81b80.png

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp实现横向滚动样式条

uniapp实现横向滚动样式条简介：本文讲解，uniapp如何实现横向滚动样式条。运行代码： <template> <view class="c

ゞ浴缸里的玫瑰/ 2024年03月31日 09:19/ 0 赞/ 60 阅读

相关滚动条样式

<style scoped> .treeFssBox>>>::-webkit-scrollbar { width: 4px;

港控/mmm°/ 2022年11月01日 14:58/ 0 赞/ 211 阅读

相关滚动条样式

1.内发光效果： box-shadow: rgb(0, 187, 255) 0px 0px 8px inset !important; 2.滚动条样式 .histroy

╰+哭是因爲堅強的太久メ/ 2022年08月30日 04:27/ 0 赞/ 226 阅读

相关 html滚动条样式

/\ 针对谷歌浏览器生效的。（不兼容火狐，IE） \/ ::-webkit-scrollbar \{ width: 6px; height

清疚/ 2022年04月18日 03:23/ 0 赞/ 286 阅读

相关滚动条样式修改

<style> .innerbox::-webkit-scrollbar {/滚动条整体样式/ width: 4px;

淩亂°似流年/ 2022年02月25日 13:19/ 0 赞/ 376 阅读

相关 html 滚动条样式

转载：[https://www.cnblogs.com/yclblog/p/6806496.html][https_www.cnblogs.com_yclblog_p_6806

向右看齐/ 2021年12月22日 14:23/ 0 赞/ 334 阅读

相关滚动条样式css

![在这里插入图片描述][20190702143854151.png] / 滚动条 / ::-webkit-scrollbar { width:

深藏阁楼爱情的钟/ 2021年12月18日 13:37/ 0 赞/ 417 阅读

相关 uniapp实现自定义滚动条。

uniapp实现自定义滚动条。笔记重点：需要给每个text绑定一个id,但是id不能是数字开头，所以在前面加一个s或者其他字母。然后scroll-into-view定位到

曾经终败给现在/ 2021年07月26日 01:23/ 0 赞/ 1177 阅读

相关 uniapp实现左侧滚动条item选中样式

要实现如下效果 ![20201112130929814.gif][] 代码如下 <template> <view class="main">

落日映苍穹つ/ 2021年07月25日 21:55/ 0 赞/ 738 阅读

相关 uniapp 滚动条组件

<scroll-view scroll-y 开启竖直滚动,默认为false scroll-x 开启水平滚动,默认为false

梦里梦外;/ 2021年07月24日 16:16/ 0 赞/ 1125 阅读