列表滑动对应分类列表也变化(如微信联系人、商家餐品列表)

太过爱你忘了你带给我的痛 2021-07-24 22:36 205阅读 0赞

思路:
    要想左侧分类对应的标题样式和右侧内容滑动到标题对应内容时选中
    这里采用better-scroll来实现滚动
    
    在数据更新后,界面更新时($nextTick)
    	1、通过ref获取右侧每个列表块的高度(每个li)
    	2、实时获取当前滚动条的y坐标
    	3、利用计算属性(数据变化就会执行)返回当前y坐标应该对应的index
    		如li高度为100，200，300，当y为220时,应返回坐标1
    	4、将index和左侧列表的index对比选中样式
    	5、通过点击事件传入index,点击左侧,根据index和tops数组,将右侧滑动到指定位置
    		其中:点击事件需要配置实例click:true
    
    版本二:增加了点击左侧列表滑动,右侧滑动列表时,左侧也滑动功能(每次选中的li滑动到最中心,除了开头和结尾的几个li)
    	增加功能实现:
    		获取到左侧每个li的ref
    		使用scroll.scrollToElement(要滚动的左侧列表dom,毫秒时间,true,true);

代码示例:

<template>
    	//左侧分类列表
      <div class='goods'>
        <div class='glist'>
          <ul class='gul'>
            <li class='gli' v-for='(item,index) in goods' :key="index" @click='click(index)' :class='{on:currentIndex==index}'>
               <img :src="item.icon" alt="" v-if='index<=1'>
               <span class='gzk'>{ { item.name}}</span>
            </li>
          </ul>
        </div>
    	//右侧内容
        <div class='flist'>
          <ul>
    
          <ul class='ful' v-for='(item,index) in goods' :key="index" ref='ul'>
              <p class='fname'>{ { item.name}}</p>
            <li class='fli' v-for='(item2,index2) in item.foods' :key="index2">
                 <div class='fimg'>
                   <img :src="item2.image" alt="">
                 </div>
                 <div class='finfo'>
                   <p>{ { item2.name}}</p>
                   <p>{ { item2.description}}</p>
                   <p>{ { '月售'+item2.sellCount+'份'}}  { { '好评率'+item2.rating}}</p>
                   <p>￥{ { item2.price}}</p>
                  <div class='fcir'>
                     <div>+</div>
                   </div>
                 </div>
            </li>
    
          </ul>
         </ul>
        </div>
    
      </div>
    
    </template>
    
    <script>
      import { mapState} from 'vuex'
      import BScroll from 'better-scroll'
      let sflag=1; //左侧滑动标志
      export default { 
        data()
        { 
          return{ 
             gindex:0,
             scrollY:0,
             tops:[],  //右侧每个内容块的高度
             gscroll:''//左侧滚动条,为了右侧滑动,左侧也滑动准备
          }
        },
        methods: { 
          click(index) {  //点击左侧,右侧滑动到对应区域
            console.log(index);
            // this.fscroll.scrollTo(0,-this.tops[index],500); 当右侧滑动到对应位置后,左侧才变化
    
            //左侧先变化,右侧开始滑动
            this.scrollY=-this.tops[index];
            this.fscroll.scrollTo(0,this.scrollY,500);
           },
           
          _initScroll() //创建滑动条和对应滑动监听的方法
          { 
            //数据更新后,界面更新时创建
            this.gscroll=new BScroll('.glist',{  //创建左侧滑动条
                  scrollY: true,
                  click: true
            });
            let fscroll=new BScroll('.flist',{ //创建右侧滑动条
                  scrollY: true,
                  probeType:3
              });
    
            //右侧列表绑定滚动监听
            fscroll.on('scroll',(point)=>{ 
    
                this.scrollY=point.y;  //收集实时滚动y值,与top值比较,触发对应的操作
    
            })
          },
          _initTops()//获取每一个内容块高度的方法
          { 
            let tops=[];
            let top=0;
            tops.push(0);
    
            let ans=this.$refs.ul; //使用ref获取所有选中的ul对象
    
            ans.forEach((item,index)=>{ 
              top+=item.clientHeight; //获取每个ul对象的高度并累加进数组
              tops.push(top);
            })
    
            this.tops=tops;
            console.log(this.tops);
          }
        },
        mounted() //主要初始化工作和获取数据
        { 
          this.$store.dispatch('getShopGoods',()=>{  //vuex在异步得到数据后的回调(即数据已经更新，界面未更新),这个回调在actions.js的方法中执行
            this.$nextTick(()=>{ //数据已经更新，界面更新时调用
    
              //初始化滚动条和添加事件监听
             this._initScroll();
    
             //收集每一块列表的高度
             this._initTops();
    
            })
          });
        },
        computed:{ 
          ...mapState(['goods']),
          currentIndex() //利用计算属性的特点,获取当前滑动距离对应的index，
          //用于和左侧index对比
          { 
            const{ scrollY,tops}=this;
    		
    		//es6的方法,用于获得当前滑动距离相比于每个内容块高度的index值
            const index=tops.findIndex((item,index)=>{ 
              return item>-scrollY;
            })
            return index-1;
          }
        },
        watch:{  //右侧列表变化,左侧分类列表滚动也变化
          currentIndex:function(val)
          { 
            // sflag=1;
            if(val==7)
            { 
              if(sflag)
              { 
                  this.gscroll.scrollBy(0,-50,100);
                  sflag=0;
              }
            }
            if(val==0)
            { 
             if(sflag==0)
             { 
                this.gscroll.scrollBy(0,50,100);
                sflag=1;
             }
            }
    
          }
        }
      }
    </script>
    
    <style lang='less'>
      .on{ 
        background-color: white;
        color: #33CD41;
      }
      .goods{ 
        display: flex;
        overflow: hidden;
        .glist{ 
          width: 25%;
          height: 400px;
          background-color: #F3F5F7;
          overflow: auto;
          >.gul>.gli{ 
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          >.gul>.gli>img{ 
            width: 15px;
            height: 15px;
          }
        }
        .flist{ 
          width: 75%;
          height: 400px;
          overflow: auto;
          .ful>.fli{ 
            display: flex;
            padding:10px 0;
            border-bottom: solid 1px #eee;
          }
          .ful>.fname{ 
            background-color: #eee;
            color:#A9ADB0;
            padding-left: 10px;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
          }
          .ful>.fli>.fimg{ 
            height: 88px;
          }
          .ful>.fli>.fimg>img{ 
            width: 50px;
            height: 50px;
            /* vertical-align: middle; */
            padding: 3px 10px;
          }
          .ful>.fli>.finfo{ 
            display: flex;
            flex-direction: column;
            justify-content:space-between;
            p:nth-child(2){ 
              color:#ccc;
              font-size: 12px;
            }
            p:nth-child(3){ 
              color:#ccc;
              font-size: 12px;
            }
            p:nth-child(4){ 
              color:red
            }
          }
          .ful>.fli>.finfo>.fcir{ 
            width: 100%;
            transform: translateX(150px);
            margin-top: -20px;
          }
          .ful>.fli>.finfo>.fcir>div{ 
            height: 30px;
            width: 30px;
            border-radius: 30px;
            background-color: green;
            text-align: center;
            line-height: 30px;
            font-size: 30px;
            color: white;
          }
        }
      }
    </style>

actions.js异步调用回调:

//得到商品列表
      getShopGoods({ commit,state},callback)
      { 
    
        axios.get('/goods').then((res)=>{ 
          let goods =res.data;
          commit(RECEIVE_GOODS,{ goods});
          callback();
        })
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]**方法二:用于获得当前滑动距离相比于每个内容块高度的index值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]  
版本二:

