本文给大家带来的是微信小程序选车简单顶部三项导航样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="top-tab flex-wrp flex-tab " >
<view class="toptab flex-item {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab">
{{itemName}}
</view>
</view>
|
二、wxss样式文件代码如下：
/**导航**/
.flex-wrp{
display: flex;
}
.flex-tab{
flex-flow: row nowrap;
justify-content: space-around;
align-items: stretch;
}
.flex-item{
flex-grow: 1;
text-align: center;
}
.top-tab{
width: 750rpx;
height: 100rpx;
background: #fff;
color: #000;
font-size: 28rpx;
font-weight: bold;
line-height: 100rpx;
border-bottom: 30rpx solid #eee;
margin: 0 20rpx 8rpx 0rpx;
position: fixed;
top: 0;
z-index: 9999;
}
.toptab.active{
color: #298DE5;
border-bottom: solid 2px #298DE5;
}
/**页面样式**/
.brand{
width: 600rpx;
height: 130rpx;
clear: both;
}
.brand_new{
width: 120rpx;
height: 120rpx;
float: left;
}
|
三、js页面代码如下：
//discovery.js
var util = require('../../utils/util.js')
Page({
data: {
navTab: ["品牌选车", "条件选车", "轻松选车","","",""],
currentNavtab: "0",
feed: [],
feed_length: 0
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
this.refresh();
},
switchTab: function(e){
this.setData({
currentNavtab: e.currentTarget.dataset.idx
});
},
bindItemTap: function() {
wx.navigateTo({
url: '../answer/answer'
})
},
bindQueTap: function() {
wx.navigateTo({
url: '../question/question'
})
},
upper: function () {
wx.showNavigationBarLoading()
this.refresh();
console.log("upper");
setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
},
lower: function (e) {
wx.showNavigationBarLoading();
var that = this;
setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
console.log("lower")
}
});
|
.jpg)
.jpg)
