uniapp横向滚动组件组件-可直接使用

这里用到了uv-ui的组件：uv-tabs
activeStyle为激活的tabs样式
inactiveStyle为默认tabs样式
scrollable是否可滚动

<template>
    <view>
        <uv-tabs 
        lineColor="transparent" 
        :activeStyle="{
                color: '#ffffff',
                background: '#2D26F2',
                height: '50rpx',
                padding: '0px 10px',
                borderRadius: '8rpx'
            }" 
            :inactiveStyle="{
                color: '#666666',
                background: '#F5F5F5',
                height: '50rpx',
                padding: '0px 10px',
                borderRadius: '8rpx'
            }" 
            :itemStyle="itemStyle" 
            :list="list" 
            :keyName="keyName" 
            :keyValue="keyValue" 
            :scrollable="true" 
            :current="target"
         @click="onClick"></uv-tabs>
    </view>
</template>

<script>
    export default {
        components: {},
        props: {
      // 列表
            list: {
                type: Array,
                default: () => [],
            },
      // 定位下标
            target: {
                type: String | Number,
                default: 0,
            },
      // 根据自定字段渲染name
            keyName: {
                type: String,
                default: "name",
            },
      // 根据指定字段获取点击的值
            keyValue: {
                type: String | Number,
                default: "",
            }
        },
        data() {
            return {
        // tabs的样式
                itemStyle: `display: inline-block
                            text-align: center;
                            line-height: 50rpx;
                            padding-left: 0; 
                            padding-right: 16rpx; 
                            `
            };
        },
        watch: {},
        methods: {
      // 点击标签向外传递当前标签值
            onClick(e) {
                this.$emit("onTabs",e)
            },
        }
    }

</script>

直接复制到组件中即可引入使用

属性：

• activeStyle： 选中的tab样式
• inactiveStyle： 未选中的tab样式
• itemStyle： tabs的样式
• list： tabs数组
• keyName： tabs的名称展示字段
• keyValue： tabs选中的值
• scrollable： 是否滚动
• current： 当前选中的tabs，用于回显

事件：

• onTabs：点击tabs后返回当前标签值