uniapp 微信小程序自定义radio-button按钮

最新推荐文章于 2022-12-12 23:02:54 发布

公孙元二

最新推荐文章于 2022-12-12 23:02:54 发布

阅读量775

点赞数

分类专栏：微信小程序/开发者工具/uniapp/HBuilder 文章标签： Vue 距离选择器 v-for tapDistanceType flex布局

本文链接：https://blog.csdn.net/amnesiac666/article/details/124683523

版权

微信小程序/开发者工具/uniapp/HBuilder 专栏收录该内容

100 篇文章 12 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<view class="distance-select-list">
    <view v-for="(item,index) in distanceList" :key="index">
        <view class="distance-select-list-item" :class="{'distance-select-list-item-active': distanceTypeSelect === index}" @tap="tapDistanceType(index)">
            {{item}}km
        </view>
    </view>
</view>

// 点击距离类型item的触发事件
tapDistanceType(index){
    this.distanceTypeSelect = index
},

distanceList: [1,2,3,5,10,20,30,50,100,200],
distanceTypeSelect:0

.distance-select-list{
    display: flex;
    flex-wrap: wrap;
    padding: 16rpx;
    background-color: white;
}
.distance-select-list-item{
    width: 136rpx;
    margin: 8rpx;
    padding: 6rpx 0;
    text-align: center;
    border: 2rpx solid #ddd;
    border-radius: 999rpx;
}
.distance-select-list-item-active{
    color: #23CFF7;
    background-color: rgb(229,248,242);
    border: 2rpx solid #23CFF7;
}