微信小程序tab切换（点击标题切换，滑动屏幕切换）

效果图：

WXML文件

<view class="tab"><scroll-view class="nav" scroll-x="true" scroll-left="{{scrollLeft}}"><block wx:for="{{allTitle}}" wx:for-index="idx" wx:key="idex"><view class="nav-item {{currentIndex==idx ? 'active' : ''}}" data-current="{{idx}}" bindtap="changeTitle">{{item.title}}</view></block></scroll-view><swiper class="content-container" current="{{currentIndex}}" circular="{{false}}" bindchange="changeContent"><swiper-item class="content">客厅</swiper-item><swiper-item class="content">厨房</swiper-item><swiper-item class="content">卧室</swiper-item><swiper-item class="content">KTV</swiper-item><swiper-item class="content">浴室</swiper-item><swiper-item class="content">广场</swiper-item><swiper-item class="content">公园</swiper-item><swiper-item class="content">博物馆</swiper-item></swiper>
</view>

JS文件

//index.js
//获取应用实例
const app = getApp()Page({data: {allTitle:[{ id: 0, title: '客厅'},{ id: 1, title: '厨房'},{ id: 2, title: '卧室'},{ id: 3, title: 'KTV'},{ id: 4, title: '浴室'},{ id: 5, title: '广场'},{ id: 6, title: '公园'},{ id: 7, title: '博物馆'}],currentIndex: 0, //当前选中标题的下标scrollLeft: 0, //tab滚动条的位置},onLoad: function () {},//点击切换标题changeTitle(event){let index = event.target.dataset.current;//当前点击标题的indexthis.setData({currentIndex:index})},//滑动切换内容changeContent(event){let current = event.detail.current;let singleNavWidth = wx.getSystemInfoSync().windowWidth / 5;this.setData({currentIndex: current,scrollLeft: (current - 2) * singleNavWidth});}
})

WXSS文件

page{width: 100%;height: 100%;
}
.tab {width: 100%;height: 100%;display: flex;flex-direction: column;
}.nav {height: 80rpx;width: 100%;overflow: hidden;white-space: nowrap;line-height: 80rpx;font-size: 16px;position: fixed;top: 0;left: 0;z-index: 99;
}.nav-item {width: 20%;display: inline-block;text-align: center;
}.active {color: #FF6471;position: relative;
}.active:after{content: "";display: block;width:100%;height: 5rpx;border-radius: 8rpx;background: #FF6471;position: absolute;bottom: 0;
}.content-container {padding-top: 180rpx;height: 100%;width: 100%;text-align: center;
}.content{margin-top:180rpx;
}/* 隐藏滚动条 */
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}

微信小程序tab切换（点击标题切换，滑动屏幕切换）相关推荐

微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml  <view class="videoBox"><view class=" ...
小程序仿微视_微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml 收藏分享电话关闭 @{{item.reallyName}} {{item.workProvince}}{{item.workCity}}{{item.workCo ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...

微信小程序tab切换（点击标题切换，滑动屏幕切换）

微信小程序tab切换（点击标题切换，滑动屏幕切换）相关推荐

最新文章

热门文章