今天在处理,首页面的制作的时候,在实现backtop按键的时候,有些思路,作为记录。

功能为,点击backtop即可,立马跳到首页的最上面,且backtop只有在页面后1/2处才显示出来。

首先,我们先在components文件中建立一个vue文件,命名为backtop。我在阿里矢量图处,找了一个相应的图片,并设置其为position为fixed(这块简单,不赘述。)并在home.vue中引入并注册backtop组件。

之后,为了实现,点击它即可回归顶部位置的作用。最开始的想法是在,backtop的methods里面写一个方法之后利用其与home的父子关系,再通过scroll与home的关系,进行操作。但是想想还是比较费事,想起前几天看一个博客想起了,@click事件,其中有一个修饰符为native。父组件想在子组件上监听自己的click的话,只需要加上native修饰符。那么这样写的话,就很简单也方便了。

 <backtop @click.native="backclick"></backtop>
methods:{
backclick(){
// this.$refs.scroll.scroll.scrollTo(0,0,1000)
this.$refs.scroll.scrollTo(0,0)
}
}
<scroll class="content" ref="scroll">

这需要在home.vue中如此写即可。<script>

import BScroll from "better-scroll"
export default {
name: "scroll",
data(){
return{
scroll:null
}
},
mounted(){
//1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
})

}
</script>

这是在scroll组件中的代码

这里的methods,我使用了ref。首先,ref可以给scroll子组件绑定一个特定id,之后通过,this.$refs.id即可以访问到该组件了。

那么具体在此例中的写法就如上述代码块2的注释行与代码块3所写。注意下scrollTo函数,第一与第二个参数分别是:要在窗口文档显示区左上角显示的文档的 x 坐标与y坐标。第三个参数是时间,单位为毫秒。

还有第二种写法,看起来更为清晰点。

直接在scroll.vue文件中,直接在methods中设定一个方法:

methods:{
scrollTo(x,y,time=1000){
this.scroll.scrollTo(x,y,time)
}

而在home.vue中的methods中直接设定为:

methods:{
backclick(){
this.$refs.scroll.scrollTo(0,0)
}
}

这样的话,即可实现了点击回到顶部的功能。

接下来,做第二部处理,即为只有在一定的位置的时候,backtop才会显示。而在比较上方的位置的时候,不显示backtop。

这里的话,首先对scroll进行了一定的处理,那么我们先监听滚动的位置,这样的处理的话,我们即可先在scroll的mounted当中,设置:

mounted(){
//1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
probeType:this.probeType
})
//2.监听滚动的位置
this.scroll.on("scroll",(position)=>{
console.log(position);
})

记住,如果要监听的话,必须在BScroll对象当中,添加probeType。由于,这个组件不一定只用在主页当中,所以我们可以把probeType暴露给外属性,让用户来设置。因此,这边我进行了一个设置,把probeType,通过props进行。

 props:['probeType'],
