孙先森资源教程分享 - 专注软件编程开发,网站源码及微信源码分享
孙先森资源教程分享 - 专注软件编程开发,网站源码及微信源码分享

uniapp点击列表给选中样式(active)开发中常用比如分类,订单

0357

有多个按钮或者列表,想要点中其中一个并附上css样式 active 。反复我用到了好几次了,我觉得这个很常用,记录一下。

主要四个步骤

  1. view列表循环数据 给上点击事件 @click="append(item,index)" item:点击得到的整条数据,index:索引(从0开始)也是为了我们点击必要的参数
  2. return {active: '',data:{}}赋值作用,会vue的都知道,不细说
  3. 就是methods方法了,下面代码 append(item,index)方法
  4. css样式必须要有的

view

<view class="vo-title" v-for="(v,k) in vo.data" :key="k">
    <view class="vo-title-left">{{ v.name }}</view>
    <view class="vo-box uu-flex">
        <text :class="active == item.id ? 'vo-box-item-active vo-box-item':'vo-box-item'" v-for="(item,index) in v.child" :key="index" @click="append(item,index)">{{ item.name }}</text>
    </view>
</view>

script

data() {
    return {
        active: '',
        data:{},
    }
},

append(item,index) {
    this.active = item.id;
    //这是整条得到的数据
    this.data = item
},

css

.vo-box-item {
        font-size: $uni-font-size-base;
        text-align: center;
        border: 1px solid #eee;
        width: 160upx;
        height: 60upx;
        margin: 10upx 8upx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #000; /*主要*/
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f4f0; /*主要*/
}
.vo-box-item-active {
    border-color: red;
    color:#fff;
}
© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏
分享
评论 抢沙发
孙先森资源的头像孙先森资源|专注优质网络资源教程分享孙先森资源教程

昵称

取消
昵称表情代码图片