singer页左侧滚动的时候右侧跟随高亮显示
1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件
2.将listview.vue的listenScroll属性默认设置为true;
3.写scroll(pos)方法,实时监听左侧scroll位置,并根据滚动位置计算滚动到了索引为哪一个值;
4.写calculateHeight方法,计算每个group得高度,并添加到数组listheight中
5.watch用延时函数监听singerlist的数据变化,并重新计算每个group的高度。
6.通过better-scroll监听得到左边的scrolly的变化,然后循环遍历listheight数组,看落在哪一个区间,得到currentIndex=i;
7.给Li添加current类,通过对象,当currentIdnex=index的时候
代码如下:
//scroll.vue
_initScroll(){
if(!this.$refs.wrapper){
return
}
this.scroll = new BScroll(this.$refs.wrapper,{
probeType: this.probeType,
click: this.click
})
if(this.listenScroll){//初始化时候判断是否监听滚动
let _this=this
this.scroll.on('scroll',(pos)=>{
_this.$emit('scroll',pos)
})
}
}, //listview.vue
listenLeftScoll(pos){//pos是scroll组件传递过来的
this.scrollLeftY=pos.y
},
_calculateHeight() {//计算左边高度;并用watch监听;
this.listHeight = []
const list = this.$refs.listGroup
let height = 0
this.listHeight.push(height)
for (let i = 0; i < list.length; i++) {
let item = list[i]
height += item.clientHeight//求出总高度;
this.listHeight.push(height)//listHeight;我们能确定洛在哪一个区间 }
}, watch:{
singerList(){
setTimeout(() => {
this._calculateHeight()
}, 20)
},
scrollLeftY(newY){
const listHeight = this.listHeight
console.log(listHeight)
if(newY>0){//说明是向下拉,不是向上滚
this.currentIndex=0;
return
}
for(let i=0 ; i<listHeight.length -1; i++){//循环看落在哪一个区间
let height1 = listHeight[i]
let height2 = listHeight[i+1]
if(!height2 || (-newY >= height1 && -newY <height2)){
this.currentIndex =i
// fixedTitle代码
this.diff = height2 + newY;//上线与滚动的值,因为newY是负值,相当于减去:然后监视diff的变化
return
} }
this.currentIndex = listHeight.length -2 },
}
html代码:
<scroll class="listview"
:listenScroll="listenScroll"
@scroll="listenLeftScoll"
:probe-type="probeType"
:singerList="singerList"
ref="listview">
singer页左侧滚动的时候右侧跟随高亮显示的更多相关文章
- CSS布局 -- 左侧定宽,右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"> < ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- 给singer的左侧添加fixedTitle,并显示向上滚动偏移效果;
1.将写好的dom绝对定位到顶部: 2.dom值为singerlist的currentIndex.title(通过计算属性获取),如果有则显示fixedTitle,没有则隐藏: 3.计算diff:当d ...
- IOS UIScrollView + UIButton 实现segemet页面和顶部标签页水平滚动效果
很长一段时间没有写博客了,最近在学习iOS开发,看了不少的代码,自己用UIScrollView和UIButton实现了水平滚动的效果,有点类似于今日头条的主界面框架,效果如下: 代码如下: MyScr ...
随机推荐
- STS 设置 注解提示
1.window -> Preferences
- 高阶函数 实现sum(2)(3) 柯里化
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 【Android开发经验】Cannot generate texture from bitmap异常的解决方式
异常现象: 今天在处理用户头像的过程中,由于头像的处理比較复杂,由于,没有使用afinal自带的自己主动载入.而是自己依据头像的下载路径.手动进行下载和使用.可是在手动回收bitmap对象的过程中,会 ...
- 一个简单的knockout.js 和easyui的绑定
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Basi ...
- Python之zip
# -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之zip #http://python.jobbole.com/82590/ #1)zip语法格 ...
- SET GLOBAL FOREIGN_KEY_CHECKS取消外键约束
今天在工作中遇到的问题,在删除一个表时报错,发现有外键约束,所以不能删除,查了下发现需要取消外键约束. SET GLOBAL FOREIGN_KEY_CHECKS=0;全局取消外键约束 SET SES ...
- 转载:PHP JSON_ENCODE 不编码中文汉字的方法
1.PHP版本5.4(包含)+ json_encode($data, JSON_UNESCAPED_UNICODE); //必须PHP5.4+ 2.PHP版本5.4- function encode_ ...
- HTML:调用静态页面html 的几种方法
今天做办公用品管理系统时,发现需要用到在一个静态页面html 中调用多个静态页面html的内容.查找资料总结了以下一些方法: 一.iframe引入的方法 代码如下: <!-- 部门--> ...
- python dataframe 在merge时 产生笛卡尔积
在pandas中,concat, merge, join的使用方法可以参考以下资料: http://blog.csdn.net/stevenkwong/article/details/52528616 ...
- python标准库介绍——28 md5 模块详解
==md5 模块== ``md5`` (Message-Digest Algorithm 5)模块用于计算信息密文(信息摘要). ``md5`` 算法计算一个强壮的128位密文. 这意味着如果两个字符 ...