[移动开发] uniapp 微信小程序自定义radio-button按钮

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> uniapp 微信小程序自定义radio-button按钮 -> 正文阅读

[移动开发]uniapp 微信小程序自定义radio-button按钮

效果图

在这里插入图片描述

代码

<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;
}