更新记录

1.0.0（2022-08-25） 下载此版本

1、仿美团外卖商品列表。

平台兼容性

uni-app

仿美团外卖商品列表

简易实现美团外卖商品列表，没什么技术难点，简单来说就是两个scroll-view协作，并且两个scroll-view不会滑动冲突。

简介

左右两个scroll-view简易实现美团外卖商品列表功能。rightBar属性仅为示例，可根据实际数据结构二次开发。

属性介绍

1、shopList

2、leftBar

3、rightBar

事件介绍

使用示例

<view class="container">
        <bugking7-shop-view 
        :shopOptions="shopOptions" 
        @rightBarItemClick="handleRightClick"></bugking7-shop-view>
</view>

import tabbarItem from '@/pages/index/data.js'

data() {
    return {
        shopOptions: {
            shopList: tabbarItem.tabbarItem,
            leftBar:{
                leftBarWidth:'25%',
                leftBarBgColor:'',
                leftBarItemHeight:'40px',
                leftBarItemFontSize:'13px',
                leftBarItemSelectFontSize:'14px',
                leftBarItemFontWeight:'400',
                leftBarItemSelectFontWeight:'500',
                leftBarItemFontColor:'black',
                leftBarItemSelectFontColor:'#fff',
                leftBarItemBgColor:'#f5f5f5',
                leftBarItemSelectBgColor:'#2979ff'
            },
            rightBar:{
                rightBarWidth:'75%',
                rightBarBgColor:'white',
                rightBarItemImgWidth:'40px',
                rightBarItemTitleFontSize:'15px',
                rightBarItemTitleFontWeight:'500',
                rightBarItemTitleFontColor:'black',
                rightBarItemDesFontSize:'13px',
                rightBarItemDesFontWeight:'300',
                rightBarItemDesFontColor:'gray',
                rightBarItemPriceFontSize:'15px',
                rightBarItemPriceFontWeight:'600',
                rightBarItemPriceFontColor:'red',
            }
        }
    }
},
methods: {
    handleRightClick(e){
        console.log(e)
    }
}

数据结构示例（shopList）

本组件仅为示例，商品列表数据只为测试使用。如果要在项目中使用本组件，请根据数据结构二次开发。注：shopList数据结构须与二次开发组件中右部商品列表v-for时一致。

export default {
    "tabbarItem": [
        {
            "name": "京东",
            "id": "jd",
            "list": [
                {
                    "title": "京东plus年卡",
                    "subTitle": "限时优惠",
                    "desc": "详情请点击>>>",
                    "price": "￥99",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/621c6953-882d-4bbc-9afa-9adcfcc99c9f.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=262&groupId=296&productId=8980413150410",
                    "type": "link",
                    "imgPath": ""
                },
                {
                    "title": "1号店年卡",
                    "subTitle": "领取12个月鸡蛋",
                    "desc": "详情请点击>>>",
                    "price": "￥188",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/57ce3357-2c6d-4c13-bd4f-ab851a6de4bd.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=262&groupId=296&productId=2380704173252",
                    "type": "link",
                    "imgPath": ""
                }
            ]
        },
        {
            "name": "腾讯视频",
            "id": "txsp",
            "list": [
                {
                    "title": "月卡",
                    "subTitle": "限时优惠",
                    "desc": "详情请点击>>>",
                    "price": "￥18",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/4bc77267-4982-44c3-8af9-19b2543329f2.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=157&groupId=106&productId=200309073",
                    "type": "link",
                    "imgPath": ""
                },
                {
                    "title": "季卡",
                    "subTitle": "限时优惠",
                    "desc": "详情请点击>>>",
                    "price": "￥50",
                    "avatar": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7c798a00-b51f-42a8-bcad-d38005229108/4bc77267-4982-44c3-8af9-19b2543329f2.jpeg",
                    "link": "https://hulumengke.suyur.com/detail?tid=500507660&mid=600309072&categoryId=157&groupId=106&productId=200309074",
                    "type": "link",
                    "imgPath": ""
                }
            ]
        }
    ]
}

存在问题

1、右部商品列表滑动时，左部导航栏暂未实现实时定位

uniapp中scroll-view的滑动事件监听，暂未实现根据计算滑动距离改变左部导航栏实时定位。如果有好的实现方式，欢迎评论留言。

友情链接

二次元、动漫、游戏、cos、美女等壁纸免费下载，欢迎扫码体验

短视频免费去水印、藏头诗生成、星座运势、星座配对等，欢迎扫码体验

每日精选星座推文、在线客服，欢迎扫码关注