uniapp竖向滑块
时间: 2023-11-17 10:04:45 浏览: 44
可以使用uni-ui中的u-step组件来实现竖向滑块的效果。具体步骤如下:
```html
<template>
<view class="container">
<u-step :current="current" :steps="steps" direction="vertical" @click="changeStep"></u-step>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
steps: [
{
title: '步骤1',
desc: '这是第一步'
},
{
title: '步骤2',
desc: '这是第二步'
},
{
title: '步骤3',
desc: '这是第三步'
}
]
}
},
methods: {
changeStep(index) {
this.current = index
}
}
}
</script>
<style>
.container {
height: 300rpx;
}
</style>
```
在上述代码中,我们使用了u-step组件来实现竖向滑块的效果。其中,direction属性设置为vertical即可实现竖向滑块。通过设置current属性来控制当前所在的步骤,通过点击事件来改变current的值,从而实现滑块的滑动效果。