鸽了这么久,一晃2个月过去了。自考+上班没时间记录。

前不久看到移动官网上的时间轴效果,看起来不错,我也来试着做一下。

需要元素滚动到视野内加载动画。

插件地址 https://ext.dcloud.net.cn/plugin?id=906

uniapp不能操作dom,写这个还是思考了很久。效果如下

一、布局

画主轴。内容分割成块,当出现在视野中(滚动监听),加载载入动画。

内容块中分别有一个圆点、详情内容。

<!-- 时间轴 css就不贴出来了-->
<view class="time-line-container" :class="addTypeClass">
<!-- 时间轴内容块列表 -->
<view class="time-line-list"> <!-- 时间轴内容块 绑定id值-->
<view class="time-line-info" :key="index" :class="[layoutClass(index)]" :id="'timeline'+index" v-for="(item,index) of time_line_list"> <!-- 内容块内容 -->
<view class="line-info-content" > <!-- 时间轴圆点 -->
<view class="line-on-round" :style="{ opacity: current[index]&&current[index].is=='ok'?1:0,top:'50px'}" :class="current[index]&&current[index].is=='ok'?comeani:''"></view>
<!-- 内容 -->
<view class="info-content-wrap" :style="{ opacity: current[index]&&current[index].is=='ok'?1:0}" :class="current[index]&&current[index].is=='ok'?comeani:''">
<!-- 标题 -->
<view class="info-title">
{{item.title}}<span>{{item.title_span}}</span>
</view> <!-- 内容 -->
<view class="info-content">
<!-- 内容 -->
<view class="info-txt">{{item.content}}</view>
</view>
</view> </view>
</view>
</view>
</view>

二、js

首次进入页面,需获取屏幕高度,初始化一个current,开始获取每个元素的位置信息。

          init(){
try {
// 获取屏幕高度
const res = uni.getSystemInfoSync();
this.HEIGHT=res.screenHeight;
// 添加标志位
for(let i=0;i<this.time_line_list.length;i++){
this.current.push({tag:'timeline'+i,is:'no'});
}
// 开始获取位置信息
this.getScroll();
} catch (e) {
// error
}
},

循环一下所有的元素并获取每个元素的位置信息,得到后加入数组

        async getScroll(){
if(!this.isScroll){return;}
let info=[];
// 返回位置信息加入数组 等待获取完成再进行loadani操作
for(let i=0;i<this.time_line_list.length;i++){
await this.getNodeList('timeline'+i,i).then(res => {
info.push(res);
});
}
this.result.push({info:info});
// 加载动画
this.loadani();
},
       getNodeList(id,i){
// 获取位置信息并返回
return new Promise(resolve=>{
const query = uni.createSelectorQuery().in(this);
query.select('#'+id).boundingClientRect(data => {
// console.log("得到布局位置信息" + JSON.stringify(data));
// console.log("节点离页面顶部的距离为" + data.top);
resolve({domInfo:data.height,domTop:data.top,tag:id})
}).exec();
});
},

获取到距离顶部的距离就可以判断是否出现在视野内,并把标志位设置为相应状态

       loadani(){
for(let i=0;i<this.result.length;i++){
for(let j=0;j<this.result[i].info.length;j++){
// 是否没加载动画
if(this.current[j].is!='ok'){
// 是否进入视野
if(this.current[j].tag==this.result[i].info[j].tag &&
this.result[i].info[j].domTop+90<this.HEIGHT){
// 加载动画
this.current[j].is='ok';
this.sum=j+1;
}
}
}
// 移除当前
this.result.splice(i,1);
}
// 是否全部加载完成
if(this.sum==this.time_line_list.length){this.isScroll=false;}
},

在主界面,还要监听每次的滚动,看元素是否滚动到视野内了

组件引入:

<time-line ref="timeline" location="center" title="我的时间轴"></time-line>

     onPageScroll() {
this.$refs.timeline.getScroll();
},

这样就完成了,写的有点繁琐哈哈。省略部分内容,可以看完整示例。

附上GitHub地址:https://github.com/steffenx/timeLine-uniapp.git

uniapp滚动监听元素的更多相关文章

  1. Bootstrap 下拉菜单和滚动监听插件

    一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  2. bootstap 滚动监听

    ---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ------------ ...

  3. bootstrap-js(3)滚动监听

    导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...

  4. Bootstrap入门(二十六)JS插件3:滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  5. better-scroll不能滚动之 滚动监听-左右联动

    滚动监听 better-scroll 无法滚动的分析,直接翻到最后,看问题汇总,希望能帮助你解决. 借用一下人家这个好看的项目图片,做一个解释.左边的内容会跟右边的内容一起关联,点击左边的菜单,右边会 ...

  6. amaze ui 滚动监听

    引入   此框架的css  js    前提还要有jquery http://amazeui.org/javascript/scrollspy 然后看这个链接里的各种动画 运用方法就是  在你想要有动 ...

  7. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

  8. jQuery实现滚动监听

    1.设计思路 1)获取窗口滚动高度: 2)获取附加导航栏: 3)获取导航栏下的所有li: 4)通过相同class获取所有监听元素:(此例中为jumbotron巨幕) 5)遍历所有监听元素,若当前元素距 ...

  9. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

随机推荐

  1. 通过String的不变性案例分析Java变量的可变性

    阅读本文之前,请先看以下几个问题: 1.String变量是什么不变?final修饰变量时的不变性指的又是什么不变,是引用?还是内存地址?还是值? 2.java对象进行重赋值或者改变属性时在内存中是如何 ...

  2. 10行代码,用python能做出什么骚操作

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:小栗子 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  3. MySQL 归纳总结

    1.MySQL存储引擎 主要使用的就是两个存储引擎,分别是InnoDB和MyISAM. InnoDB InnoDB是MySQL的默认存储引擎.InnoDB采用MVCC来支持高并发,并且实现了四个标准的 ...

  4. stand up meeting 12/3/2015

    part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 初始化弹窗的弹出位置并捕捉弹窗区域内的鼠标控制事件,初步解决弹窗的拖拽功能:    6 UWP对控件的支持各种看不懂,属性 ...

  5. Python程序设计实验报告二:顺序结构程序设计(验证性实验)

      安徽工程大学 Python程序设计 实验报告 班级   物流191   姓名  崔攀  学号3190505136 成绩 日期     2020.3.22     指导老师       修宇 [实验 ...

  6. python3-邮件发送-不同格式

    0x00 邮件格式 要发邮件,总要先了解邮件格式吧,这里指的是邮件的各个部分与python中SMTP所对应的一些必须的格式 0x01 简单发送邮件格式如下: import smtplib from e ...

  7. Springboot:配置文件位置以及多环境配置(六)

    配置文件位置 Springboot配置文件可以加载以下四个位置: file:./config/ #第一加载位置 file:./ #第二加载位置 classpath:/config/ #第三加载位置 c ...

  8. MySQL不香吗,为什么还要有noSQL?

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式专题的第14篇文章,我们一起来看看NoSQL数据库. 其实我很早就想写写分布式数据库相关的文章,既是我现在正在学习的,也是我很感 ...

  9. python安装pil库,操作流程以及安装中出现的问题。

    0.用管理员方式打开cmd窗口. 1.跳转到python对应目录 比我: ***或者直接在该路径下输入cmd直接跳转.**** 例如: 直接回车搞定!! 2.输入 pip install pillow ...

  10. 2019.11.13课堂实验之用Linux下的shell脚本完成两文本交替输出

    有两个文本如下,实际中并不知道两文本各有多少行: 文本1.txt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ccccccccccccccccccccccccccc ...