最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序实现tab点击切换教程
时间:2022-10-11 编辑:坚强 来源:一聚教程网
本文为小伙伴们带来了关于微信小程序实现tab点击切换教程,感兴趣的小伙伴一起来看看吧。
本文实例为大家分享了微信小程序无滑动效果的tab点击切换的具体代码,供大家参考,具体内容如下
{{item.title}}({{item.num}})
暂无订单{{index}}
css;">/* 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 () { }, })
以上就是关于微信小程序实现tab点击切换教程的全部内容了,感兴趣的小伙伴记得点击关注哦。
-
上一个: 降低vue-router版本的解决方案
-
下一个: JavaScript队列数据结构介绍
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12