微信小程序-默认选中遍历的第一个数据，且可以自由切换选中

chibimarukochan

于 2018-11-07 11:14:29 发布

阅读量7k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/ChibiMarukoChan/article/details/83819694

本文介绍了如何在微信小程序中实现列表数据的默认选中，通过WXML遍历数据，并利用三元操作符判断index与预设值（默认为0）相等时添加特定样式实现选中效果。同时，用户可以自由切换选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

第一步：wxml页面：

说明：list是遍历的数据，data-index="{ {index}}"中index是数据的下标（0,1,2,3.....）

三元操作符需要掌握，如果index等于idx，就添加on所写的样式

<view class="ul-list {
  {index==idx?'active':''}}" wx:for="{
  {list}}" wx:key="" data-index="{
  {index}}" bindtap='getIndexValue'>
    <view class="ul-li">{
  {item.time}}</view>
 </view>

对应的样式：

.ul-list{
  width:100%;
  border-bottom: 1px solid #9e9e9e;
  height:55px;
  line-height:55px;
  text-align: center;
}
.active{
  color:red;
  box-shadow: 5px 5px 2px #888888;
}

第二步：因为遍历的数据

最低0.47元/天解锁文章