小程序scroll-view实现左右联动效果

最新推荐文章于 2024-03-17 06:00:00 发布

花花花花和尚。

最新推荐文章于 2024-03-17 06:00:00 发布

阅读量783

点赞数

分类专栏： JS 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_45139365/article/details/107051704

版权

本文介绍如何在小程序中使用scroll-view组件实现左右联动的效果。在实际操作中遇到一个问题，当点击左侧导航栏倒数第二个项时，active类名错误地应用到了前一个项上，目前问题尚未解决，期待技术大神指点。

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


<view class="context">
  <view class="left">
    <scroll-view scroll-y 
    style="height: {
   { height }}"
    scroll-top="{
   { navScrollTop }}"
    scroll-into-view="item{
   { currentIndex }}"
    >
      <view 
      wx:for="{
   { navList }}" 
      wx:key="index"
      data-id="item{
   {index}}"
      data-index="{
   { index }}"
      id="item{
   {index}}"
      class="{
   { currentIndex == index ? 'active' : '' }}"
      catchtap="changeNav"
      >
      {
   {
    item.title }}
      </view>
    </scroll-view>
  </view>
  <view class="right">
    <scroll-view scroll-y 
    style="height: {
   { height }}"
    scroll-with-animation
    scroll-into-view = "{
   { id }}"
    bindscroll='productScroll'>
      <view class="item" 
      wx:for="{
   { productList }}"
      wx:key="index"
      id='product-item{
   {index}}'
      >
        <view class="title"><text>{
   {
    item.title }}</text></view>
        <view class="list" 
        wx:for="{
   { item.list }}"
        wx:for-item="list"
        wx:key="index">
          <image src="{
   { list.imgURL }}"></image>
          <text>{
   {
    list.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

.context {
   
  box-sizing: border-box;
  display: flex;
}
.context .left {
   
  box-sizing: border-box; 
}
.context .left scroll-view {
   
  height: 100%;
  flex-shrink: 0
}
.context .left view {
   
  font-size: 28rpx;
  height: 70rpx;
  line-height: 70rpx;
  background: #ccc;
  box-sizing: border-box;
  padding: 0 20rpx
}
.context .left view.active {
   
  color: #f00
}
.context .right {
   
  text-align: center;
  font-size: 30rpx;
  font-weight: 700;
  flex: 1;
  line-height: 50rpx;
}
.context .list {
   
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
}
.context image {
   
  width: 120rpx;
  height: 120rpx;
}

Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    navList: [
      {
    title: '家用电器' },
      {
    title: '家居用品' }, 
      {
    title: '电脑办公' }, 
      {
    title: '食品酒类' },
      {
    title: '家用电器' },
      {
    title: '家居用品' }, 
      {
    title: '电脑办公' }, 
      {
    title: '食品酒类' }, 
      {