微信小程序滚动tab的实现
2024-08-29 08:29:59
微信小程序滚动tab的实现
1.目的：为了解决滚动版本的tab，以及实现虹吸效果。
2.方案：自己动手写了一个Demo，用于测试实现如上的效果。其代码有做参考，在这里先声明。具体的参照如下:重庆大学二手书小程序。
3.效果：
A)初始化效果:
B)最终效果:
4.实现：
项目结构如下:
WXML代码如下：
<view class="Hv">间隔高度，测试虹吸效果1</view>
<view id="block0"></view>
<!--分类导航-->
<scrolltab tabdata="{{college}}" scrollTop="{{scrollTop}}" scrollH="{{scrollH}}" bindtabtap="tabtapopt"/> <view class="Hv">间隔高度，测试虹吸效果A</view>
<view class="Hv">间隔高度，测试虹吸效果B</view>
<view class="Hv">间隔高度，测试虹吸效果C</view>
<view class="Hv">间隔高度，测试虹吸效果D</view>
JS代码如下：
//index.js
Page({
data: {
college: [{
name: '分类A',
id: -1
},
{
name: '分类B',
id: 0
},
{
name: '分类C',
id: 1
},
{
name: '分类D',
id: 2
},
{
name: '分类E',
id: 3
},
{
name: '分类F',
id: 4
},
{
name: '分类G',
id: 5
},
{
name: '分类H',
id: 6
},
{
name: '分类I',
id: 7
},
{
name: '分类J',
id: 8
},
{
name: '分类K',
id: 9
},
{
name: '分类L',
id: 10
},
{
name: '分类M',
id: 11
},
{
name: '分类N',
id: 12
},
{
name: '分类O',
id: 13
},
{
name: '分类P',
id: 14
},
],
scrollTop: 0,
scrollH:0,
},
onLoad: function() {
var that=this;
const query = wx.createSelectorQuery()
query.select('#block0').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
that.setData({
scrollH: res[0].top,
})
})
},
//监测屏幕滚动
onPageScroll: function(e) {
this.setData({
//scrollTop: parseInt((e.scrollTop) * wx.getSystemInfoSync().pixelRatio),
scrollTop: parseInt(e.scrollTop)
})
},
//操作获取数据
tabtapopt(e) {
var that = this; var colleges = that.data.college;
var collegeCur = e.detail; if (collegeCur == -2) {
wx.showToast({
title: '全部',
})
} else {
var names = "";
colleges.forEach(function(value, index) {
if (collegeCur == value.id) {
names = value.name;
}
}) wx.showToast({
title: names,
})
}
},
})
JSON文件如下:
{
"usingComponents": {
"scrolltab":"../../components/scrolltab/index"
}
}
WXSS文件如下:
/**index.wxss**/
.Hv{
width: 100vw;
height: 310px;
} /*滚动Tab*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
github地址如下：https://github.com/weiyunhelong/WxScrollTab，欢迎下载并使用！
最新文章
- sping注解
- 浅谈JavaScript中的继承
- AjaxPost、冒泡示例
- NRF52832学习笔记
- Qt 窗口属性简介之Qt::WA_DeleteOnClose
- 飞达资讯App总体介绍及关系架构图
- apache开源项目--subversion
- [算法] 希尔排序 Shell Sort
- BNUOJ-29357 Bread Sorting 模拟
- ECshop模板机制
- java中集合杂记
- 告别LVS：使用keepalived+nginx实现负载均衡代理多个https
- Android开发常用的插件及工具
- 基于Spark环境对比Python和Scala语言利弊
- php 解密小程序获取unionid
- java子类对象和成员变量的隐写&方法重写
- winform调用jar包
- SQLException: com.mchange.v2.c3p0.ComboPooledDataSource [ java.beans.IntrospectionException: java.lang.reflect.InvocationTargetException [numThreadsAwaitingCheckoutDefaultUser] ] has been closed()
- 64位tomcat不能配32位的JDK使用
- 使用ssm实现校验密码