uniapp 左右列表联动

最新推荐文章于 2024-07-04 12:03:06 发布

星辰呀--

最新推荐文章于 2024-07-04 12:03:06 发布

阅读量743

点赞数 8

文章标签： uniapp 前端

本文链接：https://blog.csdn.net/m0_67055620/article/details/138252232

版权

这是一个关于uniapp框架的左右列表联动实现的示例。左侧列表展示不同分类，右侧列表显示对应的子项，当滑动右侧内容时，会联动选中左侧对应的分类。通过监听滚动事件和计算元素位置来实现联动效果。

摘要由CSDN通过智能技术生成

<template>
   <view class="menu_box">
       <view class="tip">
           <image src="@/static/images/order_icon_prompt.png" mode="aspectFill"></image>
           <view>支付预付款，拼团成功后由团长点菜</view>
       </view>
       <view class="menu_list">
           <scroll-view :scroll-y="isScrollY" class="scroll-Y-l">
               <view class="scroll-view-item" :class="{'active':index == leftCurrent}"
                   v-for="(item,index) in rightList" :key="item.id" @tap="changeLeft(item,index)">
                   { {item.name}}
               </view>
           </scroll-view>
           <scroll-view :scroll-y="isScrollY" class="scroll-Y-r" :scroll-with-animation="true"
               :scroll-into-view="scrollIntoRight" @scroll="getCurrentHeight" @touchstart="isLeftClick = false">
               <view v-for="item in rightList" :key="item.id" :id="`item-${item.id}`">
                   <view class="category t-omit">{ {item.name}}</view>
                   <view class="item" v-for="k in item.childList" :key="k.id">
                       <view class="l">
                           <image src="#" mode="aspectFill"></image>
                       </view>
                       <view class="content">
                           <view class="row1_content t-omit">{ {k.name}}</view>
                           <view class="row2_content">月销100</view>
                           <view class="row3_content">
                               <view class="row3_l">
                                   <view><text>￥</text>60</view>
                                   <view>