data(){
return{
scroll:null
}

因此在home.vue中,关于<scroll>组件,而如果在scroll.vue中写死,probeType为3的时候,会影响性能。因此,我们可以直接在此组件标签上传递,home页面所需的probeType值,这里我设置为3。记住,这里必须要使用v-bind/:,如果不使用的话,也能传入,但是会将其识别为一个字符串,而不是Number。设置完成后,目前就实现了实时监听啦~

<scroll class="content" ref="scroll" :probe-type="3">

之后,因为我们需要将其滚动位置传出去,因此我们可以在scroll.vue中的mounted里面的位置监听中,将其传递出去给home.vue。

那么只需要如下代码进行子传父即可。

 this.scroll.on("scroll",(position)=>{
// console.log(position);
this.$emit("scroll",position)
})

之后,我们在home.vue中,进行实际操作。

<scroll class="content" ref="scroll" :probe-type="3" @scroll="contentscroll">

因为,我们这次操作的目的是,为了解决,在一定位置的时候,才显示backtop组件,而且这个需要反复使用,因此我们不去使用v-if,而是使用v-show。

 <backtop @click.native="backclick" v-show="isshow"></backtop>
 data(){
return{
isshow:false
}
},
methods:{
contentscroll(position){
// console.log(position);
this.isshow= (-position.y) > 1000
}
}

根据上述代码就实现了,backtop的在一定位置的时候的隐藏,以及一定位置后的出现。

关于BackTop按钮的实现的更多相关文章

  1. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  2. vue进入页面时不在顶部,检测滚动返回顶部按钮

    这里是本小白使用时遇到的问题及个人使用的方法可能并不完美. 1.监测浏览器滚动条滚动事件及滚动距离 dmounted() { window.addEventListener("scroll& ...

  3. 博客自定义1-皮肤模板 基于SimpleMemory 添加到顶部小按钮

    周五公司事不是很紧,打算好好弄下自己的博客,这是自己学习和记录分享地方, 首先请记得申请js权限,默认不支持的,博主是已经申请通过后的样子 接着先选择cnblogs一个现有的模板,我这个就是在他的模板 ...

  4. ExtJS 4.2 Date组件扩展:添加清除按钮

    ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...

  5. 关于Android避免按钮重复点击事件

    最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...

  6. Expression Blend创建自定义按钮

    在 Expression Blend 中,我们可以在美工板上绘制形状.路径和控件,然后修改其外观和行为,从而直观地设计应用程序.Button按钮也是Expression Blend最常用的控件之一,在 ...

  7. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  8. iOS 键盘添加完成按钮,delegate和block回调

    这个是一个比较初级一点的文章,新人可以看看.当然实现这个需求的时候自己也有一点收获,记下来吧. 前两天产品要求在工程的所有数字键盘弹出时,上面带一个小帽子,上面安装一个“完成”按钮,这个完成按钮也没有 ...

  9. wordpress优化之结合prism.js为编辑器自定义按钮转化代码

    原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...

随机推荐

  1. MySQL 连接为什么挂死了

    声明:本文为博主原创文章,由于已授权部分平台发表该文章(知乎.云社区),可能造成发布时间方面的困扰. 一.背景 近期由测试反馈的问题有点多,其中关于系统可靠性测试提出的问题令人感到头疼,一来这类问题有 ...

  2. MySQL错误日志(Error Log)

    错误日志是一个文本文件,记录了 MySQL Server 每次启动和关闭的详细信息以及运行过程中所有较为严重的警告和错误信息.在遇到问题时,应该首先查看这个文件. 如何开启 使用命令 SHOW VAR ...

  3. Python怎么控制将一个整数输出成指定长的十六进制数?

    使用format方法,在格式控制中进行控制,具体控制参数为: {:#016X} 其中: 大括号表示该处从后面的format的参数中取值 冒号表示格式控制开始 0表示长度不足16位补0 16表示长度 X ...

  4. CSDN-markdown编辑器使用方法

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...

  5. 第9.3节 Python的文件行读取:readline

    一. 语法 readline(size=-1) readline函数顾名思义就是从文件内读取一行,用来处理文本文件读取的典型方法之一,但readline可不只是读取文本文件,也能读取二进制文件,只是在 ...

  6. PyQt(Python+Qt)学习随笔:QTreeWidget树型部件中的QTreeWidgetItem项构造方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTreeWidget树型部件的项是单独的类对象,这个类就是QTreeWidgetItem. QTr ...

  7. PyQt(Python+Qt)学习随笔:Qt Designer中部件的layoutDirection属性

    layoutDirection属性保存的是部件的布局方向,有三个取值: 在部件上设置布局方向时,它将传播到部件的子级,但不会传播到作为窗口的子级,也不会传播到已显式调用setLayoutDirecti ...

  8. PyQt(Python+Qt)学习随笔:布局控件layoutSpacing属性

    在Qt Designer中布局控件有4个,分别是Vertical Layout(垂直布局).Horizontal Layout(水平布局).Grid Layout(网格布局).Form Layout( ...

  9. Day6 Scrum 冲刺博客

    一.站立式会议# 1. 会议照片 2. 工作进度+燃尽图  团队成员 昨日完成工作  今日工作计划 遇到的困难  周梓波  将方块旋转变形  添加键盘监听事件  不熟悉监听事件的操作  纪昂学  左右 ...

  10. 将ACCESS 的数据库中的表的文件 导出了EXCEL格式

    将ACCESS 的数据库中的表的文件 导出了EXCEL格式 '''' '将ACCESS数据库中的某个表的信息 导出为EXCEL 文件格式 'srcfName ACCESS 数据库文件路径 'desfN ...