小程序scroll-view实现三级分类左右联动，上拉加载以及下拉刷新

Posted 2023-04-03 婷小医仙

小程序实现三级分类左右联动，上拉加载以及下拉刷新

我们都知道实现左右联动以及上拉加载，下拉刷新可以用scroll-view或者页面层级onPageScroll来实现，今天这里来讲讲如何scroll-view完成以上需求

1.实现scroll-view的上拉加载下拉刷新

lower-threshold = ‘-50’,这里很坑，模拟器和安卓不行，ios可以，在滚动条触底的时候，ios可以继续往上拉一段距离，此时会来到下一页，无法兼容安卓，

//需要 去掉下拉刷新的动画
	<scroll-view scroll-y="true" 
	            bindscroll="scrollList" 
	            scroll-top="scrollViewHeight" 
	            bindscrolltolower="scrolltolower"  
	            lower-threshold = '-50'
	            scroll-with-animation 
	            bindrefresherrefresh="handleRefresher"
	            refresher-triggered="isTriggered" 				                                  
	            refresher-default-style="none"
	            class="product-sort-detail scrollBox" 
	            >

 scrolltolower(e)
    if(this.sortIndex<this.productCategories.length-1 )
       this.sortIndex++
     
	,
handleRefresher()
	this.isTriggered=true
 	if(this.sortIndex<this.productCategories.length-1 
 	&& this.sortIndex>0 )
	  this.sortIndex--
	
   setTimeout(() => 
	  this.isTriggered=false
  	, 500);
 

2. 滑动三级分类，二级分类跟着滚动有两种方式,scroll-into-view锚点和scroll-left

scroll-into-view锚点,前提得给商品列表每个子选项 一个唯一class，三级分类上下滑动，监听高度变化，拿到当前索引，动态改变二级分类的class名

// 二级分类
  <scroll-view scroll-x="true"  class ="nameCN nameCNBox" scroll-into-view="idcurrentIndex" scroll-with-animation ></scroll-view>
  // 三级分类
   <scroll-view scroll-y="true" 
            bindscroll="scrollList" 
            scroll-top="scrollViewHeight" 
            scroll-with-animation 
            class="product-sort-detail scrollBox" 
            style=" height: 100vh;">内容</scroll-view>

// 拿到三级分类滑动时的当前索引
 scrollList(e)
    // 距离顶部高度
  	let height = 80
  	// 遍历三级分类
    this.initProduct.forEach((item,index) => 
        if(this.scrollTemp) // 防止点击快速定位栏最后几项会重复调用scrollList的index赋值
	    	if(this.scrollViewHeight == item.top-height)
	        	this.scrollTemp = false
	        
          else
            if (e.detail.scrollTop >= item.top-height 
            && e.detail.scrollTop <= item.bottom-height) 
              this.currentIndex = index
            
          
        )
      ,

注意：设置横向滚动需要确定scroll-x的宽度，如果发现不滚动，检查下是否给了scroll-with-animation属性。
这个方法有缺点，始终将当前位置固定在头部，而且在你滑动过快的情况下会出现卡顿以及混乱，推荐第二种方法。

利用scroll-left实现，但是需要在页面加载的时候获取 二级分类每个子选项的信息

// 二级分类
 <scroll-view 
		  scroll-x="true"  
		  class ="nameCN nameCNBox"  
		  scroll-left="scrollLeft" 
		  scroll-with-animation
		  bindscroll="scrollX"
		   ></scroll-view>

	// 页面加载完毕时存二级分类节点信息,需要用到定时器
onLoad()
	setTimeout(() => 
       wx
         .createSelectorQuery()
         .selectAll('.nameCN')
         .boundingClientRect((rects) => 
           rects.forEach((rect,index) => 
             let obj = 
             obj.top = rect.top
             obj.left = rect.left
             obj.width = rect.width
             obj.index = index
             this.initNameCNList.push(obj) // 存到数组
           )
         )
         .exec()
     , 300);
 
 // 三级分类上下滚动事件
scrollList(e)
  let height = 50 // 根据需求可要可不要
	this.initProduct.forEach((item,index) => 
	// 划定区域， 如果页面滚动距离>每个子选项等top且<子选项等bottom，确定该索引，要么scroll-into-view定位二级分类， 要么用scroll-left
	  if (e.detail.scrollTop >= item.top-height 
	  &&e.detail.scrollTop <= item.bottom-height) 
		this.currentIndex = index
		this.getScrollLeft()
	  
	)
  ,
  // 二级分类
getScrollLeft()
	this.initNameCNList.map((item,index)=>
	  if(this.currentIndex === index)
		  //当前元素距离左边的距离-父元素距离左边的距离-父元素宽的一半+子元素宽的一半实现滚动居中
		  this.scrollLeft = item.left-this.nameCNBox.nameCNBoxLeft
		   - this.nameCNBox.nameCNBoxWidth/2 + item.width/2
		
	)
 
// 获取三级分类商品列表的信息
getInitProduct()
  setTimeout(() => 
    this.initProduct=[]
      wx
        .createSelectorQuery()
        .selectAll('.thirdBox')
        .boundingClientRect((rects) => 
          rects.forEach((rect,index) => 
            let obj = 
            obj.info = rect.dataset.item
            obj.index = index
            obj.top = rect.top
            obj.height= rect.height
            obj.bottom = rect.height + obj.top - 1
            this.initProduct.push(obj)
          )
        )
        .exec()
   , 500);
    

总结：滑动三级分类影响一级分类：上拉加载下拉刷新；滑动三级分类影响二级分类：bindscroll事件改变索引，scroll-into-view定位唯一类名，或者bindscroll事件改变索引，计算二级分类scrollLeft，scroll-left=“scrollLeft”

大致就是这些，在页面onload 的时候调用this.getInitProduct()需要定时器，细节点蛮多的，可能碰到一些大大小小的问题，慢慢排查吧

微信小程序实现左右联动的菜单列表

参考技术A 实现效果如下：

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：
scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；
scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素；
bindscroll：滚动时触发，event.detail = scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY

结构图示：

wxml:

js:

数据结构：

如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：

wxss: