效果图：
<template>
<view class="Specifications-popup-sele" v-for="(item,index) in specifications" :key="index">
<view class="Specifications-popup-sele-name">{
{
item.name}}</view>
<view class="Specifications-popup-sele-list">
<text :class="item.start === index2 ?'rmoiu':''" @click="morloe(index,index2)"
v-for="(item2,index2) in item.children" :key="index2">{
{
item2.title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//---------
specifications: [{
id: 0,
name: '规格',
start: 0,
children: [{
id: 101,
title: '大份'
},
{
id: 102,
title: '中份'
},
{
id: 103,
title: '小份'
}
]
},
{
id: 1,
name: '口味',
start: 0,
children: [{
id: 101,
title: '酸辣'
},
{
id: 102,
title: '甜味'
},
{
id: 103,
title: '孜然味'
},
{
id: 104,
title: '烧烤味'
}
]
}
],
//---------
},
},
methods: {
morloe(index,index2){
console.log(index,index2,'规格')
this.specifications[index]['start'] = index2;
},
}
}
</script>
<style lang="scss" scoped>
/* 规格选择弹窗 start */
.Specifications{
width: 100%; height: 100%; position: fixed; bottom: 0px; left: 0px; z-index: 999;}
.Specifications-mask{
width: 100%; height: auto; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: 0px auto; background: rgba(0,0,0,0.4); z-index: 1000;}
.Specifications-popup{
width:100%; height: auto; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 1001; background: #fff; border-radius: 5px 5px 0px 0px; }
.Specifications-popup-colse{
position: absolute; top: 0px; right: 0px; font-size: 30px; color: #999; z-index: 1002; }
.Specifications-popup-head{
width: 94%; height: auto; margin: 0px auto; border-bottom: 1px #eee solid; display: flex; flex-direction: row; padding: 20rpx 0px; }
.Specifications-popup-head-img{
width: 25%;}
.Specifications-popup-head-img image{
width: 100%; height: 200rpx; border: 1px #eee solid; display: block; }
.Specifications-popup-head-text{
width: 75%; display: flex; flex-direction:column; box-sizing: border-box; padding-left: 3%; justify-content: space-around; }
.Specifications-popup-head-text-name{
font-size: 16px; font-weight: bold; width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #444; }
.Specifications-popup-head-text-price{
display: flex; flex-direction: row; color:#eaa02c ;display:table-cell; vertical-align:bottom; }
.Specifications-popup-head-text-price label{
font-size: 12px; font-weight: bold; margin-right: 2%; }
.Specifications-popup-head-text-price text{
font-size: 18px;}
.Specifications-popup-head-text-parameter{
font-size: 13px; color: #888; }
.Specifications-popup-head-text-parameter text{
margin-right: 3%;}
.Specifications-huadong{
width: 100%; max-height: 600rpx; padding-top: 10px; }
.Specifications-popup-sele{
width: 100%; height: auto; box-sizing: border-box; padding: 0px 3%; }
.Specifications-popup-sele-name{
width: 100%; height: auto; font-size: 15px; color: #333; margin-bottom: 15px; }
.Specifications-popup-sele-list{
width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap;}
.Specifications-popup-sele-list text{
color: #fe7b2e; margin:0px 0%; border-radius: 4px; text-align: center; box-sizing: border-box; min-width: 30%; border: 1px #fe7b2e solid; margin-bottom: 15px; font-size: 14px;line-height: 33px; padding: 0px 2%; margin-right: 3%; }
.Specifications-popup-munbar{
width: 100%; height: auto; box-sizing: border-box; padding: 40rpx 5%; display: flex; justify-content: space-between; }
.Specifications-popup-but{
width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 3%; box-sizing: border-box; border-top: 1px #eee solid;}
.Specifications-popup-but label{
text-align: center; color: #fff; height: 100rpx; line-height: 100rpx;
/* background-image:linear-gradient(#ff4f19,#E33E33); */
background:#E31D1A;
border-radius: 40px; letter-spacing: 3px;
}
.none{
bottom: -100%;}
.none .Specifications-popup{
bottom: -100%; transition: all 0.5s;}
.none .Specifications-mask{
display: none; transition: all 0.5s;}
.show{
bottom: 0px;}
.show .Specifications-popup{
bottom: 0%; transition: all 0.5s;}
.show .Specifications-mask{
display: block; transition: all 0.5s;}
.rmoiu{
background: #ff8d00; color: #fff!important; }
/* 规格选择弹窗 end */
</style>
转载：感谢分享（具体详情请查看原文链接，更详细哦…）
原文链接：https://blog.csdn.net/changshataofan/article/details/116567005