微信小程序实现商城分类,点击左侧滚动到相应区域,滚动右侧高亮左侧导航(scroll-view)

前端榴脆骨

已于 2024-01-17 15:20:53 修改

阅读量575

点赞数 8

文章标签：微信小程序小程序

于 2024-01-17 14:34:46 首次发布

本文链接：https://blog.csdn.net/lllcuigu/article/details/135649779

版权


<view>
  <view class="cateBox">
    <!-- 左侧列表 -->
    <scroll-view class="cate-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
      <view class="cate-left-list" wx:for="{{shopList}}" wx:key="index" bindtap="tapselect" data-index="{{index}}">
        <view class="{{currentTab==index ? 'activeItem':'cate-left-item'}} " >
          <label></label><text>{{item.navtitle}}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 右侧列表 -->
    <scroll-view class="cate-right" style="height: 100vh;" scroll-y="true" bindscroll="mainScroll" scroll-into-view="cate-{{mainCur}}"
      scroll-with-animation>
      <view wx:for="{{shopList}}" wx:key="index" id="cate-{{index}}">
        <view class="cate-right-title">
          <view class="line"></view>
          <text>{{item.navtitle}}</text>
        </view>
        <view class="cate-right-list">
          <view class="cate-right-item" wx:for="{{item.shop}}" wx:key="childindex" wx:for-item="child"
            bindtap="getShop" data-child="{{child}}">
            <image src="{{child.shopimage}}" mode=""></image>
            <text>{{child.shoptitle}}</text>
          </view>
        </view>
      </view>
      <view style="height: 100px;"></view>
    </scroll-view>
  </view>

</view>


Page({

    data: {
     
        shopList:[
          {
            navtitle: '分类1',
            shop: [{
                    shoptitle: "轮胎1",
                    shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
                },
                {
                    shoptitle: "轮胎2",
                    shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
                },
                {
                    shoptitle: "轮胎3",
                    shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
                },
                {
                    shoptitle: "轮胎4",
                    shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
                }
            ]
        },
        {
            navtitle: '分类2',
            shop: [{
                shoptitle: "轮胎1",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎2",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎3",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎4",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            }
            ]
        },
        {
            navtitle: '分类3',
            shop: [{
                shoptitle: "轮胎1",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎2",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎3",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎4",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            }
            ]
        },
        {
            navtitle: '分类4',
            shop: [{
                shoptitle: "轮胎1",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎2",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎3",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎4",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            }
            ]
        },
        {
            navtitle: '分类5',
            shop: [{
                shoptitle: "轮胎1",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎2",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎3",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎4",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            }
            ]
        },
        {
            navtitle: '分类6',
            shop: [{
                shoptitle: "轮胎1",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎2",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎3",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎4",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            }
            ]
        },
        {
            navtitle: '分类7',
            shop: [{
                shoptitle: "轮胎1",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎2",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎3",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            },
            {
                shoptitle: "轮胎4",
                shopimage: "https://img20.360buyimg.com/babel/s590x470_jfs/t20270114/102162/22/20269/61727/65a4ccaeF48dc4510/0144871874125bc0.jpg.webp",
            }
            ]
        },
        ],//
        currentTab: 0,
        mainCur: 0,
        verticalNavTop: 0,
        list: [{}],
  
     
    },
    onLoad(options) {
      // this.getHeight();
    //   this.getShopList();//先获取商品数据
    },
    // 获取商品数据
    getShopList(){
       wx.request({
         url: '',
         header:{
            'content-type': 'application/x-www-form-urlencoded'
         },
         method:'GET',
         success:(res)=>{
             console.log('商品分类',res.data.data)
            if(res.data.data.length!==0){
             this.setData({
                 shopList:res.data.data
             })
             this.getHeight()
            }
             
         }
       })
    },
 // 选择的商品
    getShop(e){
     console.log(e.currentTarget.dataset.child)
    },

     
      //点击左侧按钮
      tapselect(e) {
        this.setData({
          currentTab:e.currentTarget.dataset.index,
          mainCur:e.currentTarget.dataset.index,
          verticalNavTop: (e.currentTarget.dataset.index - 1) * 50
        })
      
      },
      //右侧滚动
      mainScroll(e) {
       
        let scrollTop = e.detail.scrollTop + 10;
        for (let i = 0; i < this.data.list.length; i++) {
          if (scrollTop > this.data.list[i].top && scrollTop < this.data.list[i].bottom) {
            // 此处屏蔽，避免点击最后一个回退， 但是没有右边滚动指示
            if(this.data.currentTab != this.data.list.length - 1){
             
              this.setData({
                currentTab:i,
                verticalNavTop:(i-1)*50
              })
              
              return false
            }
            
          }
        }
      },
      //获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在onload生命周期里调用
      getHeight() {
        var top = 0;
        var bottom = 0;
        var temp = 0;
        for (let i = 0; i < this.data.shopList.length; i++) {
          let view = wx.createSelectorQuery().select("#cate-" + i)
  
          // #ifdef  MP-WEIXIN
          view = wx.createSelectorQuery().in(this).select("#cate-" + i);
          //	#endif
  
  
          view.fields({
            size: true
          }, data => {
            top = temp;
            bottom = temp + data.height;
            this.data.list[i] = {
              top: top,
              bottom: bottom
            };
            temp = bottom;
          }).exec();
        }
        // console.log(this.data.list)
  
      }
    
  
  
 
})

.cateBox {
  position: absolute;
  bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
}

.cate-left {
  width: 200rpx;
  background: #f4f4f4;
  height: 100%;
}

.cate-left-item {
  background-color: rgb(245,245,245);
  height: 50px;
  line-height: 50px;
  font-size: 28rpx;
  align-items: center;
}

.activeItem {
  background: #fff;
  height: 50px;
  line-height: 50px;
  color: red;
  font-size: 32rpx;
  align-items: center;
  text-align: center;
}

.cate-left-item label {
  width: 4rpx;
  height: 15px;
  float: left;
  background: #f4f4f4;
}

.cate-left-item.activeItem label {
  background: #0bbbef;
}

.cate-left-item text {
  width: 196rpx;
  font-size: 28rpx;
  display: block;
  text-align: center;
}

/* 右侧*/
.cate-right {
  flex: 1;
}

.cate-right-title {
  text-align: center;
  font-size: 28rpx;
  margin-top: 20rpx;
  line-height: 80rpx;
  position: relative;
}

.cate-right-title .line {
  position: absolute;
  height: 2rpx;
  width: 300rpx;
  top: 39rpx;
  left: 50%;
  margin-left: -150rpx;
}

.cate-right-title text {
  background: #fff;
  padding: 0 10px;
  position: relative;
  /* color: #999; */
}

.cate-right-list {
  height: auto;
  overflow: hidden;
}

.cate-right-item {
  width: 33.33%;
  float: left;
  margin-top: 20rpx;
}

.cate-right-item image {
  width: 160rpx;
  height: 160rpx;
  display: block;
  margin: 0 auto;
}

.cate-right-item text {
  display: block;
  text-align: center;
  font-size: 24rpx;
}