image.png

 <div class="ingredients-list">
          <div class="ingredient-item" v-for="(item, index) in $tools.metadata.foodBankType" :class="{'active': index === activeFoodIndredientIndex}" @click="selectFood(item, index)">
            <span class="name">{{ item.label }}</span>
          </div>
        </div>
        <div class="food-container" ref="rightFoodList">
          <div class="food-item-select" v-for="item in rightFoodList" :key="item.id">
            <div class="select-left">
              <div class="food-name">{{ item.name }}</div>
              <div class="food-energe">
                <span class="value">{{ item.kcal ? (item.kcal).toFixed(2) : '' }}</span>
                <span>千卡/100g</span>
              </div>
            </div>
            <!--            添加食物-->
            <img class="add-icon" @click.stop="showSelectFood(item)" src="https://cdn.xun-qi.cn/seer/base/upload/img/1671074807714.png"/>
          </div>
        </div>

js部分

selectFood(item, index) {
      this.activeFoodIndredientIndex = index
      this.query.type = item.value
      this.refresh()
    },`

 refresh() {
      this.setLoading(true)
      this.loadYingKangFoodBank({
        search: this.query.search,
        type: this.query.type,
        callback: (res) => {
          console.log(res)
          this.rightFoodList = res.data.content
          this.setLoading(false)
          this.$nextTick(()=>{
            let top = this.$refs.rightFoodList.scrollTop
            // 定时改变高度，实现滚动效果
            const timeTop = setInterval(() => {
              this.$refs.rightFoodList.scrollTop = top -= 30;
              if (top <= 0) {
                clearInterval(timeTop);
              }
            }, 10);
          })
        }
      })
    },