uniapp点餐或商城系统菜单左右联动

Uni-app实现滚动点餐商城页面

原创

于 2024-10-09 15:23:00 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

目前市面上很多小程序或者app都出现点餐或者商城类的，这里使用到了uniapp的内置组件scroll-view

注意：

这个组件用的时候要注意需要给滚动区域设置高度，滚动才能生效

需要给二级分类添加id，并且值不能已数字开头，可以加上类似于 :id="'item-' + index"与js中的api对应

实现的效果，如图所示

因为是从完整的代码中取得，若有样式问题请自行搭建补充

搭建html

左侧菜单品类


      <!-- 左侧一级分类 -->
      <scroll-view
        scroll-y="true"
        :scroll-with-animation="false"
        class="leftColumn"
      >
        <view>
          <view
            class="menu-item"
            v-for="(good, index) in orderlist"
            :key="good.categoryCode"
            :class="{ current: index === leftCilck }"
            :style="{ color: index === leftCilck ? iconColor : '#000' }"
            @click="clickMenuItem(index)"
          >
            <image
              :showLoading="true"
              v-if="good.categoryImage"
              :src="good.categoryImage"
              class="firstLevelImage"
            ></image>
            <span v-if="good.categoryName">{
  
  { good.categoryName }}</span>
          </view>
        </view>
      </scroll-view>

右侧菜单二级分类


      <!-- 右侧联动二级分类 -->
      <scroll-view
        ref="rightList"
        scroll-y="true"
        :scroll-with-animation="false"
        @scroll="mainScroll"
        :scroll-into-view="scrollInto"
      >
        <view class="'foods-wrapper'">
          <view
            class="food-list-hook"
            v-for="(item, index) in orderlist"
            :id="'item-' + index"
            :key="index"
          >
            <view class="title">{
  
  { item.categoryName }}</view>
            <view class="box" v-for="v in item.goods" :key="v.goodsCode">

最低0.47元/天解锁文章