uni-app 点击切换列表元素样式

深碍√TFBOYSˉ_ 2022-12-29 11:25 436阅读 0赞

列表滚动使用视图滑动组件：[文档][Link 1]

切换样式使用动态class或者style来绑定：[文档][Link 2]

##### demo示例 #####

![在这里插入图片描述][20201222134415491.gif_pic_center]

##### demo代码 #####

###### html ######

<scroll-view scroll-x="true" class="list-box ">
          <view class="list-item" :class="currentIndex== index?'active':''" v-for="(item,index) in list" :key="index" @click="chooseItem(index)">
                 <image :src="item.url" mode="" class="list-item-img"></image>
                 <p>{
       {item.title}}</p>
         </view>
    </scroll-view>

1.  设定一个当前选中的下标值 “currentIndex”，默认为0
2.  点击其中一个元素时，将选中元素的下标赋值给“currentIndex”，切换样式

###### css ######

.active { 
    	border: 1px solid blue !important;
    }
    .list-box{ 
    　　　　width: 100%;
           overflow: hidden;
           white-space: nowrap;
    }
    
    .list-item{ 
    　　　　display: inline-block;
    }

1.  横向滚动：列表容器宽度需为100%，溢出隐藏，不允许换行

###### js ######

chooseItem(index) { 
        this.currentIndex= index                
    },

好啦，总结完毕。

[Link 1]: https://uniapp.dcloud.io/component/scroll-view
[Link 2]: https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A
[20201222134415491.gif_pic_center]: /images/20221120/2a5553bab7c048efa52d1b0da430b23f.png

发表评论取消回复

表情：

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

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

相关阅读

相关基于Vue实现active点击切换样式

1. html <footer class="footer" id="footer"> <div class="item" v-for="(item,

朱雀/ 2023年06月14日 04:17/ 0 赞/ 123 阅读

相关 uni-app 点击切换列表元素样式

列表滚动使用视图滑动组件：[文档][Link 1] 切换样式使用动态class或者style来绑定：[文档][Link 2] demo示例 ![在这里插入图片描述][

深碍√TFBOYSˉ_/ 2022年12月29日 11:25/ 0 赞/ 437 阅读

相关 vue 动态切换列表active样式

<template v-for="index of 10"> <div :key="index" :class="{ 'acti

╰半夏微凉°/ 2022年11月18日 13:53/ 0 赞/ 201 阅读

相关 css隐藏元素触发点击事件,纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯js实现的小代码段。我这里整理了纯css实现

电玩女神/ 2022年09月02日 14:51/ 0 赞/ 240 阅读

相关【VUE组件开发】VUE随意点击列表元素切换选中样式，并有序数组添加索引和数值

直接查看代码以及样式 <template> <div>  <div clas

朴灿烈づ我的快乐病毒、/ 2022年05月15日 09:40/ 0 赞/ 141 阅读

相关 vue 点击事件切换样式和样式参数值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1

清疚/ 2022年03月08日 10:48/ 0 赞/ 220 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 376 阅读

相关微信小程序实现样式绑定，点击切换样式

我用的wepy框架开发微信小程序，有双向数据绑定就不需要对dom节点进行操作了。只需要用data-绑定变量就行了。效果图：（在原来的 class上追加样式，默认第一个被选

心已赠人/ 2021年12月09日 07:21/ 0 赞/ 492 阅读

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

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

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

相关 uniapp实战——点击商品列表导航至商品详情页

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

迷南。/ 2021年07月25日 17:30/ 0 赞/ 680 阅读