[uniapp]uni-app商城分类，侧边栏和商品

图片：153511405205478.jpg

<pre class="brush:html;toolbar:false;"><template>
    <view class="row navBox" :style="scrollHeiht">
        <!-- 左侧一级分类列表 -->
        <scroll-view :scroll-top="scrollTopLeft" scroll-y class="leftNavBox col20-5 height-100">
            <view class="leftNavItem py-20 text-center" v-for="(item,index) in leftNavData" :key="index">
                <view @tap="leftTap(index)" :class="leftActiveIndex===index?'leftActive':''" class="leftNavContent py-10">
                    { { title } }
                </view>
            </view>
        </scroll-view>
            <!-- 右侧二级分类列表 -->
        <scroll-view @scroll="rightScroll" :scroll-top="scrollTop" scroll-y class="rightNavBox col20-15 height-100" scroll-with-animation>
            <view class="rightNavItem row justify-content-space-around align-items-center" v-for="(item,index) in rightNavData" :key="index">
                    <view class="font-bold text-center col-10">
                        商品分类{ { index+1} }
                    </view>
                    <view class="rightNavContent display-flex align-items-center justify-content-center flex-direction-column" v-for="(item1,index1) in item" :key="index1">
                        <image :src="item1.url"></image>
                       { {item1.title} }
                    </view>
            </view>
        </scroll-view>
    </view>
</template></pre>