最近在研究小程序的时候，遇到了一个问题，就是tabbar切卡，在android上有fragment，在rn上也有提供一个第三方的组件来用，微信小程序，好像没有专门的一个组件来实现这个功能，度娘了大半天，虽然也有好多人实现过这样的功能，但是我发现要么是不符合我的需求，那么就是实现起来过于繁琐。于是我参考多个高手写的博客，实现出了一个符合自己需求的。先上代码。
先看js文件：
const util = require('../../utils/util.js');
Page({
data: {
navTab:["投资","理财"],
/**
* 页面配置
*/
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
arrayList:[1,2,3,4,5,6,6,7,6,3,2,1,8,9,6,0,4],
modalHidden:true,
content:"这是一个表情",
imagesHeightList:[],
imageList:[
"../../images/image1.jpg",
"../../images/image2.jpg",
"../../images/image3.jpg",
],
datalist:[
"../../images/image1.jpg",
"../../images/image2.jpg",
"../../images/image3.jpg",
],
},
/**
* 页面初始化
* options 为页面跳转所带来的参数
*/
onLoad: function (options) {
var that = this;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
onReady: function () {
},
/**
* 显示弹窗
*/
modalShow:function(){
var that = this;
that.setData({
modalHidden:false,
});
},
/**
* 点击取消，确认按钮
*/
modalChange:function(){
var that = this;
that.setData({
modalHidden:true,
});
},
/**
* 滑动切换tab
*/
bindChange: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
/**
* 点击tab切换
*/
swichNav: function (e) {
console.log("--------");
var that = this;
if (that.data.currentTab === e.target.dataset.idx) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.idx
})
}
},
}) 登录后复制
css代码
/**index.wxss**/
.swiper-tab{
width: 100%;
border-bottom: 0.5rpx solid #cccccc;
text-align: center;
line-height: 80rpx;}
.top-tab{
width: 750rpx;
height: 100rpx;
background: #fff;
color: #000;
font-size: 28rpx;
font-weight: bold;
line-height: 100rpx;
border-bottom: 4rpx solid #eee;
margin: 0 20rpx 8rpx 0rpx;
position: fixed;
top: 0;
z-index: 9999;
}
.shift{
position:absolute;
bottom: 1px;
height: 3px;
width: 20%;
background: red;
}
.on{
color: red;
border-bottom: 2rpx solid red ;
}
.swiper-box{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view{
text-align: center;
}
.swiper-tab{
height: 30px;
line-height: 30px;
background: #FFF;
display: flex;
position: relative;
z-index: 2;
border-bottom: 1px solid #F4F4F4;
flex-direction:row;
justify-content:center;
align-items:center;
}
.swiper-tab-list{
margin: 0 20px;
padding: 0 4px;
font-size: 28rpx;
font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif }
.on{ border-bottom: 1px solid #48C23D; color: #48C23D; }
.swiper-box{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.hot-box{ display: block; height: 100%; font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif }
.hot-box-main{ display: block; overflow: hidden; margin-bottom: 20px; background: #FFF; }
.hot-main{ height: 50px; background: url("../../static/001.jpg") #FFF no-repeat 0 50%; background-size: cover; padding: 30px 20px; position: relative; z-index: 1; }
.hot-main::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.85) 100%); }
.hot-main-box{ position: relative; z-index: 2; }
.hot-main-title{ color: #FFF; font-size: 34rpx; }
.list-box{ padding: 20px 20px 20px 40px; display: block; font-size: 30rpx; border-bottom: 1px solid #F6F6F6; position: relative;}
.list-box::after{ display: block; content: ""; position: absolute; width: 6px; height: 6px; background: #ff6511; border-radius: 50%; top: 25px; left: 20px; }
.list-box-title{ font-weight: 400; line-height: 42rpx; }
.list-box-sub{ font-size: 24rpx; color: #666; padding-top: 6px; }
.hot-box-more{ text-align: center; font-size: 22rpx; color: #999; margin-bottom: 30px; }
.hot-box-more image{ width: 80px; height: 16px; display: block; margin: 0 auto;}
.swiper-boxs { height: 200px;
background: #F2F2F2;
}
.swiper-boxs-img {
display: block;
width: 100%;
height: 200px;
position: relative;
}
.swiper-boxs-img::before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.5) 100%);
}
/*理财 */
.themes-box{
display: block;
}
.themes-box-top{
text-align: center;
padding-bottom: 16px;
padding-top: 16px;
background: #F9F9F9; }
.themes-box-title{
font-size: 16px;
font-weight: 500;
display: block; }
.themes-box-subtitle{
font-size: 12px;
color: #666;
display: block;
margin-top: 4px;
}
/* 投资列表 */
.themes-list{
background: #FFF;
display: block;
margin-bottom: 20px;
}
.themes-list-box{
display: block;
position: relative;
padding: 16px 20px;
border-bottom: 1px solid #F2F2F2;
}
.themes-list-thumbnail{
position: absolute;
left: 20px;
top: 16px;
height: 40px;
width: 40px;
}
.themes-list-img{
width: 40px;
height: 40px;
border-radius: 4px;
border: 1px solid #F2F2F2;
}
.themes-list-main{
margin-left: 50px;
}
.themes-list-name{
font-size: 14px;
color: #444;
height: 20px;
line-height: 20px;
overflow: hidden;
}
.themes-list-description{
font-size: 12px;
color: #999;
height: 20px;
line-height: 20px;
overflow: hidden;
}
/*理财系列*/
.WxMasonryView{
column-count:2;
column-gap: 2px;
width: 100%;
}
.WxMasonry{
width: 95%;
background: #fefefe;
border: 2px solid #fcfcfc;
box-shadow: 0px 2px 2px rgba(34, 25, 25, 0.4);
margin: 5px 2px 2px 2px;
padding: 1px;
padding-bottom: 5px;
transition: opacity .4s ease-in-out;
display: inline-block;
}
.WxMasonryImage{
width: 100% !important;
display: inline-block;
}
.swiper-box{
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.hot-box{
display: block;
height: 100%;
font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif
}
.hot-box-main{
display: block;
overflow: hidden;
margin-bottom: 20px;
background: #FFF;
}
.hot-main::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.85) 100%); }
.hot-box-top{ padding: 20px; border-bottom: 1px solid #F6F6F6; text-align: center; }
.hot-box-title{ font-size: 32rpx; height: 30px; line-height: 32px; font-weight: 400; color: #444; padding: 5px 10px; border: 1px solid #444; }
.list-box{
padding: 0;
display: inline-block;
font-size: 30rpx;
border-bottom: 1px solid #F6F6F6;
}
.list-box-title{ font-weight: 300; line-height: 42rpx; } 登录后复制
在看看html上面的代码
登录后复制{{itemName}} <!-- 投资页面 --> <!-- 理财页面 --> <!-- --> --><!-- --> <!-- 皇家林 是帅哥 确定要进入详情页面吗。 理财页面 {{content}}
最后我们看看效果图
这里如果全部代码复制，会发现往左边滑动的时候滑动不了，不要奇怪，那是因为在理财页面我想实现一个瀑布流，是一个半成品，存在bug，大家去掉那一部分就会正常了。
更多微信小程序之tabbar切卡 相关文章请关注PHP中文网！
免责 声明
1、本网站名称：慧达安全导航
2、本站永久网址：https//www.huida178.com/
3、本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务!
4、本站所有资源的属示图片和信息不代表本站的立场!本站只是储蓄平台及搬运
5、下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行!只允许调试，参考和研究!!!!
6、未经原版权作者许可禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担!
7、为尊重作者版权，请在下载24小时内删除!请购买原版授权作品，支持你喜欢的作者，谢谢!
8.若资源侵犯了您的合法权益，请持 您的版权证书和相关原作品信息来信通知我们！QQ：1247526623我们会及时删除，给您带来的不便，我们深表歉意!
9、如下载链接失效、广告或者压缩包问题请联系站长处理
10、如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入!
11、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需
12、因源码具有可复制性，一经赞助，不得以任何形式退款。
13、本文内容由网友自发贡献和站长收集，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系1247526623@qq.com
转载请注明出处： 慧达安全导航 » 微信小程序之tabbar切卡
发表评论 取消回复