uniapp组件之选择选项(如套餐选择)

本文介绍了一种使用Vue实现的Tab栏切换效果,通过点击不同的选项来改变激活状态,并更新对应的样式。此示例利用了v-for指令来遍历数据列表并设置点击事件,同时实现了点击后图片变化的效果。

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

功能效果:

代码如下: 

 <template>
      <view class="text-data">
           <view class="text-item" v-for="(item, index) in list" :key='index'  @click="clicktab(index)" :class="{active:activeindex===index}">
              <view>
                  <!-- 点击后改变图片 -->
                  <image :src="activeindex===index? '../../static/img/2.png' : '../../static/img/1.png'"></image>
              </view>
              <view>
                  {{item.name}}    
             </view>                
          </view>        
     </view>
 </template>
 <script>
     export default {
         data() {
             return {
                 list:[
                     {name:'套餐1'},
                     {name:'套餐2'},
                     {name:'套餐3'},
                     ],
                 // 默认没有选中任何一个,为0,则默认选中第一个
                 activeindex: -1,
                 }            
         },
         methods: {
             clicktab(index){
                 // 可以选中后取消(这里index为选择的第几个子项索引)
                 this.activeindex = this.activeindex==index?-1:index;
                 // this.activeindex = index; 选中后不能取消
             }
         }
     }
 </script>
 <style lang="scss">
     .text-data{
         display: flex;
         flex-direction: row;
         height: 80px;
         margin-top: 20px;
         justify-content: space-between;
         .text-item{
             margin-left: 20rpx;
             margin-right: 20rpx;
             height: 80px;
             width: 120px;
             border: 1px #d4d4d4 solid;
             display: flex;
             image{
                 height: 20px;
                 width: 20px;
             }
             // 点击后样式改变
             &.active{
                 color: #ff0000;
                 background-color: #faf8f4;
                 border:1px #808270 solid;                
             }
         }
         
     }
 </style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值