微信小程序 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}],},// 切换tabchange: function (event) {console.log('切换时会调用', event);var a = event.currentTarget.dataset.pageidthis.setData({page: a,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},})

微信小程序 tab点击切换（不滑动）相关推荐

微信小程序 swiper 点击切换，左右滑动，自动滑动，源码下载
已解决不同页面不同高度已解决卡死问题 .wxml <view class="swiper-tab"> <view class="swiper-ta ...
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 ...
微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序实现点击拍照长按录像功能
微信小程序实现点击拍照长按录像功能代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...

微信小程序 tab点击切换（不滑动）

微信小程序 tab点击切换（不滑动）

微信小程序 tab点击切换（不滑动）相关推荐

最新文章

热门文章