SegmentedControl 分段器

用作不同视图的显示,组件名:uni-segmented-control,代码块: uSegmentedControl。

使用方式:

script 中引用组件

  1. import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
  2. export default {
  3. components: {uniSegmentedControl},
  4. data() {
  5. return {
  6. items: ['选项卡1','选项卡2','选项卡3'],
  7. current: 0
  8. }
  9. },
  10. methods: {
  11. onClickItem(index) {
  12. if (this.current !== index) {
  13. this.current = index;
  14. }
  15. }
  16. }
  17. }

SegmentedControl 在 template 中的使用

  1. <template>
  2. <view>
  3. <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964"></uni-segmented-control>
  4. <view class="content">
  5. <view v-show="current === 0">
  6. 选项卡1的内容
  7. </view>
  8. <view v-show="current === 1">
  9. 选项卡2的内容
  10. </view>
  11. <view v-show="current === 2">
  12. 选项卡3的内容
  13. </view>
  14. </view>
  15. </view>
  16. </template>

SegmentedControl 属性说明:

属性名类型默认值说明
currentNumber0当前选中的tab索引值,从0计数
valuesArray<String>-选项数组
style-typeStringbutton分段器样式类型,可选值:button(按钮类型),text(文字类型)
active-colorString#007aff选中的标签背景色与边框颜色
@clickItemEventHandle-组件触发点击事件时触发,参数为当前选中的tab索引值 current