微信小程序中顶部导航栏的实现代码

微信小程序 2019-01-03

微信小程序中顶部导航栏的实现

实例代码：

rush:js;">

<swiper current="{{currentTab}}" class="swiper-Box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

我是哈哈 我是呵呵 我是嘿嘿 我是嘿嘿 我是嘿嘿

<div class="jb51code">
<pre class="brush:js;">
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list{ font-size: 30rpx;
display: inline-block;
width: 20%;
color: #777777;
}
.on{ color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;}
.swiper-Box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-Box view{
text-align: center;
}

rush:js;"> var app = getApp() Page( { data: { /** * 页面配置 */ winWidth: 0,winHeight: 0,// tab切换 currentTab: 0,},onLoad: function() { var that = this;

/**

success: function( res ) {
that.setData( {
winWidth: res.windowWidth,winHeight: res.windowHeight
});
}

});
},/**

  • 滑动切换tab
    */
    bindChange: function( e ) {

var that = this;
that.setData( { currentTab: e.detail.current });

},/**

  • 点击tab切换
    */
    swichNav: function( e ) {

var that = this;

if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
},/**

  • 点击分享
    */
    onShareAppMessage: function () {
    return {
    title: '装逼小程序',path: '/page/user?id=123'
    }
    }
    })

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

小程序微信小程序顶部导航栏

相关文章

开发微信小程序的用户授权登录功能
开发微信小程序的用户授权登录功能
小程序开发页面如何实现跳转？
小程序开发页面如何实现跳转？
浅谈小程序开发中蓝牙连接错误分析及解决方法
浅谈小程序开发中蓝牙连接错误分析及解决方法
什么是小程序？它有哪些功能？
什么是小程序？它有哪些功能？
如何配置小程序开发项目结构？（教程）
如何配置小程序开发项目结构？（教程）
怎么把自己的店加入小程序
怎么把自己的店加入小程序