更新记录

0.0.02（2022-08-20）

更新colList

0.0.01（2022-08-20）

发布

平台兼容性

mxio-scroll-x

当前版本是 vue3+ts，想使用vue2版本请到仓库地址查看

使用方法

属性

数据源dataSource

[
    {
        label: '',// 文本
        icon: '',// 图标 ，默认image标签，使用slot可自定义
    }
]

案例

<template>
    <view class="">
        传入dataSource数据源
    </view>
    <view class="" style="padding:20rpx">
        <view class="">
            第一屏4列,单行
        </view>
        <mxio-scroll-x :dataSource="dataSource" :barWidth="barWidth" :colList="11" :column="4" :barShow="barShow" @scrollItemEmitsClick="scrollItemEmitsClick">
        </mxio-scroll-x>
        <view class="">
            第一屏5列,单行
        </view>
        <mxio-scroll-x :dataSource="dataSource" :barWidth="barWidth" :colList="11" :column="5" :barShow="barShow" @scrollItemEmitsClick="scrollItemEmitsClick">
        </mxio-scroll-x>
        <view class="">
            第一屏5列,多行
        </view>
        <mxio-scroll-x :dataSource="dataSource" :barWidth="barWidth" :colList="7" :column="5" :barShow="barShow" @scrollItemEmitsClick="scrollItemEmitsClick">
        </mxio-scroll-x>
    </view>
    <view class="">
        自定义 slot
    </view>
    <view class="" style="padding:20rpx">
        <mxio-scroll-x :barWidth="barWidth" :colList="5" :column="5" :barShow="false" @scrollItemEmitsClick="scrollItemEmitsClick">
            <view v-for="(item, index) in dataSource" :key="index"
                :style="{'background':item.color}"  class="demo-scrollx-item">
                <image src="@/static/logo.png" mode="scaleToFill" class="demo-scrollx-item_img"></image>
                <view class="demo-scrollx-item_txt">{{item.label}}</view>
            </view>
        </mxio-scroll-x>
    </view>
</template>
<style lang="scss" scoped>
    .demo-scrollx-item{
        font-size: 24rpx;
        padding: 24rpx 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        .demo-scrollx-item_img{
            display: block;
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 12rpx;
        }
    }
</style>

• 会有两个版本
  • vue3+ts
  • vue2