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

深碍√TFBOYSˉ_ 2022-12-29 11:25 467阅读 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 条评论，467人围观）

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

相关阅读

相关 js实现鼠标点击切换文字样式并添加下划线

效果图： ![b2f67d2e775a4f138ab3cbf085489f3f.png][] html代码

旧城等待，/ 2023年10月03日 20:03/ 0 赞/ 5 阅读

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

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

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

相关商品列表——图片、文字点击/悬浮切换展示

商品列表——图片、文字点击/悬浮切换展示效果图如下：（该图为原创，请勿盗用！） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

电玩女神/ 2023年06月12日 15:26/ 0 赞/ 29 阅读

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

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

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

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

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1

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

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

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

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

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

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

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

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

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

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