doubleyong
管理员
管理员
  • 最后登录2020-12-03
  • 发帖数938
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:165回复:0

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

楼主#
更多 发布于:2020-11-12 10:17
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">
                    pw_item.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">
                        商品分类pw_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>
                        pw_item1.title
                    </view>
            </view>
        </scroll-view>
    </view>
</template></pre>

更加详细的代码,请参考 github

参考:
https://blog.csdn.net/peijiajing/article/details/105731057
https://ask.dcloud.net.cn/article/34949
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号