vue仿饿了么app中vue和better-scroll实现列表左右联动效果

一.实现思路

(1)实现上是左右分别一个better-scroll列表
(2)利用计算右侧列表每一个大区块的高度来计算左侧的位置
  • 1
  • 2

二.实现

1.实现左右两个better-scroll

(1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域)

左边滚动列表dom
 <div class="menu-wrapper" v-el:menu-wrapper>
      <ul>
        <li v-for="item in goods" class="menu-item"
            :class="{'current':currentIndex === $index}"
            @click="selectMenu($index,$event)">
          <span class="text border-1px">
            <span v-show="item.type > 0" class="icon"
              :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>

右边滚动列表dom
<div class="food-wrapper" v-el:food-wrapper>
      <ul>
        <li v-for="item in goods" class="food-list food-list-hook">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for="food in item.foods" class="food-item border-1px">
              <div class="icon">
                <img width="57" height="57" :src="food.icon">
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}</span>
                  <span>好评率{{food.rating}}%</span>
                  <div class="price">
                    <span class="now">¥{{food.price}}</span>
                    <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  • 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

在数据请求完成后的$nextTick中初始化better-scroll,就能实现两个列表分别能滚动,至于联动,要后面自己做

_initScroll() {
        this.menuScroll = new BScroll(this.$els.menuWrapper,{
          click:true   //允许better-scroll列表上的点击事件
        });
        this.foodsScroll = new BScroll(this.$els.foodWrapper,{
          probeType : 3   //让better-scroll监听scroll事件
        });
        this.foodsScroll.on('scroll',(pos) => {
          this.scrollY =Math.abs(Math.round(pos.y));
        })
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2.实现联动效果

(1)具体的联动实现思路

  • 在渲染完成后($nextTick内),初始化better-scroll,并在初始化函数内添加右侧列表的scroll监听事件,并记录scrollY值到,存入vue的data中
  • 在渲染完成后($nextTick内),计算右侧列表的每一个大区块的高度,并累加,存入数组listHeight
  • 因为scrollY值在滚动中总是不断变化的,所以在computed中计算出currentIndex,当前滚动区域是哪一个大区块,也就是listHeight数组的下标
  • 在dom中根据currentIndex应用左侧列表被点中的样式
  • 在左侧列表某一项被点中的时候,右侧列表滑动到某一个大块区域,
//初始化better-scroll
_initScroll() {
        this.menuScroll = new BScroll(this.$els.menuWrapper,{
          click:true
        });
        this.foodsScroll = new BScroll(this.$els.foodWrapper,{
          probeType : 3
        });
        this.foodsScroll.on('scroll',(pos) => {
          this.scrollY =Math.abs(Math.round(pos.y));
        })
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
_calculateHeight() {
        let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
        let height = 0;
        this.listHeight.push(height);
        for(let i=0;i<foodList.length;i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
computed: {
      currentIndex() {
        for(let i=0;i< this.listHeight.length;i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i+1];
          if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
            return i;
          }
        }
        return 0;
      }
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<div class="menu-wrapper" v-el:menu-wrapper>
      <ul>
        <!--  :class="{'current':currentIndex === $index}" 就是根据currentIndex应用左侧列表被点中的样式 -->
        <li v-for="item in goods" class="menu-item"
            :class="{'current':currentIndex === $index}"
            @click="selectMenu($index,$event)">
          <span class="text border-1px">
            <span v-show="item.type > 0" class="icon"
              :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
//被点击事件
//dom
<div class="menu-wrapper" v-el:menu-wrapper>
      <ul>
        <!-- @click="selectMenu($index,$event)" 就是点击事件 -->
        <li v-for="item in goods" class="menu-item"
            :class="{'current':currentIndex === $index}"
            @click="selectMenu($index,$event)">
          <span class="text border-1px">
            <span v-show="item.type > 0" class="icon"
              :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
//js    
selectMenu(index,event) {
        if(!event._constructed) {
          return ;
        }
        let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
        let el = foodList[index];
        this.foodsScroll.scrollToElement(el,300);
      },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值