• 歌手右侧快速入口ABCD....


    1.通过v-for将右侧内容渲染出来,并绝对定位到右侧

    2.给每个li绑定touchStart事件,并绑定自定义属性data-index=index;

    3.点击每个li,通过e来获取所绑定的自定义属性中的index;

    4.封装scrll中的scrllTo和scrollTlElement方法,

    5.给滚动盒子加:ref="listview",里面变化的绑定:ref=listGroup;

    6.让listGroup滚动到点击的锚点索引anchorIndex;

    代码如下:

     1 //滚动事件封装:
     2      scrollTo() {//封装滚动
     3           this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
     4           //使用apply是因为这个scrollTo方法会接收一些参数的,我们要把这些参数传递到better-scroll的scroll里面,
     5         },
     6         scrollToElement() {//滚动到某个元素
     7           this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
     8         }
     9 //自定义属性获取:dom.js
    10 export function getData(el, name, val) {//该方法是用来获取data-自定义属性的
    11   const prefix = 'data-'
    12   if (val) {
    13     return el.setAttribute(prefix + name, val)
    14   }
    15   return el.getAttribute(prefix + name)
    16 }
    17 //listview.vue中touchStart事件
    18  onShortcutTouchStart(e){
    19         let anchorIndex = getData(e.target, 'index')
    20         this.$refs.listview.scrollToElement(this.$refs.listGroup[anchorIndex],0)
    21       }
  • 相关阅读:
    java 日期的格式化
    JAVA 线程
    java 异常
    java 内部类
    java 多态
    SpringBoot(12) SpringBoot创建非web应用
    SpringCloud(1) 架构演进和基础知识简介
    SpringBoot(11) SpringBoot自定义拦截器
    SpringBoot(10) Servlet3.0的注解:自定义原生Servlet、自定义原生Listener
    SpringBoot(9) SpringBoot整合Mybaties
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9455075.html
Copyright © 2020-2023  润新知