微信上面导航栏

来源：互联网发布：未来人工智能机器人编辑：程序博客网时间：2024/04/29 08:58

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

看了半天别人做的

有点蒙蔽

经过研究发现就是用

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

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>

<swiperbindchange='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: 2rpx solid#777;
text-align: center;
line-height: 80rpx;
}

.table_list {
font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #777;
}

.on{ color:#da7c0c; 
border-bottom: 5rpx 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 () {
}
})

阅读全文

0 0