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

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

我们都知道实现左右联动以及上拉加载，下拉刷新可以用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" 
	            >
1
2
3
4
5
6
7
8
9
10
11
12

 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);
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

// 二级分类
  <scroll-view scroll-x="true"  class ="nameCN nameCNBox" scroll-into-view="id{{currentIndex}}" 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>
1
2
3
4
5
6
7
8
9

// 拿到三级分类滑动时的当前索引
 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
            }
          }
        })
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：设置横向滚动需要确定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>
1
2
3
4
5
6
7
8

	// 页面加载完毕时存二级分类节点信息,需要用到定时器
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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

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

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