更新记录

1.0.8（2023-06-14）

修改示例

1.0.7（2023-06-09）

增加预览

1.0.6（2023-05-25）

隐藏滚动条

平台兼容性

liu-shops-list适用于uni-app项目的双向联动列表、商城左右联动列表模版

本组件目前兼容微信小程序、H5

本组件是简单好用的双向联动列表，支持各类样式自定义，简单易修改

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

<template>
    <view>
        <liu-shops-list :leftData="leftData" :rightData="rightData" :activeColor="'#287BF8'" @lClick="leftChange"
            @rClick="rightChoose" @buyClick="buyClick"></liu-shops-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //左侧数据
                leftData: [{
                    name: 'type选择1',
                    id: 1
                }, {
                    name: 'type选择2',
                    id: 2
                }, {
                    name: 'type选择3',
                    id: 3
                }, {
                    name: 'type选择4',
                    id: 4
                }, {
                    name: 'type选择5',
                    id: 5
                }, {
                    name: 'type选择6',
                    id: 6
                }, {
                    name: 'type选择7',
                    id: 7
                }, {
                    name: 'type选择8',
                    id: 8
                }, {
                    name: 'type选择9',
                    id: 9
                }],
                rightData: [{
                    url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo1.png',
                    name: '头像1',
                    descr: '这就是一段简单的描述，也挺简单的',
                    price2: 10,
                    price1: 100
                }, {
                    url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo2.png',
                    name: '测试头像2测试测试测试测试测',
                    descr: '这就是一段简单的描述，这就是一段简单的描述，这就是一段简单的描述',
                    price2: 10,
                    price1: 100
                }, {
                    url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo3.png',
                    name: '头像3',
                    descr: '这就是一段简单的描述，这就是一段简单的描述，这就是一段简单的描述',
                    price2: 10,
                    price1: 100
                }, {
                    url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo1.png',
                    name: '头像4',
                    descr: '这就是一段简单的描述，这就是一段简单的描述，这就是一段简单的描述',
                    price2: 10,
                    price1: 100
                }, {
                    url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo5.png',
                    name: '头像5',
                    descr: '这就是一段简单的描述，这就是一段简单的描述，这就是一段简单的描述',
                    price2: 10,
                    price1: 100
                }]
            }
        },
        methods: {
            //点击左侧
            leftChange(index) {
                console.log(index)
            },
            //点击右侧
            rightChoose(rItem) {
                console.log(rItem)
            },
            //点击去抢购
            buyClick(item) {
                console.log(item)
            }
        }
    }
</script>

属性说明