微信上面导航栏

我们做微信上面部分的导航栏


看了半天别人做的


有点蒙蔽


经过研究发现就是用


导航栏中设置一个页数的属性


swiper 中的一个属性current 的属性来设置页面  


点击子导航栏  获取页数  把轮播图中的current属性设置了 




我们做出上面的导航栏


然后就实现我们的轮播图的页面设置

wxml

< view class= "swiper-tab">

<!-- current_tap这个是我们用来做选中的样式 data-current 我们页面的页数-->

< view class= "table_list {{current_tap==0 ? 'on' : ''}}" bindtap= 'swichNav' data-current= "0" >1 </ view >

< view class= "table_list {{current_tap==1 ? 'on' : ''}}" bindtap= 'swichNav' data-current= "1" >2 </ view >

< view class= "table_list {{current_tap==2 ? 'on' : ''}}" bindtap= 'swichNav' data-current= "2" >3 </ view >

</ view >

< swiper bindchange= 'swiper_bindchang' current= '{{current_tap}}'>

< swiper-item >< view >我是一号 </ view ></ swiper-item >

< swiper-item >< view >我是二号 </ view ></ swiper-item >

< swiper-item >< view >我是三号 </ view ></ swiper-item >

</ swiper >

wxss

.swiper-tab {

width: 100%;

border-bottom: 2 rpx solid #777;

text-align: center;

line-height: 80 rpx;

}

.table_list {

font-size: 30 rpx;

display: inline-block;

width: 33.33%;

color: #777;

}

.on{ color: #da7c0c;

border-bottom: 5 rpx solid #da7c0c;}

js

// admin/swiper1/swiper1.js

Page({

/**

* 页面的初始数据

*/

data: {

current_tap: '0'

},

//把轮播图indexd页面设置为你的项目

swichNav: function(e){

var that = this;

console.log(e.target.dataset.current);

console.log(that.data.current_tap);

if(that.data.current_tap === e.target.dataset.curretn)

{

return false;

} else{

that.setData({

current_tap: e.target.dataset.current

})

}

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})