<template><div class="search"><!-- 搜索导航 --><SearchNav></SearchNav><div class="shop"><!-- 左边 --><div class="menu-wrapper"><ul><!-- current --><li class="menu-item"v-for="(goods,index) in searchgoods" :key="index":class="{current: index === currentIndex}"@click="clickList(index)"ref="menuList"><span>{{goods.name}}</span></li></ul></div><!-- 右边 --><div class="shop-wrapper"><ul ref="itemList"><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 SearchNav from './Children/SearchNav'
import {mapState} from 'vuex'
import BScroll from 'better-scroll'
export default {name: 'chat',data () {return {scrollY: 0, //右侧列表滑动的y轴坐标
      rightLiTops:[] //所有分类头部位置
    }},computed: {...mapState(['searchgoods']),   //列表数据//动态绑定class类名
    currentIndex(index) {const {scrollY,rightLiTops} = this;return rightLiTops.findIndex((tops,index )=>{this._initLeftScroll(index);return scrollY >= tops && scrollY < rightLiTops[index + 1]})}},mounted() {this.$store.dispatch('reqSearchGoods')},components: {SearchNav},watch:{searchgoods(){//监听数据this.$nextTick(() =>{//左右两边滚动this. _initBScroll();//右边列表高度this._initRightHeight()})}},methods:{_initBScroll() {//左边滚动this.leftBscroll = new BScroll('.menu-wrapper',{});//右边滚动this.rightBscroll = new BScroll('.shop-wrapper',{probeType:3});//监听右边滚动事件this.rightBscroll.on('scroll',(pos) => {this.scrollY = Math.abs(pos.y);// console.log(this.scrollY)
      })},//求出右边列表的高度
    _initRightHeight(){let itemArray=[]; //定义一个伪数组
      let top = 0;itemArray.push(top)//获取右边所有li的礼
      let allList = this.$refs.itemList.getElementsByClassName('shops-li');//allList伪数组转化成真数组
      Array.prototype.slice.call(allList).forEach(li => {top += li.clientHeight; //获取所有li的每一个高度
        itemArray.push(top)});this.rightLiTops = itemArray;// console.log(this.rightLiTops)
    },//点击左边实现滚动
    clickList(index){this.scrollY = this.rightLiTops[index];console.log(this.scrollY)this.rightBscroll.scrollTo(0,-this.scrollY,200,)},//左右联调
    _initLeftScroll(index){let menu = this.$refs.menuList;let el = menu[index];this.leftBscroll.scrollToElement(el,300,0,-300)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus" scoped>@import "../../common/stylus/mixins.styl".searchwidth 100%height 100%background-color #f5f5f5overflow hidden.shop display flexposition absolutetop 60pxbottom 50pxwidth 100%overflow hidden.menu-wrapperbackground-color #e0e0e0width 80pxflex 0 0 80px.menu-item width 100%height 60pxbackground #fafafadisplay flexjustify-content centeralign-items centerfont-family lightercolor #666position relative.currentcolor #e02e24background #ffffff.current::before content ''background-color #e02e24width 4pxheight 30pxposition absoluteleft 0.shop-wrapperflex 1background #fff.shops-titledisplay flexflex-direction rowpadding 0 10pxheight 40pxalign-items centerjustify-content space-betweencolor #9999atext-decoration nonecolor #9c9c9cfont-size 14px.shops-itemsdisplay flex flex-wrap wraplidisplay flexflex-direction columnwidth 33.3%height 90pxjustify-content centeralign-items center img width 60%height 60%margin-bottom 5pxspancolor #151516font-size 13px.phone-typewidth 100%display flexflex-direction rowflex-wrap wrapborder-bottom-1px (#cccccc)liwidth 33.3%display flex justify-content centeralign-items center margin 5px 0imgwidth 70%
</style>