更新记录

1.0.2（2021-06-30） 下载此版本

优化

1.0.1（2021-06-21） 下载此版本

左侧菜单

平台兼容性

菜单例子

<template>
    <view>

        <view>
            imgSize 图片尺寸<br>
            bottomSize 滑动到结束位置,底部距离<br>
            @listenEvent 点击产品列表的返回事件<br>
            @listenMenu 点击菜单列表的返回事件<br>
        </view>
        <menuList :menuLists="lists" 
            imgSize="150rpx"
            bottomSize="200rpx"
            @listenEvent="myEvent" 
            @listenMenu="myMenu">
        </menuList>
    </view>
</template>

<script>
    import menuList from '@/components/sehochen-left-menu/menuList.vue';
    export default {
        components:{
            menuList
        },
        data() {
            return {
                lists:[{
                    title:"新品推荐",
                    goods:[{
                        label:"泡泡水",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'50',
                        price:'8'
                    },{
                        label:"蜜桃水",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"蜜桃四季春",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"蜜桃四季春",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"蜜桃四季春",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"蜜桃四季春",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"满杯百香果",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"冰鲜柠檬水",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    },{
                        label:"珍珠奶茶",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'54',
                        price:'9'
                    }]
                },{
                    title:"热销产品",
                    goods:[{
                        label:"冰淇淋",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'5w',
                        price:'155'
                    },{
                        label:"奶昔",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'50',
                        price:'15'
                    }]
                },{
                    title:"热销产品2",
                    goods:[{
                        label:"冰淇淋",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'5w',
                        price:'155'
                    },{
                        label:"奶昔",
                        img:"https://cdn.uviewui.com/uview/swiper/3.jpg",
                        hot:'50',
                        price:'15'
                    }]
                }]
            }
        },
        methods: {
            //列表的点击事件
            myEvent(e){
                console.log(e)
                console.log(e.label)
            },
            //菜单的点击事件
            myMenu(e){
                console.log(e)
                console.log(e.title)
            },
            //自定义事件
            customize(e){
                console.log(e)
            }
        }
    }
</script>

<style>

</style>

自定义

<template>
    <view>

        <view>
            imgSize 图片尺寸<br>
            bottomSize 滑动到结束位置,底部距离<br>
            :isNav="true" 是否开启自定义菜单<br>
            isSlot="true" 是否开启自定义列表<br>
            slot="nav" 菜单 slot="list" 列表
            @listenEvent 点击产品列表的返回事件<br>
            @listenMenu 点击菜单列表的返回事件<br>
        </view>
        <menuList
            imgSize="150rpx"
            bottomSize="200rpx"
            :isNav="true"
            :isSlot="true"
            @listenEvent="myEvent" 
            @listenMenu="myMenu">
            <!-- 自定义菜单 -->
            <view slot="nav" v-for="(item,index) in 10" style="text-align: center;">
                <view style="background-color: red;margin: 20rpx;" @click="customize(index)">
                    自定义菜单{{index}}
                </view>
            </view>

            <!-- 自定义列表 -->
            <view slot="list" v-for="(item,index) in 100" style="text-align: center;">
                <view style="background-color: red;margin: 20rpx;" @click="customize(index)">
                    自定义列表{{index}}
                </view>
            </view>

        </menuList>
    </view>
</template>

<script>
    import menuList from '@/components/sehochen-left-menu/menuList.vue';
    export default {
        components:{
            menuList
        },
        data() {
            return {

            }
        },
        methods: {
            //列表的点击事件
            myEvent(e){
                console.log(e)
                console.log(e.label)
            },
            //菜单的点击事件
            myMenu(e){
                console.log(e)
                console.log(e.title)
            },
            //自定义事件
            customize(e){
                console.log(e)
            }
        }
    }
</script>

<style>

</style>