效果图:

代码:

<view class="container">
<!-- tab导航栏 -->
<!-- scroll-left属性可以控制滚动条位置 -->
<!-- scroll-with-animation滚动添加动画过渡 -->
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
<view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">{{navItem.text}}</view>
</block>
</scroll-view>
<!-- 页面内容 -->
<swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
<swiper-item wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
{{tabItem}}
</swiper-item>
</swiper>
</view>
/**index.wxss**/
page{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
}
.nav {
height: 80rpx;
width: 100%;
box-sizing: border-box;
overflow: hidden;
line-height: 80rpx;
background: #f7f7f7;
font-size: 16px;
white-space: nowrap;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.nav-item {
width: 20%;
display: inline-block;
text-align: center;
}
.nav-item.active{
color: red;
}
.tab-box{
background: greenyellow;
padding-top: 80rpx;
height: 100%;
box-sizing: border-box;
}
.tab-content{
overflow-y: scroll;
}
//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
navData:[
{
text: '首页'
},
{
text: '健康'
},
{
text: '情感'
},
{
text: '职场'
},
{
text: '育儿'
},
{
text: '纠纷'
},
{
text: '青葱'
},
{
text: '上课'
},
{
text: '下课'
}
],
currentTab: 0,
navScrollLeft: 0
},
//事件处理函数
onLoad: function () {
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
switchNav(event){
var cur = event.currentTarget.dataset.current;
//每个tab选项宽度占1/5
var singleNavWidth = this.data.windowWidth / 5;
//tab选项居中
this.setData({
navScrollLeft: (cur - 2) * singleNavWidth
})
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},
switchTab(event){
var cur = event.detail.current;
var singleNavWidth = this.data.windowWidth / 5;
this.setData({
currentTab: cur,
navScrollLeft: (cur - 2) * singleNavWidth
});
}
})

感谢 各位老板  小额打赏:   (有问题call俺)

原文 链接:https://www.cnblogs.com/till-the-end/p/8935152.html

小程序tab栏可滑动,可点击居中demo的更多相关文章

  1. 微信小程序tab栏切换

    Wxml代码:<view class="body"> <view class="nav bc_white"> <view clas ...

  2. 微信小程序--Tab栏切换的快速实现

    上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...

  3. 小程序 onReachBottom 事件快速滑动时不触发的bug

    一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...

  4. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  5. 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  6. 小程序开发顶部TAB栏和侧边分类点击

    先上一个效果图: 根据这个效果图我来说内容. 首先是顶部tab栏 效果实现依靠的是一个组件scroll-view.这个组件很有意思,可以多层嵌套,当然它的属性也很多. 这里主要用的是scroll-x, ...

  7. 小程序tab切换 点击左右滑动

    wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...

  8. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  9. 微信小程序-tab标签栏实现教程

    一.摘要 tab栏(标签切换栏)是app中常见的一种交互方式,它可以承载更多的内容,同时又兼顾友好体验的优点.但在小程序中,官方并没有为咱们提供现成的组件.因此我们程序员展现才艺的时候到了(其实市面上 ...

随机推荐

  1. tp 天气Vue参考

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta cha ...

  2. php 23种设计模型 - 适配器模式

    适配器模式(Adapter) 适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能. 这种模式涉及到一个单一的类, ...

  3. CSAPP CH7链接的应用:静动态库制作与神奇的库打桩机制

    目录 创建静态库 创建动态库 库打桩机制 编译时打桩: 链接时打桩 运行时打桩 运行时打桩的printf与malloc循环调用debug 使用LD_PRELOAD对任意可执行程序调用运行时打桩 总结 ...

  4. ArcGIS下载安装

    鉴于各位在安装过程中碰到诸多问题,博主打算分享下安装过程 ,仅供参考 一.注意:两个版本安装之前都必须的步骤 安装license Manager10.2,下载完成后,打开安装点击SetUp.exe,如 ...

  5. 用 EXISTS 或 NOT EXISTS 用法

    项目中遇到这么个情况: t1表 和 t2表  都是150w条数据,600M的样子,都不算大. 但是这样一句查询 ↓ select * from t1 where phone not in (selec ...

  6. C++设计模式 - 状态模式(State)

    状态变化模式 在组件构建过程中,某些对象的状态经常面临变化,如何对这些变化进行有效的管理?同时又维持高层模块的稳定?"状态变化"模式为这一问题提供了一种解决方案. 典型模式 Sta ...

  7. php——字符串的""和null,empty的关系

    public function test(){ $test = ""; if($test==null){ echo "test==null <hr>" ...

  8. Linux-Centos7学习笔记

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 下载.安装与配置 下载 下载Centos镜像,网站见参考 点击大的版本,例如7,再选择isos进行下载 安装 这里使用的VMware 12 Pro, ...

  9. Linux中8个有用的touch命令

    在Linux中,每个文件都有时间戳,并且每个文件都存储上次访问时间,上次修改时间,上次改变时间的信息.因此,无论什么时候我们创建新的文件,访问或者修改一个存在的文件,那个文件的时间戳会自动被更改. 在 ...

  10. springboot通过maven下载依赖失败解决

    公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...