<u-popup :show="show" mode="bottom" @close="close" @open="open">
<view class="" style="background-color: #333333;">
<view class="alert-newAdd">
<view class="alert-left">
<view :class="index == _index ? 'active':'_day'" v-for="(item, index) in range" @click="thisDay(index)">
{{item.value}}
</view>
</view>
<view class="alert-right">
<view class="" v-for="(item, index) in range" >
</u-popup>
显示当前下标里的值的数据
<view v-if="_index==index" class="_time border-bottom" v-for=" (item1,index1) in item.children" @click="thisTime(index,index1)">
{{item1.value}}
</view>
</view>
</view>
</view>
<view class="flex-center squre" @click="squre">取消 </view>
</view>
</u-popup>
<script setup>
import { ref } from "vue";
let _index = ref(0)
const thisDay =(index)=>{
将当前点击的下标赋值,方便之后改变样式,可以设置active的样式。
_index.value=index
// console.log(range[index].value)
}
const thisTime =(index,index1)=>{
_day.value=range[index].value + range[index].children[index1].value
console.log(range[index].value)
console.log(range[index].children[index1].value)
console.log(_day.value)
}
本文展示了如何使用 Vue3 和组件 `<u-popup>` 创建一个底部弹出框,实现Tab切换效果。通过循环遍历数据,动态设置选中项的样式,并在点击时更新当前选中的Tab值。内容包括对`thisDay`和`thisTime`方法的说明,这两个方法用于处理点击事件,更新选中项的状态并输出相关信息。
681

被折叠的 条评论
为什么被折叠?