<template>
      <div class="search">
        
        <TopHeader/>
        <div class="shop">
          
          <div class="menu-wrapper">
            <ul>
              
              <li class="menu-item" v-for="(goods, index) in searchgoods" :key="index" @click="clickHandle(index)" :class='{current:index===getIndex}'
                ref='li'
              >
                <span>{ { goods.name}}</span>
              </li>
            </ul>
          </div>
          
          <div class="shop-wrapper">
            <ul ref='lis'>
              <li class="shops-li" v-for="(goods, index1) in searchgoods" :key="index1">
                <div class="shops-title">
                  <h4>{ { goods.name}}</h4>
                  <a href="">查看更多 ></a>
                </div>
                <ul class="phone-type" v-if="goods.tag === 'phone'">
                   <li v-for="(phone, index) in goods.category" :key="index">
                     <img :src="phone.icon" alt="">
                   </li>
                </ul>
                <ul class="shops-items">
                  <li v-for="(item, index2) in goods.items" :key="index2">
                    <img :src="item.icon" alt="">
                    <span>{ { item.title}}</span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      import TopHeader from './children/TopHeader'
      import { mapState} from 'vuex'
    
      import BScroll from 'better-scroll'
    
      export default { 
        name: "Search",
        data()
        { 
          return { 
            scrollY:0,
            tops:[],
            leftScroll:'',
            rightScroll:''
          }
        },
        mounted() { 
          this.$store.dispatch('reqSearchGoods');
    
        },
        computed: { 
          ...mapState(['searchgoods']),
          //右侧滑动,左侧增加点击选中样式
          getIndex()
          { 
            let index=this.tops.findIndex((item,index)=>{ 
              return this.scrollY<item
            })
            if(index==-1)
            { 
              index=this.tops.length-1;
            }else{ 
              index=index-1;
            }
    
            this._leftScroll(index);
            return index;
          }
        },
        components: { 
          TopHeader
        },
        watch: { 
          searchgoods() { 
            this.$nextTick(() => { 
              this._initBScroll();
    
              //求出右侧列表每个li的顶点坐标
              this._initRightTops();
            })
          }
        },
        methods: { 
          _initBScroll() { 
            // 1.1 左
            this.leftScroll = new BScroll('.menu-wrapper', { 
              scrollX: true, 
              click: true,   
              probeType:3,
            });
            // 1.2 右
            this.rightScroll = new BScroll('.shop-wrapper', { 
              scrollX: true, 
              click: true,   
              probeType:3,
            })
    
            this.rightScroll.on('scroll',(e)=>{ 
              this.scrollY=-e.y;
    
            })
    
          },
          //点击左侧,右侧滑动
          clickHandle(index)
          { 
            this.scrollY=this.tops[index];
            this.rightScroll.scrollTo(0,-this.scrollY,300);
          },
          //获取顶点坐标
          _initRightTops()
          { 
            const temp=[];
            let top=0;
            temp.push(top);
    
            let lis=this.$refs.lis.children;
            let arr=Array.from(lis);
    
            arr.forEach((item,index)=>{ 
              top+=item.clientHeight;
              temp.push(top);
            })
    
            this.tops=temp;
    
          },
          //右侧滑动,左侧也随之滑动
          _leftScroll(index)
          { 
            // console.log(this.leftScroll);
            if(this.leftScroll.scrollTo)
            { 
              this.leftScroll.scrollToElement(this.$refs.li[index],300,true,true);
            
            }
    
          }
        }
      }
    </script>
    
    <style scoped lang="stylus" ref="stylesheet/stylus">
      .search
        background #F5F5F5
        width 100%
        height 100%
        overflow hidden
    
      .shop
        display flex
        position absolute
        top 50px
        bottom 50px
        width 100%
        overflow hidden
        .menu-wrapper
          background-color #e0e0e0
          width 80px
          flex 0 0 80px
          .menu-item
            width 100%
            height 60px
            background-color: #fafafa
            display flex
            justify-content center
            align-items center
            font-weight lighter
            color #666666
            position relative
          .current
            color #e02e24
          .current::before
            content: ''
            background-color #e02e24
            width 4px
            height 30px
            position absolute
            left 0
        .shop-wrapper
          flex 1
          background-color #fff
          .shops-title
            display flex
            flex-direction row
            padding 0 10px
            height 44px
            align-items center
            justify-content space-between
            color #999
            a
              color #999
              text-decoration none
              font-weight lighter
          .shops-items
            display flex
            flex-wrap wrap
            li
              display flex
              flex-direction column
              width 33.3%
              height 90px
              justify-content center
              align-items center
              color #666
              font-weight lighter
              font-size 14px
              img
                width 60%
                height 60%
                margin-bottom 5px
          .phone-type
            width 100%
            display flex
            flex-direction row
            flex-wrap wrap
            border-bottom-1px(#ccc)
            li
             width 33.3%
             display flex
             justify-content center
             align-items center
             margin 5px 0
             img
               width 70%
    </style>

效果图:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/332b73dcae9b4f4e8c2468ef1e69e40a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/44f5b9a7d265458ba148419aae1245c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/43d20b818c21480aa1cd63a9b8c4573e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/bb9e0cebeabf4f3b9113aafd3f3fa0ef.png