UNIAPP----仿淘宝详情页滚动

淘宝详情页，滚动时，上面的选项卡也随之改变，本代码为测试版，我自己测可用，全部复制可运行参考。

核心思想：监听屏幕滚动距离，动态修改上面选中样式，也就是上面的字体会被选中。

点击上面字体获取下标，跳转到自定义位置，类似于HTML锚点。

HTML：

<template><view><view class="" style="position: fixed;top: 0;width: 100%;"><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs></view><view class="first"><text>这是第一页</text></view><view class="two" ><text>这是第二页</text></view><view class="three" ><text>这是第三页</text></view></view>
</template>

u-tabs 是uview ui里面的局部选项卡组件。先引入，否则不识别。

JS：

<script>
export default {data() {return {list: [{name: '商品'},{name: '详情'},{name: '推荐'}],current: 0,};},//动态修改选中字体onPageScroll(res) {this.top = res.scrollTop;console.log(this.top);if(this.top>=1430){this.current=2}else if(this.top>=700&& this.top<1430){this.current=1}else if(this.top>=0&& this.top<700){this.current=0}},methods: {//获取当前选中下标change(index) {this.current = index;console.log(this.current);// console.log(window)//判断选中下标，然后跳转指定高度if(this.current==0){uni.pageScrollTo({scrollTop: 0,duration: 200,});}else if(this.current==1){uni.pageScrollTo({scrollTop: 750,duration: 200,});} else if(this.current==2){uni.pageScrollTo({scrollTop: 1500,duration: 200,});}}}
}
</script>

CSS：

<style scoped>
.first {width: 100%;height: 1500rpx;background-color: red;
}
.two {width: 100%;height: 1500rpx;background-color: orange;
}
.three {width: 100%;height: 1500rpx;background-color: #007aff;
}
</style>

复制粘贴，直接运行，仅供参考，自己修改。

UNIAPP----仿淘宝详情页滚动相关推荐

uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
自定义View之仿淘宝详情页
自定义View之仿淘宝详情页转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...
仿淘宝详情页直接上代码
仿淘宝详情页直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...
仿淘宝详情页的商品详情
先上效果图效果就是上面图片的效果接下来看看如何实现首先我们来看下布局文件 <LinearLayoutandroid:id="@+id/header"android:la ...
Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧需要做一 ...
用原生js实现淘宝详情页图片放大镜效果
这个功能是我在模仿淘宝详情页的时候做出来的,最初版本对于非1:1比例的图片没有做处理,后续对程序进行了完善和逻辑上修改,形成了当前的程序. 废话不多说,直接进入正题了,先上个效果图先放上这段功能的h ...
自定义LinearLayout实现淘宝详情页
1.简单说明淘宝详情页就不用我一一介绍了,昨天逛淘宝看到这个效果时,让我想起了去年刚学习Android只会使用现成的时候,当时在网上找了一个这种效果的使用了,并不懂怎么实现的.现在就看到一种效果就想 ...
仿淘宝详情页轮播图效果实现
仿淘宝详情页轮播图效果实现图片路径记得修改.js源文件记得导入! <!doctype html> <head> <meta charset="UTF-8 ...
弘辽科技：优秀的淘宝详情页应包含哪些内容？
原标题<弘辽科技:优秀的淘宝详情页应包含哪些内容?> 淘宝详情页是影响顾客是否愿意下单的重要因素之一.宝贝的详情页不但会影响商品的转化,而且也反映出客户浏览商品的时长,对权重排名以及流量的 ...

UNIAPP----仿淘宝详情页滚动

UNIAPP----仿淘宝详情页滚动相关推荐

最新文章

热门文章