十三 首页-推荐店铺滑块开发和滑块处理scroll-view（有点问题，注意细节哦）

重点说明：shop.vue使用commodity组件的之后，shop.vue将wrap属性传递给commodity组件来接收，注意在porps接收的时候设置默认值，这样当不传递的时候就可以使用默认值来展示对应的信息，传递了就使用传递的数据来展示信息。其他属性也是一样这样传递就可以了

shop.vue

<template>
    <view class="shop">
        <view class="shop-item">
            <view class="shop-img">
             <image class="shop-img" src="../../static/img/shop.png" mode=""></image>
            </view>
    </view>
    <scroll-view scroll-x="true" class="scroll-content" >
            <view class="scroll-item">
                    <commodity :dataList="shopList" wrap="no-wrap" hotWidth="200rpx" hotHeight="200rpx" fontSize='20rpx'></commodity>
            </view>

        </scroll-view>
        </view>
</template>

<script>
        import commodity from "@/components/common/commodity.vue"
        export default{
                components:{
                        commodity
                },
                data() {
                        return {
                                shopList:[{
                                                id:1,
                                                img:'../../static/img/shop-scroll.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'299',
                                                oprice:'699',
                                                discount:'5.5'
                                        },
                                        {
                                                id:2,
                                                img:'../../static/img/shop-scroll.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'269',
                                                oprice:'699',
                                                discount:'5.5'
                                        },
                                        {
                                                id:3,
                                                img:'../../static/img/shop-scroll.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'289',
                                                oprice:'688',
                                                discount:'5.5'
                                        },
                                        {
                                                id:4,
                                                img:'../../static/img/shop-scroll.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'289',
                                                oprice:'688',
                                                discount:'5.5'
                                        },
                                        {
                                                id:5,
                                                img:'../../static/img/shop-scroll.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'289',
                                                oprice:'688',
                                                discount:'5.5'
                                        },
                                        {
                                                id:6,
                                                img:'../../static/img/shop-scroll.png',
                                                name:'爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice:'289',
                                                oprice:'688',
                                                discount:'5.5'
                                        }]
                        }
                }
        }
</script>

<style scoped>
        .shop-img{
                width: 100%;
                height: 200rpx;
        }
        .scroll-content{
                width: 100%;
                white-space: nowrap;
        }
        .scroll-item{
                display: inline-block;
        }
</style>