tabControl组件的吸顶效果
最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果。但是,使用better-scroll组件后,这些属性就没有用了。那么,为了还能达成这个效果,按照以下方法。
在实现这个效果之前,必须先知道滚动到多少位置时,开始有吸顶效果。
首先我先尝试了,在home.vue中的mounted里面直接
console.log(this.$refs.tabcontrol.$el.offsetTop);
但是这个打印出来的结果明显是不正确的,因为在mounted里面拿到的是,很多图片还没有加载完毕的,因此这里所得出来的值是不正确的。经过测试,发现tabcontrol上面的三个组件中,轮播图的加载是最为影响的,因此我就监听homeswiper中的图片加载,使用@load来完成。加载完成后,发出事件后,再home.vue中获取正确的值。
homeswiper.vue中:
<template>
<swiper>
<swiperitem v-for="(item,index) in banners" :key="index">
<a :href="item.link">
<img :src="item.image" @load="imageload">
</a>
</swiperitem>
</swiper>
</template>
<script>
import swiperitem from "../../../src/components/common/swiper/swiperitem";
import swiper from "../../../src/components/common/swiper/swiper";
export default {
name: "homeswiper",
props:{
banners:{
type:Array,
default(){
return []
}
}
},
components:{swiperitem,swiper},
data(){
return{
isload:false }
},
methods:{
imageload(){
// console.log("111");
if (!this.isload){
this.$emit("swiperimageload")
this.isload = true
} }
}
}
</script> <style scoped> </style>
在home.vue中:
<tabcontrol :titles="['流行','新款','精选']" @tabclick="tabclick"
ref="tabcontrol2"> </tabcontrol>
<homeswiper :banners="banners" @swiperimageload="swiperimageload"></homeswiper>
methods:{
swiperimageload(){
// console.log(this.$refs.tabcontrol.$el.offsetTop);
this.tabOffsetTop = this.$refs.tabcontrol.$el.offsetTop
}
}
data(){
return{
tabOffsetTop:0
}
}
解析:
首先,现在homeswiper中对其图片进行监听,并定义一个方法为imageload。这个方法中,将swiperimageload发出。由于,homeswiper与home为子与父组件关系。然后,在home中,先设置taboffsetTop为0,之后再在swiperimageload当中将其赋值给tabOffsetTop。
在这里,我为了不让homeswiper多次发出事件,我在homeswiper中的data加了一个isload,之后我使用isload的变量进行状态的记录。
之后,我们就可以在之前做backtop组件中,所使用到的contentscroll方法中,将当前position与tabOffsetTop进行一个判断。这边我们可以再回顾下原来在scroll中写的:
mounted(){
//1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper,{
click:true,
probeType:this.probeType,
pullUpLoad:this.pullUpLoad
//监听滚动到底部
})
// this.scroll.scrollTo(0,0)
//2.监听滚动的位置
this.scroll.on("scroll",(position)=>{
// console.log(position);
this.$emit("scroll",position)
})
}
在home.vue中写的:
<scroll class="content" ref="scroll" :probe-type="3" @scroll="contentscroll" :pull-up-load="true" @pullingUp="loadmore">
data(){
return{
banners:[],
recommends:[],
goods:{
'pop':{page:0,list:[]},
'new':{page:0,list:[]},
'sell':{page:0,list:[]}
},
currenttype:'pop',
isshow:false,
tabOffsetTop:0,
istabfixed:false
}
}
contentscroll(position){
//1.判断backtop是否显示
this.isshow= (-position.y) > 1000
//2.决定tabcontrol是否吸顶
this.istabfixed = (-position.y) > this.tabOffsetTop
}
最开始,我是按照上述写之后,直接在tabcontrol组件中利用istabfixed的值,然后用v-bind:class="{active:istabfixed}",再在active中设置,position为fixed,以及一定的top值,但是实际执行后,发现,在此处position为fixed时,并不生效。显示出来的结果为,下面的商品内容会往上移,且tabcontrol随着滚动会滑出去。达不到吸顶效果,因此为了达到效果,我们在上面多复制了一份PlaceHoldertabcontrol组件对象,利用他来实现停留效果。当用户滚动到一定位置时,PlaceHoldertabcontrol显示出来,而当用户未滚动到一定位置时,被隐藏起来。
<template>
<div class="homie">
<navbar class="home-nav"><div slot="center">购物街</div> </navbar>
<tabcontrol :titles="['流行','新款','精选']" @tabclick="tabclick"
ref="tabcontrol1" class="tab" v-show="istabfixed"> </tabcontrol>
<scroll class="content" ref="scroll" :probe-type="3" @scroll="contentscroll" :pull-up-load="true" @pullingUp="loadmore">
<homeswiper :banners="banners" @swiperimageload="swiperimageload"></homeswiper>
<reco :recommends="recommends"></reco>
<featureview></featureview>
<tabcontrol :titles="['流行','新款','精选']" @tabclick="tabclick"
ref="tabcontrol2"> </tabcontrol>
<goodslist :goods="showgoods"></goodslist>
</scroll>
</div>
</template>
contentscroll(position){
this.isshow= (-position.y) > 1000
this.istabfixed = (-position.y) > this.tabOffsetTop
}
tabclick(index){
switch (index){
case 0:
this.currenttype ="pop"
break
case 1:
this.currenttype = 'new'
break
case 2:
this.currenttype="sell"
break
}
this.$refs.tabcontrol1.currentIndex = index;
this.$refs.tabcontrol2.currentIndex = index;
}
这样的设置为,于第一个tabcontrol中加一个v-show,当位置的绝对值大于tabOffsetTop时,istabfixed为true,而使得第一个tabcontrol显示出来。且为了保持数据一致,设置两个tabcontrol值,之后便在tabclick方法中,将index赋值于它们,最后设置下,第一个tabcontrol的样式。
.tab{
position: relative;
z-index: 9;
}
这样便实现了tabcontrol的吸顶效果。
tabControl组件的吸顶效果的更多相关文章
- [RN] React Native 头部 滑动吸顶效果的实现
React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...
- 自定义tab吸顶效果一(原理)
PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
- Html吸顶效果
Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...
- 基于scroll的吸顶效果
本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...
- better-scroll之吸顶效果巨坑挣扎中
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...
- js之吸顶效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
随机推荐
- Redis/Mysql/SQLite/MongoDB 数据库对比
一.Redis: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...
- Flink实战(102):配置(一)管理配置
来源:http://www.54tianzhisheng.cn/2019/03/28/flink-additional-data/ 前言 如果你了解 Apache Flink 的话,那么你应该熟悉该如 ...
- 牛客巅峰赛S2第6场题解
牛客编程巅峰赛S2第6场 A-StringⅡ 题目 题目描述 给出一个仅包含小写字母的字符串s,你最多可以操作k次,使得任意一个小写字母变为与其相邻的小写字母(ASCII码差值的绝对值为1),请你求出 ...
- PyQt(Python+Qt)学习随笔:QTableWidget中表格各列平均分配宽度的两种方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget表格部件中,如果需要实现表格中各列要占满部件中的可用空间,同时实现各列平分 ...
- PyQt(Python+Qt)学习随笔:QAbstractItemView的selectionMode属性
老猿Python博文目录 老猿Python博客地址 一.概述 selectionMode属性用于控制view中操作选择数据项的模式,用于控制用户是否可以选择一个或多个数据项,以及在多个数据项选择中,选 ...
- Win10激活失败并提示错误代码0xC004C003的解决方法
亲测,可用. 步骤如下: 进入cmd,管理员权限登录 slmgr.vbs /upk slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms zh.us ...
- 手把手教你写DI_0_DI是什么?
DI是什么? Dependency Injection 常常简称为:DI. 它是实现控制反转(Inversion of Control – IoC)的一个模式. fowler 大大大神 "几 ...
- 题解-Railgun
题面 Railgun \(T\) 组测试数据,每次给定 \(n,k\),求(\(F(i)\) 为斐波那契数列第 \(i\) 项): \[\sum_{1\le x_i\le n(1\le i\le k) ...
- DVWA各等级XSS
xss原理及基本介绍 XSS,全称Cross Site Scripting,即跨站脚本攻击,某种意义上也是一种注入攻击,是指攻击者在页面中注入恶意的脚本代码,当受害者访问该页面时,恶意代码会在其浏览器 ...
- Docker修改默认的网段
一,问题 docker安装后默认的网段是172.17网段的,和真实环境网段冲突导致本机电脑无法连接docker机器. 二,解决办法 修改docker默认网段 1,先把docker停止 systemct ...