微信小程序实现tab点击切换

3403771864 发布于2022-09-21 22:35 / 514人阅读

微信小程序项目中，要实现无滑动效果，可以用tab点击切换，看看具体代码供参考：

　　<!--pages/dingdan/dingdan.wxml-->
　　<view class="body">
　　<view class="swiper-tab">
　　<view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
　　<hr class="{{page==index?'selected-line':'unselect-line'}}" />
　　</view>
　　</view>
　　<view class="view-Content">
　　<view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
　　<view class="content">
　　<text>暂无订单{{index}}</text>
　　</view>
　　</view>
　　</view>
　　</view>

　　/* pages/dingdan/dingdan.wxss */
　　page {
　　width: 100%;
　　height: 100%;
　　overflow: hidden;
　　/* background: pink; */
　　}
　　.body {
　　height: 100%;
　　/* background: hotpink; */
　　display: flex;
　　flex-direction: column;
　　}
　　/* tab栏 */
　　.swiper-tab {
　　width: 100%;
　　height: 80rpx;
　　text-align: center;
　　display: flex;
　　justify-content: space-between;
　　background: white;
　　}
　　.selected-menu {
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　color: #ff5050;
　　background: #fff;
　　font-size: 32rpx;
　　font-weight: bold;
　　font-family: PingFang SC;
　　font-weight: 400;
　　width: 33%;
　　height: 60rpx;
　　line-height: 60rpx;
　　opacity: 1;
　　/* border-bottom: 2px solid #ff5050; */
　　position: relative;
　　}
　　.unselect-menu {
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　font-size: 16px;
　　font-family: PingFang SC;
　　font-weight: 400;
　　color: #4f4f50;
　　width: 33%;
　　height: 60rpx;
　　line-height: 60rpx;
　　background: #fff;
　　opacity: 1;
　　position: relative;
　　/* border-radius: 34rpx; */
　　}
　　.selected-line {
　　background: #ff5050;
　　height: 4rpx;
　　width: 90rpx;
　　position: absolute;
　　/* margin-top: 10rpx; */
　　bottom: -18rpx;
　　width: 60rpx;
　　}
　　/* 内容 */
　　.view-Content {
　　flex: 1;
　　overflow-y: auto;
　　background-color: rgb(236, 236, 236);
　　}
　　.tabCon {
　　height: 100%;
　　}
　　/* 展示隐藏 */
　　.show {
　　display: block;
　　}
　　.hidden {
　　display: none;
　　}

　　Page({
　　/**
　　* 页面的初始数据
　　*/
　　data: {
　　page: 0, // page：当前页--
　　tabList: [{
　　title: '菜单1',
　　num: 0
　　}, {
　　title: '菜单2',
　　num: 0
　　}, {
　　title: '菜单3',
　　num: 0
　　}],
　　},
　　// 切换tab
　　change: function (event) {
　　console.log('切换时会调用', event);
　　var a = event.currentTarget.dataset.pageid
　　this.setData({
　　page: a,
　　})
　　},
　　/**
　　* 生命周期函数--监听页面加载
　　*/
　　onLoad: function (options) {
　　},
　　/**
　　* 生命周期函数--监听页面初次渲染完成
　　*/
　　onReady: function () {
　　},
　　/**
　　* 生命周期函数--监听页面显示
　　*/
　　onShow: function () {
　　},
　　/**
　　* 生命周期函数--监听页面隐藏
　　*/
　　onHide: function () {
　　},
　　/**
　　* 生命周期函数--监听页面卸载
　　*/
　　onUnload: function () {
　　},
　　/**
　　* 页面相关事件处理函数--监听用户下拉动作
　　*/
　　onPullDownRefresh: function () {
　　},
　　/**
　　* 页面上拉触底事件的处理函数
　　*/
　　onReachBottom: function () {
　　},
　　/**
　　* 用户点击右上角分享
　　*/
　　onShareAppMessage: function () {
　　},
　　})

感谢阅读，请关注更多后续精彩内容。

GPU云服务器云服务器微信小程序技术实现 js实现tab切换微信小程序微信小程序支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127810.html

微信小程序之选项卡

摘要：我们在函数中通过获取设备的宽高来设置组件高度以及高度为导航栏的高度点击导航栏切换内容点击切换滑动内容切换导航栏滑动切换可滚动区域滚动最底刷新数据页面上拉触底事件的处理函数更新列表一个漂亮的选项卡就完成了完整案例选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡思路之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件...

stormjun 2019-08-23 11:49 评论0 收藏0
微信小程序小技巧系列《一》幻灯片，tab导航切换

摘要：作者来自幻灯片使用微信小程序原生组件实现。配合在逻辑页面配置数据实现幻灯片导航切换由于微信小程序不能直接操作，所以这里设置一个值。用来模拟操作，来实现导航内容的切换用于模拟操作转自转载地址作者：gou-tian来自：github 幻灯片使用微信小程序原生组件swiper实现。 ...

rickchen 2019-08-21 11:16 评论0 收藏0
微信小程序小技巧系列《一》幻灯片，tab导航切换

摘要：作者来自幻灯片使用微信小程序原生组件实现。配合在逻辑页面配置数据实现幻灯片导航切换由于微信小程序不能直接操作，所以这里设置一个值。用来模拟操作，来实现导航内容的切换用于模拟操作转自转载地址作者：gou-tian来自：github 幻灯片使用微信小程序原生组件swiper实现。 ...

MangoGoing 2019-08-14 17:00 评论0 收藏0
实现微信小程序下面商品左右滑动上面tab也跟随变动功能

　　现在就是要求在小程序下面商品左右滑动上面tab也跟随变动功能　　点击tab切换下面的上面信息，商品左右滑动切换上面的tab分类　　功能描述：点击tab切换下面的商品信息；滑动下面的商品信息tab也进行切换。　　第一步：我们先来说一下上面的tab,tab我们使用scroll-view scroll-x="true" 就可以。　　<scroll-viewclass=&qu...

3403771864 2022-11-05 17:23 评论0 收藏0