<acronym id="e01da"></acronym>
<optgroup id="e01da"><i id="e01da"><del id="e01da"></del></i></optgroup>
<span id="e01da"></span>

<wbr id="e01da"><source id="e01da"></source></wbr>
    <wbr id="e01da"></wbr>

    1. <ol id="e01da"><source id="e01da"></source></ol>
        <progress id="e01da"></progress>

        一聚教程网:一个值得你收藏的教程网站

        最新下载

        vue和better-scroll实现列表左右联动效果详解

        时间:2019-04-29 17:22:08 编辑:猪哥 来源:转载

        一.实现思路

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

        二.实现

        1.实现左右两个better-scroll

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

        左边滚动列表dom
         
           
        右边滚动列表dom
        • {{item.name}}

          • {{food.name}}

            {{food.description}}

            月售{{food.sellCount}}份 好评率{{food.rating}}% ¥{{food.price}} ¥{{food.oldPrice}}

        在数据请求完成后的$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));
            })
           },
        

        2.实现联动效果

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

        1. 在渲染完成后($nextTick内),初始化better-scroll,并在初始化函数内添加右侧列表的scroll监听事件,并记录scrollY值到,存入vue的data中
        2. 在渲染完成后($nextTick内),计算右侧列表的每一个大区块的高度,并累加,存入数组listHeight
        3. 因为scrollY值在滚动中总是不断变化的,所以在computed中计算出currentIndex,当前滚动区域是哪一个大区块,也就是listHeight数组的下标
        4. 在dom中根据currentIndex应用左侧列表被点中的样式
        5. 在左侧列表某一项被点中的时候,右侧列表滑动到某一个大块区域,
        //初始化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));
            })
           },
        
        _calculateHeight() {
            let foodList = this.$els.foodWrapper.getElementsByClassName("food-list-hook");
            let height = 0;
            this.listHeight.push(height);
            for(let i=0;i
        
        
        
        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;
           }
          },
        
           
        //被点击事件
        //dom
        
           
        //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); },

        文章评论

        热门栏目

        看今晚67期开什么特马 金乡县| 浦县| 剑阁县| 林芝县| 襄垣县| 黑龙江省| 凤庆县| 商丘市| 佛山市| 建阳市| 海兴县| 怀仁县| 雷州市| 宣威市| 库尔勒市| 寿光市| 阳江市| 洪江市| 达日县| 汕尾市| 顺义区| 历史| 梧州市| 延边| 萨嘎县| 泌阳县| http://www.jpzfvw.cn 页游| 平远县| 潼关县| 巴楚县| 包头市| 襄樊市| 海淀区| 鹤壁市| 吉安市| 榕江县| 池州市| 邹城市| 宁安市| 泾源县| 玉环县| 宜丰县| 杭锦后旗| 文昌市| 虞城县| 昌图县| 犍为县| 濉溪县| 洞口县| 司法| 焉耆| 乌苏市| 宜兴市| 徐州市| 乐昌市| http://www.iirnhi.cn 平舆县| 勐海县| 河东区| 深泽县| 马关县| 梅州市| 云梦县| 祥云县| 祁东县| 虹口区| 渝北区| 定结县| 左权县| 谢通门县| 景东| 通海县| 北安市| 曲松县| 修武县| 耒阳市| 象州县| 额尔古纳市| 涡阳县| 杭州市| 迭部县| 芮城县| 前郭尔| 安阳市| 时尚| 达拉特旗| 泰来县| 宜春市| 邓州市| 昭平县| http://www.yhykaa.cn 堆龙德庆县| 丰镇市| 博乐市| 龙州县| 射阳县| 安宁市| 虞城县| 河间市| 红桥区| 汤原县| 张北县| 工布江达县| 江津市| 鄂托克旗| 永修县| 邢台县| 棋牌| 即墨市| 泉州市| 尚义县| 鹤山市| 元氏县| 茂名市| 武胜县| 利辛县| 长宁区| 清水县| 五常市| 综艺| http://www.jyodpk.cn 抚顺县| 崇阳县| 方城县| 鄂温| 宜阳县| 平果县| 镇雄县| 彭山县| 湟中县| 阳山县| 夹江县| 凤庆县| 宜章县| 崇仁县| 六枝特区| 墨玉县| 汪清县| 吉林省| 拉萨市| 霍山县| 云和县| 东平县| 安平县| 刚察县| 隆尧县| 潜山县| 栖霞市| 永顺县| 廉江市| http://xstipc.cn 岳阳县| 武邑县| 江陵县| 章丘市| 安陆市| 宣化县| 巫溪县| 大厂| 政和县| 沙坪坝区| 屏边| 石景山区| 鄂托克旗| 神木县| 汤阴县| 中卫市| 泽库县| 普兰县| 晋州市| 浪卡子县| 岚皋县| 邵阳市| 金沙县| 南陵县| 台安县| 盘山县| 保山市| 米脂县| http://www.pfdmuz.cn 普宁市| 伊金霍洛旗| 临沭县| 梁山县| 苍梧县| 奉贤区| 类乌齐县| 灌阳县| 黎城县| 雅安市| 巩义市| 公主岭市| 萍乡市| 云南省| 奉贤区| 彭水| 米易县|