更新记录

1.0.4（2022-08-13）

增加的左右联动功能

1.0.3（2022-08-10）

去掉一些提示,需要的可以自己去源文件内把注释取消即可

1.0.2（2022-08-09）

修复导航过多底部被挡住

平台兼容性

介绍

现在增加的左右联动功能

之前是左边点击右边跟着动,现在右边点击左边的选项也会滑动到相应的选项

测试数据也打包进来了,测试的时候建议复制到对应的目录,当然你也可以修改一下啊引入的数据路径

左侧选项导航滚动展示,图片在插件内,导入插件以后找到对应目录可以看到

关于导航的背景色,字体颜色等都在源文件的style部分,自行修改即可

目前只测试了h5和小程序其他端没测试

使用方法

里面的文件除了.vue的那个文件要保留,其他的都是可以删除的,那个演示的gif动图有点大

下面的两个参数都是必传的

在需要调用的页面

<template>
    <view>
        <view class="search">
            <!-- 输入框的样式自己写,或者使用别的框架的组件 -->
            <input  placeholder="请输入要搜索的内容" v-model="keyword"/>
        </view>
        <left-swipe-tab :topheight="topheight" :tabData="tabs"></left-swipe-tab>
    </view>
</template>

<script>
    //数据路径自己看一下,若是不对修改下
    import goods from "./goods.js";
    export default {
        data() {
            return {
                tabs:[],
                topheight:44,
                keyword: ''
            }
        },
        onReady() {
            this.tabs = goods;
        },
    }
</script>

<style lang="scss" scoped>
    .search{
        margin: 20rpx;
    }
</style>