uni-app 顶部选项卡吸附效果 demo(整理)
App 效果 整理 Demo uni 顶部 选项卡
2023-09-14 09:04:05 时间
效果图:
<template>
<view>
<!-- 顶部banner图 -->
<view class="ding">banner</view>
<!-- tab 滑动 -->
<view :class="{'st':true,'sticky-fixed':isF}">
<!-- tab部分 -->
<swiper class="ct_tab">
<swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in tabList" :key="index"
class="ct_item" @click="clickCtTab(index)">
<text v-text="item.title"></text>
</swiper-item>
</swiper>
</view>
<!-- 内容 -->
<view class="xiala">
<!-- 内容信息 -->
<view v-if="tabCur===0">
<view>全部信息</view>
<view>111111111111111111111111111</view>
<view>222222222222222222222222222</view>
<view>333333333333333333333333333</view>
</view>
<view v-if="tabCur===1">
<view>水果</view>
<view>111111111111111111111111111</view>
<view>222222222222222222222222222</view>
<view>333333333333333333333333333</view>
</view>
<view v-if="tabCur===2">
<view>蔬菜</view>
</view>
<view v-if="tabCur===3">
<view>调味品</view>
</view>
<view v-if="tabCur===4">
<view>肉类</view>
</view>
<view v-if="tabCur===5">
<view>油类</view>
</view>
<view v-if="tabCur===6">
<view>米类</view>
</view>
<view v-if="tabCur===7">
<view>海鲜</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 下拉固定
yuanH: uni.upx2px(200),
isF: false,
// 滑动tab
tabCur: 0,
tabList: [{
title: '全部',
}, {
title: '水果',
}, {
title: '蔬菜',
}, {
title: '调味品',
}, {
title: '肉类',
}, {
title: '油类',
}, {
title: '米类',
}, {
title: '海鲜',
}],
};
},
onPageScroll(e) {
//#ifdef H5
this.isF = true
// #endif
// #ifndef H5
if (this.yuanH > e.scrollTop) {
this.isF = false
} else {
this.isF = true
}
// #endif
},
methods: {
clickCtTab(ctCur) {
this.tabCur = ctCur
console.log('点击了--->' + this.tabCur)
}
},
};
</script>
<style lang='scss' scoped>
/* 顶部 banner */
.ding {
height: 200rpx;
background-color: aquamarine;
}
.st {
height: 90rpx;
width: 750rpx;
background-color: #fff;
z-index: 999;
/* top: 300rpx; */
}
.sticky-fixed {
/* #ifdef H5 */
position: sticky;
top: 44rpx;
/* #endif */
/* #ifndef H5 */
position: fixed;
top: 0;
/* #endif */
z-index: 999;
}
.xiala {
height: 1500px;
background-color: #eee;
padding-top: 100rpx;
}
/* 滑动tab */
.ct_tab {
width: 698rpx;
height: 90rpx;
margin: 0 auto;
/* padding: 30rpx 0; */
font-size: 28rpx;
/* font-weight: bold; */
color: #c0c8d0;
white-space: nowrap;
display: flex;
overflow: hidden;
}
.ct_item {
width: 150rpx;
padding: 20rpx 0;
display: inline-block;
}
.ct_item text {
padding: 20rpx 0;
}
.ct_active {
color: #007AFF;
font-weight: bold;
}
.ct_active text {
border-bottom: 2px solid #007AFF;
}
swiper {
width: 100%;
}
swiper-item {
width: 150rpx !important;
}
</style>
原文链接:https://blog.csdn.net/qq_59795720/article/details/125004913?spm=1001.2014.3001.5502
相关文章
- App架构设计经验谈:服务端接口的设计
- uni-app:app:锁定屏幕方向禁止屏幕旋转(hbuilderx 3.7.3)
- uni-app:页面跳转/参数的传递接收(hbuilderx 3.6.18)
- uni-app:配置底部tabbar的例子(hbuilderx 3.6.18)
- 如何把软件安装到安卓系统文件里,就是/system/app里面
- [PReact] Create a Hello World App with Preact
- uni-app:微信小程序:预加载字体文件(hbuilderx 3.7.3)
- uni-app api:使用剪贴板进行复制粘贴(hbuilderx 3.6.18)
- uni-app底部导航栏tabBar监听变化以及变换样式
- 熬夜再战Android-那第一次运行APP的悸动
- android 11.0 通知栏接收app通知开关(屏蔽app通知)
- Android 仿ios实现app列表图标长按实现抖动效果
- android 9.0 10.0 修改Launcher3 app hotseat 图标形状为圆角图标
- 职场经验:聊下App测试~
- 4年测试面试官,熬夜1天肝出的3000字APP测试面试题
- 快速定位 Android APP 当前页面的三种方法(Activity / Fragment)
- 安卓APP加固(应用宝上架)
- 京东app连接电脑上访问突然跳转不到电脑版网页