uni-app 左右联动，右边顶部仍可点击实现联动
uni-app 左右联动，右边顶部仍可点击实现联动
公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们：
1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。
2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。
3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。
4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。
5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。
6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。
7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449
商务微信：fan-rising
7x24小时在线，欢迎咨询了解
在 uni-app 中实现左右联动功能，同时确保右边顶部的元素仍然可以点击并触发相应事件，可以通过绑定滚动事件以及条件渲染来实现。以下是一个简单的代码示例，展示如何实现这一功能。
1. 页面布局
首先，我们在 pages/index/index.vue 文件中定义左右布局：
<template>
<view class="container">
<scroll-view scroll-y="true" @scroll="handleScroll" class="left-panel">
<!-- 左侧内容 -->
<view v-for="item in items" :key="item.id" class="item">{{ item.name }}</view>
</scroll-view>
<view class="right-panel">
<view class="top-bar" @click="handleClickTopBar">顶部按钮</view>
<scroll-view scroll-y="true" class="right-content" :scroll-top="scrollTop">
<!-- 右侧内容，与左侧联动 -->
<view v-for="item in items" :key="item.id" class="item">{{ item.description }}</view>
</scroll-view>
</view>
</view>
</template>
2. 样式定义
在 <style> 部分定义布局样式：
<style scoped>
.container {
display: flex;
}
.left-panel, .right-panel {
width: 50%;
height: 100vh;
overflow: hidden;
}
.right-panel .top-bar {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.7);
z-index: 10; /* 确保顶部按钮在最上层 */
}
.item {
height: 50px;
padding: 10px;
border-bottom: 1px solid #ddd;
}
</style>
3. 逻辑处理
在 <script> 部分处理滚动事件和点击事件：
<script>
export default {
data() {
return {
items: Array.from({ length: 50 }, (_, i) => ({ id: i, name: `Item ${i}`, description: `Description ${i}` })),
scrollTop: 0
};
},
methods: {
handleScroll(e) {
this.scrollTop = e.detail.scrollTop; // 获取左侧滚动位置并同步到右侧
},
handleClickTopBar() {
console.log('顶部按钮被点击');
// 在这里可以添加点击顶部按钮后的逻辑处理
}
}
};
</script>
总结
以上代码示例展示了如何在 uni-app 中实现左右联动，并确保右侧顶部的元素可以点击。通过监听左侧 scroll-view 的滚动事件，并将滚动位置同步到右侧的 scroll-view，同时利用 position: sticky 使顶部按钮保持在视口顶部并响应点击事件。这种方式可以灵活应用于各种需要联动滚动和点击交互的场景。
