小程序-实现左右菜单联动功能

码客前端

已于 2022-08-08 08:36:39 修改

阅读量3k

点赞数 8

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

于 2022-08-06 10:42:23 首次发布

本文链接：https://blog.csdn.net/weixin_47124112/article/details/126190794

版权

小程序专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在这里插入图片描述

实现效果类似：

1.左边点击 -> 右边滚动的相应的分类

2.右边滑动 -> 左边的样式跟着改变

wxml

<view class="goodsList">
  <!-- 左边商品分类 -->
  <scroll-view class="left" scroll-y scroll-top="{{scrollTops}}">
    <view wx:for="{{goodsList}}" class="goodsTitle {{tabCur==index?'active':''}}" wx:key="index" bindtap="gl" id="{{index}}">{{item.title}}</view>
  </scroll-view>

  <!-- 右边商品列表 -->
  <scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="scroll-{{rightCur}}" bindscroll="scrollLink">
    <view wx:for="{{goodsList}}" class="goodsItem" id="scroll-{{idxs}}" wx:for-item="itemNames" wx:key="idxs" wx:for-index="idxs">
      <view>{{itemNames.title}}</view>
      <block wx:for="{{itemNames.list}}" wx:for-item="itemName" wx:for-index="idx" wx:key="idx">
        <view class="listItem">
          <image src="{{itemName.img}}" class="img"></image>
          <view class="name">{{itemName.name}}</view>
          <view class="sell">{{itemName.sell}}</view>
          <view class="price">{{itemName.price}}￥</view>
          <image src="../../img/加号,收起,添加.svg" class="add"></image>
        </view>
      </block>
    </view>
  </scroll-view>
</view>

js

// pages/member/member.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabCur: 0, //当前项
    rightCur: 0, // 用于实现左边联动右边
    goodsList: [{
        title: '碳酸类型',
        id: 1,
        list:[{
          name:'可口可乐',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'雪碧',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F93%2F00%2F5982eed63cc27_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339581&t=8bbd7f16e03512ff0e8c32100bbcfc86',
          sell: '月售：88',
          price: '4.8'
        },
        {
          name:'可口可乐',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'雪碧',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F93%2F00%2F5982eed63cc27_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339581&t=8bbd7f16e03512ff0e8c32100bbcfc86',
          sell: '月售：88',
          price: '4.8'
        },
        {
          name:'可口可乐',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'雪碧',
          img: 'https://img2.baidu.com/it/u=3616759465,2727399041&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500',
          sell: '月售：88',
          price: '4.8'
        }
        ]
      }, {
        title: '奶茶类型',
        id: 2,
        list:[{
          name:'阿萨姆奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'香飘飘奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'阿萨姆奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'香飘飘奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'阿萨姆奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'香飘飘奶茶',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2FO1CN01SHPIlm2GVfaCwHCfx_%21%212211349499021-0-cib.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285715&t=c575199b747c342d0844a1d8ab593a04',
          sell: '月售：108',
          price: '4.8'
        }
        ]
      },
      {
        title: '矿泉水',
        id: 3,
        list:[
          {
          name:'农夫山泉',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'怡宝',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'农夫山泉',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'怡宝',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'农夫山泉',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defanli.com%2Fi4%2F792547767%2FO1CN01HuwT1T27FKjNjeyQO_%21%21792547767.jpg_q90.jpg&refer=http%3A%2F%2Fimg.defanli.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662285923&t=29d7244212e15dc78bb5bdf1d617a45f',
          sell: '月售：108',
          price: '4.8'
        },
        {
          name:'怡宝',
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F11%2F05%2FFonL0_5VwTfHmiwQiAlBtIZiy3sq.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662339509&t=e1988f3159060384664ce3de18e45aaf',
          sell: '月售：108',
          price: '4.8'
        }
        ]
      },
    ]
  },
  gl(e) {
    this.setData({
      tabCur: e.currentTarget.id,
      rightCur: e.currentTarget.id,
    })
  },
  scrollLink(e) {
    let list = this.data.goodsList
    let itemHeight = 0;
    for (let i = 0; i < list.length; i++) {
      //拿到每个元素
      let els = wx.createSelectorQuery().select("#scroll-" + i);
      els.fields({
        size: true
      }, function (res) {
        list[i].top = itemHeight;
        itemHeight += res.height;
        list[i].bottom = itemHeight
      }).exec()
    }

    // 拿到滚动的高度
    let scrollTop = e.detail.scrollTop;
    for (let i = 0; i < list.length; i++) {
      if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
        this.setData({
          tabCur: i,
        })
        return false
      }
    }
  }
})

wxss文件

.goodsList{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  float: left;
  width: 260rpx;
  background-color: #EEEEEE;
  height: 100vh;
}
.left .goodsTitle{
  line-height: 100rpx;
  text-align: center;
}
.active{
  background-color: #fff;
}
.right{
  height: 100vh;
}
.goodsItem{
  padding: 20rpx;
}
.goodsName{
  text-align: center;
}

.listItem{
  position: relative;
  height: 180rpx;
  margin:  20rpx 0 ;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
}
.listItem .img{
  position: absolute;
  top: 0;
  left: 0;
  width: 180rpx;
  height: 180rpx;
  border-radius: 20rpx;
}
.listItem .add{
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  width: 40rpx;
  height: 40rpx;
}
.listItem .name{
  position: absolute;
  top: 0;
  left: 190rpx;
  font-size: 36rpx;
  font-weight: 700;
}
.listItem .sell{
  position: absolute;
  top: 40%;
  left: 190rpx;
  color: #858687;
  font-size: 30rpx;
}
.listItem .price{
  position: absolute;
  bottom: 5rpx;
  left: 190rpx;
  color: #FF4A26;
  font-weight: 700;
}