• 歌手右侧快速入口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       }
  • 相关阅读:
    软件工程实践 2017 第二次作业(部分)
    2017 软件工程实践第一次作业-031502627
    struct与class区别联系(转)
    个人作业——软件工程实践总结作业
    个人作业——软件产品案例分析
    个人技术博客(α)
    结对作业2
    软工作业2
    软工作业1
    作业7 学期总结
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9455075.html
Copyright © 2020-2023  润新知